assets/css/style.css

@@ -404,6 +404,13 @@ header {
     font-size: 2rem;
 }
 
+/*
+ * TODO: Bullets positionieren
+ *
+ * list-style: none; dann Bullets als Grafiken vom text in <li> einfügen.
+ * Für das Icon dann position: relative; und ausrichten.
+ * Quelle: https://codepen.io/team/css-tricks/pen/MyxBrQ
+ */
 .header__claim ul li {
     margin: 0;
     list-style: none;
@@ -672,6 +679,11 @@ hr.-even {
     text-align: center;
 }
 
+, {
+    display: block;
+    margin: 0 auto 0 auto;
+}
+
 .content__teaser {
     color: var(--wtf-orange);
     font-size: 1.15rem;
@@ -685,11 +697,6 @@ hr.-even {
     width: 100%;
 }
 
-.content__video {
-    width: 100%;
-    aspect-ratio: 16/9;
-}
-
 /* Contact form on homepage - start */
 .contact__box {
     display: grid;
@@ -1258,35 +1265,6 @@ footer {
         margin-top: 0;
         padding-top: 0;
     }
-
-    .contact__box {
-        display: flex !important;
-        flex-direction: column;
-    }
-
-    .contact__box h1 {
-        transform: translateX(0) rotate(0);
-        color: var(--wtf-orange);
-        background-image: none;
-        font-size: 7.5rem;
-        margin: 0 0 0 1.5rem;
-        order: 1;
-    }
-
-    .contact__box .contact_info__box {
-        margin: 0.5rem 0 0 1.5rem;
-        align-self: start;
-        order: 3;
-        width: 100%;
-        max-width: 75ch;
-
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .contact__box .contact_form_box {
-        order: 2;
-    }
 }
 
 @media screen and (max-width: 959px) and (min-width: 790px) {
@@ -1342,32 +1320,36 @@ footer {
     }
 
     .contact__box {
-        display: flex !important;
+        display: block;
-        flex-direction: column;
     }
 
     .contact__box h1 {
-        transform: translateX(0) rotate(0);
         color: var(--wtf-orange);
-        background-image: none;
+        transform: unset;
-        font-size: 7.5rem;
+        background-image: unset;
-        margin: 0 0 0 1.5rem;
+        font-size: 3.5rem;
-        order: 1;
+        padding: 0 1.5rem;
+        margin-bottom: 1.25rem;
+    }
+
+    .contact__box h2 {
+        margin-bottom: 1.75rem;
     }
 
     .contact__box .contact_info__box {
-        margin: 0.5rem 0 0 1.5rem;
+        width: 100%;
-        align-self: start;
+        margin: 0;
-        order: 3;
+        padding: 0 1.5rem;
-        width: 90%;
-        max-width: 75ch;
-
         display: flex;
-        justify-content: space-between;
+        box-sizing: border-box;
     }
 
-    .contact__box .contact_form_box {
+    .contact__box .contact_info__box p {
-        order: 2;
+        margin-right: 1.5rem;
+    }
+
+    .card_grid {
+        grid-template-columns: 1fr;
     }
 }
 
@@ -1530,7 +1512,7 @@ footer {
     .header__claim p {
         margin: 0;
         padding: 1.5rem;
-        color: var(--wtf-nearly-black);
+        color: var(--wtf-nearly-white);
     }
 
     .header__claim ul {
@@ -1604,32 +1586,32 @@ footer {
     }
 
     .contact__box {
-        display: flex !important;
+        display: block;
-        flex-direction: column;
     }
 
     .contact__box h1 {
-        transform: translateX(0) rotate(0);
         color: var(--wtf-orange);
-        background-image: none;
+        transform: unset;
-        font-size: 7.5rem;
+        background-image: unset;
-        margin: 0 0 0 1.5rem;
+        font-size: 3.5rem;
-        order: 1;
+        padding: 0 1.5rem;
+        margin-bottom: 1.25rem;
+    }
+
+    .contact__box h2 {
+        margin-bottom: 1.75rem;
     }
 
     .contact__box .contact_info__box {
-        margin: 0.5rem 0 0 1.5rem;
+        width: 100%;
-        align-self: start;
+        margin: 0;
-        order: 3;
+        padding: 0 1.5rem;
-        width: 90%;
-        max-width: 75ch;
-
         display: flex;
-        justify-content: space-between;
+        box-sizing: border-box;
     }
 
-    .contact__box .contact_form_box {
+    .contact__box .contact_info__box p {
-        order: 2;
+        margin-right: 1.5rem;
     }
     /* homepage - end */
 
@@ -1750,7 +1732,7 @@ footer {
     .header__claim p {
         margin: 0;
         padding: 1.5rem;
-        color: var(--wtf-nearly-black);
+        color: var(--wtf-nearly-white);
     }
 
     .header__claim ul {
@@ -1913,38 +1895,24 @@ footer {
         display: block;
     }
 
-    .contact__box {
+    .contact__box h1 {
-        display: flex !important;
+        color: var(--wtf-orange);
-        flex-direction: column;
+        transform: unset;
+        background-image: unset;
+        font-size: 3.5rem;
+        padding: 0 1.5rem;
+        margin-bottom: 1.25rem;
     }
 
-    .contact__box h1 {
+    .contact__box h2 {
-        transform: translateX(0) rotate(0);
+        margin-bottom: 1.75rem;
-        color: var(--wtf-orange);
-        background-image: none;
-        font-size: 7.5rem;
-        margin: 0 0 0 1.5rem;
-        order: 1;
     }
 
     .contact__box .contact_info__box {
-        margin: 0.5rem 0 0 1.5rem;
+        width: 100%;
-        align-self: start;
+        margin: 0;
-        order: 3;
+        padding: 0 1.5rem;
-        width: 90%;
+        box-sizing: border-box;
-        max-width: 75ch;
-
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-
-    .contact__box .contact_info__box p {
-        margin-right: 0.5rem;
-    }
-
-    .contact__box .contact_form_box {
-        order: 2;
     }
     /* homepage - end */
 

content/aktuelles/contents+en.lr

@@ -5,7 +5,7 @@ title: Regular meetings
 body:
 
 ### Telebeer
-Casual round for everyone inside and outside WTF: Every Wednesday at 9 pm in the [Telebeer-Jitsi](https://meet.wtf-eg.de/telebier).
+Casual round for everyone inside and outside WTF: Every Wednesday at 9 pm in the [Telebeer-Jitsi](meet.wtf-eg.de/telebier).
 
 #### Onboarding of new members
 Next dates until October 2023:

content/aktuelles/contents.lr

@@ -7,7 +7,7 @@ body:
 ### Telebier
 <!-- Bei Änderungen: Übersetzung anpassen! Kopie der Inhalte auf "Mitglied werden" anpassen!-->
 
-Lockere Runde für alle inner- und außerhalb der WTF: Jeden Mittwoch um 21 Uhr im [Telebier-Jitsi](https://meet.wtf-eg.de/telebier).
+Lockere Runde für alle inner- und außerhalb der WTF: Jeden Mittwoch um 21 Uhr im [Telebier-Jitsi](meet.wtf-eg.de/telebier).
 
 #### Aufnahmetreffen für neue Member
 

templates/about_page.html

@@ -31,8 +31,8 @@
         </div>
       </div>
 
-  <div class="contact__box" style="display: none">
+  <div class="contact__box" style="display:none">
-    <h1>{{ this.contact_form_heading }}</h1>
+    <h1>{{ this.contact_form_headig }}</h1>
 
       <div class="contact_info__box">
       <p>

templates/homepage.html

@@ -21,15 +21,11 @@
         <h2>Videos</h2>
         <h3>What the f**ck is WTF eg?</h3>
         <h4>Was sind Genossenschaften und was können wir Cooles damit machen.</h4>
-        <p>
+        Vortrag von unserem Mitglied <i>Scammo</i> auf der <i>Night of open Knowledge (NooK) 2022</i>.
-          Vortrag von unserem Mitglied <i>Scammo</i> auf der <i>Night of open Knowledge (NooK) 2022</i>
+        <iframe width="1024" height="576" src="https://media.ccc.de/v/what-the-f--k-is-wtf-eg/oembed" frameborder="0" allowfullscreen></iframe>
-        </p>
-        <iframe class="content__video" src="https://media.ccc.de/v/what-the-f--k-is-wtf-eg/oembed" frameborder="0" allowfullscreen></iframe>
         <h3>Wirtschaft neu gedacht - die WTF Kooperative eG</h3>
-        <p>
         Vortrag von unserem damaligen Vorstand <i>MrSchizo</i> auf der <i>remote Chaos Experience (RC3) 2023</i>.
-        </p>
+        <iframe width="1024" height="576" src="https://media.ccc.de/v/rc3-2021-r3s-432-wirtschaft-neu-gedacht-die-wtf-kooperative-eg/oembed" frameborder="0" allowfullscreen></iframe>
-        <iframe class="content__video" src="https://media.ccc.de/v/rc3-2021-r3s-432-wirtschaft-neu-gedacht-die-wtf-kooperative-eg/oembed" frameborder="0" allowfullscreen></iframe>
         </div>
       </div>
   </div>