pages/bilder/index.php

@@ -0,0 +1,25 @@
+<h1>Bilder</h1>
+
+<p>Die Bilder sind durch eine PIN gesichert. Falls ihr die PIN nicht kennt, fragt bitte bei den Oberminis.</p>
+
+<h2>Bilder von 2023</h2>
+
+<div class="bilder-container" id="bilder2023">
+    <a href="#">2023 Sternsingeraktion</a>
+    <a href="#">2023 Faschingsfeier</a>
+    <a href="#">2023 Mini-Aufnahme</a>
+    <a href="#">2023 Sommerausflug</a>
+    <a href="#">2023 Herbstwochenende</a>
+</div>
+
+<h2>Bilder von 2022</h2>
+
+<div class="bilder-container" id="bilder2022">
+    <a href="#">2022 Mini-Aufnahme</a>
+    <a href="#">2022 Sommerausflug</a>
+    <a href="#">2022 Herbstschau-Umzug</a>
+    <a href="#">2022 Herbstwochenende</a>
+    <a href="#">2022 Videonacht</a>
+    <a href="#">2022 Christmette</a>
+    <a href="#">2022 Weihnachtsfeier</a>
+</div>

src/style/_bilder.scss

@@ -0,0 +1,21 @@
+.bilder-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    a {
+        width: 100%;
+        background-color: #eebc63;
+        text-decoration: none;
+        color: unset;
+        margin-bottom: 0.5em;
+        text-align: center;
+        padding-top: 0.75em;
+        padding-bottom: 0.75em;
+        border-radius: 0.25em;
+        @include geologica-font(normal, 600);
+        &:nth-of-type(2n) {
+            background-color: #6395ee;
+        }
+    }
+    
+}

src/style/main.css

@@ -276,4 +276,28 @@ main {
   font-style: normal;
   font-weight: 600;
   font-variation-settings: "SHRP" 50;
+}
+
+.bilder-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+.bilder-container a {
+  width: 100%;
+  background-color: #eebc63;
+  text-decoration: none;
+  color: unset;
+  margin-bottom: 0.5em;
+  text-align: center;
+  padding-top: 0.75em;
+  padding-bottom: 0.75em;
+  border-radius: 0.25em;
+  font-family: "geologica";
+  font-style: normal;
+  font-weight: 600;
+  font-variation-settings: "SHRP" 50;
+}
+.bilder-container a:nth-of-type(2n) {
+  background-color: #6395ee;
 }/*# sourceMappingURL=main.css.map */

src/style/main.scss

@@ -38,3 +38,4 @@ main {
 
 @import "termine";
 
+@import "bilder";