makes video page work

pages/ausbildung/index.php

@@ -1,15 +1,13 @@
 <h1>Ausbildungs-Videos</h1>
 
-<p><strong style="color: red">Zum Ansehen der Bilder wirst du zu einem externen Anbieter (web.de) weitergeleitet.</strong> <a href="https://web.de/datenschutz/" target="_BLANK">Datenschutzerklärung für web.de</a></p>
+<!-- <p><strong style="color: red">Zum Ansehen der Bilder wirst du zu einem externen Anbieter (web.de) weitergeleitet.</strong> <a href="https://web.de/datenschutz/" target="_BLANK">Datenschutzerklärung für web.de</a></p>
 
-<p>Die Bilder sind durch eine PIN gesichert. Falls ihr die PIN nicht kennt, fragt bitte bei den Oberminis.</p>
+<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="/pages/ausbildung/videos/Abräumen.mp4">Abräumen</a>
-    <a href="#">2023 Faschingsfeier</a>
-    <a href="#">2023 Mini-Aufnahme</a>
-    <a href="#">2023 Sommerausflug</a>
-    <a href="#">2023 Herbstwochenende</a>
+<div class="videos-container" id="videos-ausbildung">
+    <a href="/pages/ausbildung/videos/Abräumen.mp4" target="_BLANK">Abräumen</a>
+    <a href="/pages/ausbildung/videos/Evangeliumsprozession.mp4" target="_BLANK">Evangeliumsprozession</a>
+    <a href="/pages/ausbildung/videos/Flambo.mp4" target="_BLANK">Flambeaux</a>
+    <a href="/pages/ausbildung/videos/Gabenbereitung.mp4" target="_BLANK">Gabenbereitung</a>
+    <a href="/pages/ausbildung/videos/Sammeln.mp4" target="_BLANK">Sammeln</a>
 </div>

src/style/_videos.scss

@@ -0,0 +1,21 @@
+.videos-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

@@ -360,4 +360,28 @@ main {
 }
 .bilder-container a:nth-of-type(2n) {
   background-color: #6395ee;
+}
+
+.videos-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+.videos-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;
+}
+.videos-container a:nth-of-type(2n) {
+  background-color: #6395ee;
 }/*# sourceMappingURL=main.css.map */

src/style/main.scss

@@ -39,3 +39,5 @@ main {
 @import "termine";
 
 @import "bilder";
+
+@import "videos";