From c25291defc59174b5f6d2caec37170ed362c5eaa Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Sat, 11 Nov 2023 22:20:32 +0100
Subject: [PATCH] layout 10

---
 website/theme/templates/index.html | 181 +++++++++++++++--------------
 1 file changed, 95 insertions(+), 86 deletions(-)

diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index ecf2ee0..05d7c03 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -8,7 +8,7 @@
 <div class="splashContent">
 
     <div class="w-100 mw9-ns center-ns h3">
-      <h1 class="f4 ma0 pt3 ml3">
+      <h1 class="f4 ma0 pt3 ml3 ml5-l">
         <span class="fw4">offen.</span><span class="fw7">software</span>
       </h1>
     </div>
@@ -43,13 +43,13 @@
     </div>
   </div>
 
-  <div class="mw7 center mv5 ph3 ph0-ns">
+  <div class="mw7 center mv5 ph3 ph0-l">
 
     <p class="ma0 mb4 ml6-l">
-      The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-ns">facilitate change for the better.</span>
+      The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-l">facilitate change for the better.</span>
     </p>
     <p class="ma0 mr4 mr6-l">
-      We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-ns">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
+      We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-l">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
     </p>
 
   </div>
@@ -60,16 +60,16 @@
     </div>
   </div>
 
-  <div class="mw7 center mt5 ph3 ph0-ns">
+  <div class="mw7 center mt5 ph3 ph0-l">
 
     <p class="ma0 mb4  ml6-l">
-      <span class="fw7 f4 f2-ns">Located in Berlin</span>, 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.
+      <span class="fw7 f4 f2-l">Located in Berlin</span>, 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.
     </p>
     <p class="ma0 mb4 mr6-l">
-      <span class="fw7 f4 f2-ns">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
+      <span class="fw7 f4 f2-l">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
     </p>
     <p class="ma0 ml6-l">
-      Our clients value <span class="fw7 f4 f2-ns">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
+      Our clients value <span class="fw7 f4 f2-l">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
     </p>
     <div class="flex justify-center pv5">
       <a class="link dim br1 f5 fw7 ttu tc trackedExtraWide h3 w5 buttonPadding colorWhite bgColorWine" href="###" rel="noopener">Work with us</a>
@@ -87,82 +87,89 @@
 
     <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
 
-    <div class="flex flex-column-l flex-wrap justify-center">
-      <div class="wExtra32 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
-        <p class="fw7 f4 f2-l ma0 mb3">
-          We offer
-        </p>
-        <p class="ma0 mb2">
-          Web Application and website development
-        </p>
-        <p class="ma0 mb2">
-          Independent infrastructure solutions
-        </p>
-        <p class="ma0">
-          Support and guidance with self hosting
-        </p>
-      </div>
+    <div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
+        <div class="wExtra32 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
+          <div class="mw6-m center-m">
+            <p class="fw7 f4 f2-l ma0 mb3">
+              We offer
+            </p>
+            <p class="ma0 mb2">
+              Web Application and website development
+            </p>
+            <p class="ma0 mb2">
+              Independent infrastructure solutions
+            </p>
+            <p class="ma0">
+              Support and guidance with self hosting
+            </p>
+          </div>
+        </div>
       <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l">
     </div>
 
     <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
 
     <div class="wExtra24 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
-      <p class="fw7 f4 f2-l ma0 mb3">
-        We created
-      </p>
-      <p class="ma0 mb2">
-        Offen Fair Web Analytics
-      </p>
-      <p class="ma0 mb2">
-        analytics.txt
-      </p>
-      <p class="ma0">
-        docker-volume-backup
-      </p>
+      <div class="mw6-m center-m">
+        <p class="fw7 f4 f2-l ma0 mb3">
+          We created
+        </p>
+        <p class="ma0 mb2">
+          Offen Fair Web Analytics
+        </p>
+        <p class="ma0 mb2">
+          analytics.txt
+        </p>
+        <p class="ma0">
+          docker-volume-backup
+        </p>
+      </div>
     </div>
 
     <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
 
     <div class="wExtra24 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
