From 03ca923a6aba15078c24156b2c35ceb35d2c997f Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Fri, 10 Nov 2023 10:08:24 +0100
Subject: [PATCH] layout 4

---
 website/theme/static/css/styles.css | 21 ++++++-----
 website/theme/templates/base.html   |  4 +--
 website/theme/templates/index.html  | 55 +++++++++++++++++++++--------
 3 files changed, 53 insertions(+), 27 deletions(-)
diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index e4b2bac..b15b7fc 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -1,6 +1,9 @@
 /* ---------------------------------------------------
 COLORS
 ----------------------------------------------------*/
+.colorBrown {
+  color: #4B1202;
+}
 .colorSalmon {
   color: #F5BEA7;
 }
@@ -13,20 +16,20 @@ COLORS
 .bgColorOrange {
   background-color: #E9500A;
 }
+.bgColorWhite {
+  background-color: #FAFEFF;
+}
 
 /* ---------------------------------------------------
 LAYOUT
 ----------------------------------------------------*/
-.mainContainer {
-  min-height:2000px;
+.splashContent {
+  min-height: 100vh;
 }
-.mainContent {
-  min-height:900px;
-}
-.mainCta {
-  position:-webkit-sticky;
-  position:sticky;
-  bottom:0;
+.splashCta {
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 0;
 }
 .paddingExtra {
   padding-left: 0;
diff --git a/website/theme/templates/base.html b/website/theme/templates/base.html
index a7b6874..db34442 100644
--- a/website/theme/templates/base.html
+++ b/website/theme/templates/base.html
@@ -34,9 +34,7 @@
 <body class="poppins f4 f2-ns trackedWide lh-title no-js colorSalmon bgColorWine">
 
   <main class="w-100">
-    <div class="mw7 center">
-      {% block content %}{% endblock %}
-    </div>
+    {% block content %}{% endblock %}
   </main>
 
   <script>
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index a222d1b..ecb66d9 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -2,28 +2,53 @@
 {% set index = True %}
 
 {% block content %}
-<div class="mainContainer">
-  <div class="mainContent">
-    <div class="pt3 paddingExtra">
-      <h1 class="f4 trackedWide ma0 mb3">
+
+<!-- HEADER -->
+
+<div class="splashContent">
+
+    <div class="w-100 pt3 ph3">
+      <h1 class="f4 ma0 mb3">
         <span class="fw4">offen.</span><span class="fw7">software</span>
       </h1>
     </div>
-    <div class="w-100">
-      <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="432" class="db imageCrop">
+
+    <div class="w-100 bgColorOrange">
+      <div class="mw7 center">
+        <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="432" class="db imageCrop">
+      </div>
     </div>
-    <div class="paddingExtra">
-      <p class="trackedWide ma0 mt3">
+
+    <div class="mw7 center paddingExtra">
+      <p class="ma0 mt3">
         <span class="fw4">We </span><span class="fw7">think up, create and ship </span><span class="fw4">software for organisations and individuals who embrace </span><span class="fw7">societal change.</span>
       </p>
     </div>
-  </div>
-  <div class="mainCta">
-    <div class="w-100">
-      <div class="flex justify-center pb4">
-        <a class="link dim br1 f5 fw7 ttu trackedExtraWide dib buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a>
-      </div>
-    </div>
+
+</div>
+
+<div class="splashCta bgColorWine">
+  <div class="flex justify-center pv4">
+    <a class="link dim br1 f5 fw7 ttu tc trackedExtraWide buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a>
   </div>
 </div>
+
+<!-- FOLD -->
+<div class="w-100 colorBrown bgColorOrange">
+  <div class="mw7 center paddingExtra">
+    <h2 class="f4 fw7 ma0 pt5 mt5 mb3">
+      Humane computer programs
+    </h2>
+    <p class="f4 ma0">
+      The world is in flux, and it’s a unique opportunity to facilitate change for the better. We want to enable the makers that are driving this change by providing them with independent, fair and tailor made software that meet the highest standards when it comes to transparency, integrity and privacy. We think of these as humane computer programs.
+    </p>
+    <h2 class="f4 fw7 ma0 mt5 mb3">
+      Simple, resilient and accessible
+    </h2>
+    <p class="f4 ma0">
+      Located in Berlin, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live. Working fully open source allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge. Our clients value simple, resilient and accessible tools that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
+    </p>
+  </div>
+</div>
+
 {% endblock %}
