From e3a7afe42b898f48b4a0cd27d58c4033e0efe93f Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Tue, 16 Mar 2021 18:27:36 +0100
Subject: [PATCH] WIP: Styled about page according to topio.

---
 assets/css/style.css    | 19 +++++++++------
 templates/homepage.html | 18 +++++++-------
 templates/page.html     | 54 ++++++++++++++++++++++++++++++++---------
 3 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 108af39f..85a1d4bc 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -635,10 +635,13 @@ hr.-even {
     color: var(--wtf-nearly-white);
     font-family: 'Lato';
     font-size: 1.3rem;
-    text-align:center;
     margin: 1rem 0;
 }
 
+.card__heading.-homepage {
+    text-align: center;
+}
+
 .card__text {
     text-align: center;
 }
@@ -740,10 +743,12 @@ hr.-even {
     margin-bottom: 1.5rem;
 }
 
-.content__box.-card_box {
+.content__box.-card_box.-homepage {
     margin-top: -7rem;
     padding-top: 7rem;
+}
 
+.content__box.-card_box {
     /*
      * Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#729baf+0,8ea8a9+100
      *
@@ -998,7 +1003,7 @@ footer {
         margin: 1.5rem 0 -1.5rem 1.5rem;
     }
 
-    .content__box.-card_box {
+    .content__box.-card_box.-homepage {
         margin-top: 0;
         padding-top: 0;
     }
@@ -1068,7 +1073,7 @@ footer {
         margin: 1.5rem 0 -1.5rem 1.5rem;
     }
 
-    .content__box.-card_box {
+    .content__box.-card_box.-homepage {
         margin-top: 0;
         padding-top: 0;
     }
@@ -1119,7 +1124,7 @@ footer {
         margin: 1.5rem 0 -1.5rem 1.5rem;
     }
 
-    .content__box.-card_box {
+    .content__box.-card_box.-homepage {
         margin-top: 0;
         padding-top: 0;
     }
@@ -1266,7 +1271,7 @@ footer {
         margin: 1.5rem 0 -1.5rem 1.5rem;
     }
 
-    .content__box.-card_box {
+    .content__box.-card_box.-homepage {
         margin-top: 0;
         padding-top: 0;
     }
@@ -1481,7 +1486,7 @@ footer {
         margin: 1.5rem 0 -1.5rem 1.5rem;
     }
 
-    .content__box.-card_box {
+    .content__box.-card_box.-homepage {
         margin-top: 0;
         padding-top: 0;
     }
diff --git a/templates/homepage.html b/templates/homepage.html
index 896c27a5..56f1eadf 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -133,53 +133,53 @@
             </div>
         </div>
 
-        <div class="content__box -card_box">
+        <div class="content__box -card_box -homepage">
             <div class="content__inner_box -card_box">
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_building.svg">
-                    <h3 class="card__heading">Genossenschaftlich solidarisch</h3>
+                    <h3 class="card__heading -homepage">Genossenschaftlich solidarisch</h3>
                     <p class="card__text">Eine Hackergemeinschaft ist aeine Aufstellung, die im Markt allerhand bewegen kann.</p>
                 </div>
 
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_institution.svg">
-                    <h3 class="card__heading">Genossenschaftlich stark</h3>
+                    <h3 class="card__heading -homepage">Genossenschaftlich stark</h3>
                     <p class="card__text">Was eine/r allein nicht kann, das schaffen viele zusammen. Sowohl intellektuell, finanziell und in rechtsscierer, wirtschaftlich stabiler Umgebung.</p>
                 </div>
 
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_briefcase.svg">
-                    <h3 class="card__heading">Auf eigene Rechnung oder angestellt</h3>
+                    <h3 class="card__heading -homepage">Auf eigene Rechnung oder angestellt</h3>
                     <p class="card__text">Mach Deine Genossenschaft zu deinem Arbeitgeber in dem Du Dich bei der Genossenschaft anstellen lässt.</p>
                 </div>
 
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_fist.svg">
-                    <h3 class="card__heading">Helfen und lernen</h3>
+                    <h3 class="card__heading -homepage">Helfen und lernen</h3>
                     <p class="card__text">Profitiere von Know-How und Erfahrungsaustausch in der Genossenschaft.</p>
                 </div>
 
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_clippy.svg">
-                    <h3 class="card__heading">Die eigene Arbeit managen und abrechnen lassen</h3>
+                    <h3 class="card__heading -homepage">Die eigene Arbeit managen und abrechnen lassen</h3>
                     <p class="card__text">Rechnungen schreiben? Gewerbeanmeldung? Mehraufwand für Buchführung und Steuererklärung? Spare Dir den Aufand, lass' das deine Genossenschaft machen!</p>
                 </div>
 
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_group.svg">
-                    <h3 class="card__heading">Virtuelle Teams, großartige Jobs</h3>
+                    <h3 class="card__heading -homepage">Virtuelle Teams, großartige Jobs</h3>
                     <p class="card__text">Viele von uns arbeiten freiberuflich. Von überall her, überall hin, flexibel und freundlich, klein und häufig allein. An manche, interesanten Aufgaben und Kunden kommt man als Einzelkämpfer nicht ran. An öffentliche Aufträge schon gar nicht.</p>
                 </div>
 
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_dragon.svg">
-                    <h3 class="card__heading">Langfristige Träume verwirklichen</h3>
+                    <h3 class="card__heading -homepage">Langfristige Träume verwirklichen</h3>
                     <p class="card__text">Ein Wohnungsprojekt, einen Altersruhesitz für Haecksen und Hacker einrichten, Geld zurücklegen, Förderung beantragen …</p>
                 </div>
 
                 <div class="card">
                     <img class="card__icon" src="images/circle_icon_fist.svg">
-                    <h3 class="card__heading">Helfen und Lernen</h3>
+                    <h3 class="card__heading -homepage">Helfen und Lernen</h3>
                     <p class="card__text">Profitiere von Know-How und Erfahrungsaustausch in der Genossenschaft. DIESER TEXT IST DOPPELT</p>
                 </div>
 
diff --git a/templates/page.html b/templates/page.html
index eda52215..a28f95cf 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -8,16 +8,46 @@
   {%- endif -%}
 {%- endblock -%}
 {% block body %}
-	<div class="content__box">
-		<div class="content__inner_box">
-			<h1>{{ this.title }}</h1>
-		</div>
-	</div>
-	<section class="content -odd -columns">
-		<div class="content__box">
-			<div class="content__inner_box">
-				{{ this.body }}
-			</div>
-		</div>
-	</section>
+     <!-- 50/50 Layout - start -->
+    <section class="content">
+        <div class="content__box -heading">
+            <div class="content__inner_box">
+                <h2>{{ this.title }}</h2>
+            </div>
+        </div>
+        <div class="content__half_box">
+            <div class="content__inner_half_box">
+                <div class="content__teaser">
+                    {{ this.teaser }}
+                </div>
+                <div class="content__body">
+                    {{ this.body }}
+                </div>
+            </div>
+            {% if this.attachments.images %}
+                <div class="content__inner_half_box">
+                    {% for image in this.attachments.images %}
+                        <img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ image.description }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    </section>
+    <!-- 50/50 Layout - end -->
+
+    <!-- Icon boxes - start -->
+    <section class="content">
+        <div class="content__box -card_box">
+            <div class="content__inner_box -card_box">
+                {% for block in this.section.blocks %}
+                    <div class="card">
+                        <h3 class="card__heading">{{ block.title }}</h3>
+                        <!-- <p class="card__text">Eine Hackergemeinschaft ist aeine Aufstellung, die im Markt allerhand bewegen kann.</p> -->
+                        {{ block.body }}
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+
 {% endblock %}