-      <p class="fw7 f4 f2-l ma0 mb3">
-        We worked with
-      </p>
-      <p class="ma0 mb2">
-        NLNet
-      </p>
-      <p class="ma0 mb2">
-        RBB
-      </p>
-      <p class="ma0 mb2">
-        Ecosia
-      </p>
-      <p class="ma0">
-        Wikimedia
-      </p>
+      <div class="mw6-m center-m">
+        <p class="fw7 f4 f2-l ma0 mb3">
+          We worked with
+        </p>
+        <p class="ma0 mb2">
+          NLNet
+        </p>
+        <p class="ma0 mb2">
+          RBB
+        </p>
+        <p class="ma0 mb2">
+          Ecosia
+        </p>
+        <p class="ma0">
+          Wikimedia
+        </p>
+      </div>
     </div>
 
     <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
-
     <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
 
-    <div class="flex flex-column-l flex-wrap justify-center">
+    <div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
       <div class="wExtra32 hExtra20 colorWhite bgColorOrange ph3 pv4 pa4-l">
-        <p class="fw7 f4 f2-l ma0 mb3">
-          We are
-        </p>
-        <p class="ma0 mb2">
-          Frederik Ring, interested in
-        </p>
-        <p class="ma0 mb2">
-          Minimal Kubernetes distributions
-        </p>
-        <p class="ma0 mb2">
-          Open Source Tomato Seeds
-        </p>
-        <p class="ma0">
-          Psychological aspects of Software Development
-        </p>
+        <div class="mw6-m center-m">
+          <p class="fw7 f4 f2-l ma0 mb3">
+            We are
+          </p>
+          <p class="ma0 mb2">
+            Frederik Ring, interested in
+          </p>
+          <p class="ma0 mb2">
+            Minimal Kubernetes distributions
+          </p>
+          <p class="ma0 mb2">
+            Open Source Tomato Seeds
+          </p>
+          <p class="ma0">
+            Psychological aspects of Software Development
+          </p>
+        </div>
       </div>
       <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
     </div>
@@ -170,21 +177,23 @@
     <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
 
     <div class="wExtra32 hExtra20 colorWhite bgColorOrange ph3 pv4 pa4-l">
-      <p class="fw7 f4 f2-l ma0 mb3">
-        And we are
-      </p>
-      <p class="ma0 mb2">
-        Hendrik Niefeld, interested in
-      </p>
-      <p class="ma0 mb2">
-        Make things look good
-      </p>
-      <p class="ma0 mb2">
-        Literal present tense in Korean
-      </p>
-      <p class="ma0">
-        Generative systems
-      </p>
+      <div class="mw6-m center-m">
+        <p class="fw7 f4 f2-l ma0 mb3">
+          And we are
+        </p>
+        <p class="ma0 mb2">
+          Hendrik Niefeld, interested in
+        </p>
+        <p class="ma0 mb2">
+          Make things look good
+        </p>
+        <p class="ma0 mb2">
+          Literal present tense in Korean
+        </p>
+        <p class="ma0">
+          Generative systems
+        </p>
+      </div>
     </div>
 
     <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
@@ -195,9 +204,9 @@
 
 <!-- FOOTER -->
 
-<div class="w-100 colorWine bgColorOrange pt5 pb6 ph3 ph5-ns">
+<div class="w-100 colorWine bgColorOrange">
 
-  <div class="flex flex-wrap justify-between">
+  <div class="w-100 mw9-ns center-ns flex flex-wrap justify-between pt5 pb6 ph3 ph5-l">
 
     <div class="w-100 h3">
       <h1 class="f2 ma0">
@@ -218,10 +227,10 @@
     </div>
 
     <div class="w-100 w-50-ns">
-      <p class="ma0 mb2 tl tr-l">
+      <p class="ma0 mb2 tl tr-ns">
         Source code for this website
       </p>
-      <p class="fw7 ma0 tl tr-l">
+      <p class="fw7 ma0 tl tr-ns">
         Work with us
       </p>
     </div>