static html: homepage 1st section

To be converted to proper template.

assets/css/style.css

@@ -141,8 +141,8 @@ body {
 }
 
 /*
- * Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch Sub-
+ * Gleicht zusammen mit padding von .primary_nav__navitem die Verschiebung durch
- * menümarker aus.
+ * Submenümarker aus.
  */
 .primary_nav__navitem .primary_nav__navlink {
     display: inline-block;
@@ -485,7 +485,7 @@ h6 {
 }
 
 p {
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
 }
 
 ul {
@@ -545,11 +545,38 @@ hr.-even {
     color: var(--wtf-mid-grey) !important;
 }
 
-.content__box {
+.content__box, .content__half_box {
     margin: 0 auto;
     padding: 0;
 }
 
+.content__half_box {
+    display: flex;
+    flex-direction: row;
+}
+
+.content__inner_half_box {
+    width: 50%;
+}
+
+.content__teaser {
+    color: var(--wtf-orange);
+    font-size: 1.15rem;
+}
+
+.content__footer {
+    text-align: right;
+}
+
+.content__inline_image {
+    height: 1.25rem;
+    vertical-align: middle;
+}
+
+.content__half_box_image {
+    width: 100%;
+}
+
 .content__box p, .content__box li {
     hyphens: auto;
 }
@@ -574,7 +601,7 @@ hr.-even {
     margin: 3.5rem 1.5rem 0 1.5rem;
 }
 
-.content__inner_box {
+.content__inner_box, .content__inner_half_box {
     margin: -0.5rem 1.5rem 0 1.5rem;
 }
 
@@ -591,7 +618,11 @@ hr.-even {
 
 }
 
-.nav__wrapper, .header__wrapper, .content__box, .footer__wrapper {
+.nav__wrapper,
+.header__wrapper,
+.content__box,
+.content__half_box,
+.footer__wrapper {
     width: 100%;
     max-width: 1200px;
     orphans: 3;
@@ -952,6 +983,23 @@ footer {
     .content__inner_box.-logo_header {
         margin: -0.5rem 1.5rem 0 1.5rem;
     }
+
+    /* homepage - start */
+    .content__box.-heading {
+        margin-bottom: 1rem;
+    }
+
+    .content__half_box {
+        flex-direction: column;
+        padding: 0;
+        width: auto;
+    }
+
+    .content__inner_half_box {
+        width: auto;
+        margin: 0 1.5rem;
+    }
+    /* homepage - end */
 }
 
 @media screen and (max-width: 595px) {
@@ -1119,7 +1167,24 @@ footer {
     }
     /* mobile nav - Ende */
 
+    /* homepage - start */
     .content__inner_box.-logo_header {
         margin: -0.5rem 1.5rem 0 1.5rem;
     }
+
+    .content__box.-heading {
+        margin-bottom: 1rem;
+    }
+
+    .content__half_box {
+        flex-direction: column;
+        padding: 0;
+        width: auto;
+    }
+
+    .content__inner_half_box {
+        width: auto;
+        margin: 0 1.5rem;
+    }
+    /* homepage - end */
 }

templates/homepage.html

@@ -8,11 +8,46 @@
   {%- endif -%}
 {%- endblock -%}
 {% block body %}
-    <div class="content__box">
+
-        <div class="content__inner_box -logo_header">
+    <!-- 50/50 Layout - start -->
-            <h1>{{ this.title }}</h1>
+    <section class="content">
+        <div class="content__box -heading">
+            <div class="content__inner_box">
+                <h2>3, 2, 1 - Die WTF eG hebt ab!</h2>
+            </div>
         </div>
-    </div>
+        <div class="content__half_box">
+            <div class="content__inner_half_box">
+                <div class="content__teaser">
+                    <p>Der Start ist geschafft, die WTF Kooperative eG ist gegründet und seit Anfang des Jahres ordentlich beim Registergericht Hamburg eingetragen.</p>
+                </div>
+                <div class="content__body">
+                    <p>Die Idee der„Hackergenossenschaft“ wurde zum ersten Mal auf dem 34C3 vorgestellt. Vom Start weg haben sich über 160 Personen gefunden und dafür gearbeitet, dass die Gründung gelingt.</p>
+                    <p>Ein Unternehmen, dass jedem einzelnen von uns gehört, in dem jeder von uns eine Stimme und das Recht auf Mitsprache hat. Das alles ist nun machbar - in unserer WTF Koopertive eG.</p>
+                </div>
+                <div class="content__footer">
+                    <p>folge uns&emsp;<a href="https://chaos.social/@HackerGeno"><img class="content__inline_image" src="images/mastodon_logo.svg" alt="Mastodon Logo" height="16"></a></p>
+                </div>
+            </div>
+            {% if this.attachments.images %}
+                <div class="content__inner_half_box">
+                    {% for image in this.attachments.images %}
+                        <!--
+                        Wir laden Bilder mit hoher Auflösung hoch. Lektor baut "Thumbnails" mit halber
+                        Auflösung. Per srcset bieten wir beides an und der Browser sucht das Richtige
+                        raus.
+
+                        Versteht der Browser srcset nicht, greift src.
+
+                        Wichtig: Keine Angaben für width und height berechnen, dann geht beim Skalieren das Seitenverhältnis kaputt.
+                        -->
+                        <img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </section>
+    <!-- 50/50 Layout - end -->
 
     {% for blk in this.section.blocks %}
         <section class="content {{ loop.cycle('-odd', '-even') }}">