From e558e29e21ed270634f9ea30958fc2aaea211d23 Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Sat, 11 Nov 2023 21:21:12 +0100
Subject: [PATCH] layout 9

---
 website/theme/static/css/styles.css           |  21 +++
 website/theme/static/images/gfx-content-3.svg |  20 +++
 website/theme/static/images/gfx-detail-1.svg  |  10 ++
 website/theme/static/images/gfx-detail-2.svg  |  11 ++
 website/theme/templates/index.html            | 148 ++++++++++--------
 5 files changed, 143 insertions(+), 67 deletions(-)
 create mode 100644 website/theme/static/images/gfx-content-3.svg
 create mode 100644 website/theme/static/images/gfx-detail-1.svg
 create mode 100644 website/theme/static/images/gfx-detail-2.svg

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index 181fb54..16b5f71 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -53,6 +53,27 @@ LAYOUT
 .gapExtra {
   grid-gap: 1rem;
 }
+/* ---------------------------------------------------
+SPACING
+----------------------------------------------------*/
+.hExtra20 {
+  height: 20rem;
+}
+.wExtra24 {
+  width: 24rem;
+}
+.wExtra32 {
+  width: 32rem;
+}
+@media only screen and (max-width: 60rem) {
+  .hExtra20 {
+    height: auto;
+  }
+  .wExtra24,
+  .wExtra32 {
+    width: 100%;
+  }
+}
 
 /* ---------------------------------------------------
 TYPOGRAPHY
diff --git a/website/theme/static/images/gfx-content-3.svg b/website/theme/static/images/gfx-content-3.svg
new file mode 100644
index 0000000..1cca19b
--- /dev/null
+++ b/website/theme/static/images/gfx-content-3.svg
@@ -0,0 +1,20 @@
+<svg width="768" height="128" viewBox="0 0 768 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_90_2)">
+<rect x="320" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
+<rect x="512" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
+<rect y="64" width="64" height="64" rx="2" fill="#4B1202"/>
+<circle cx="96" cy="32" r="32" fill="#4B1202"/>
+<circle cx="224" cy="32" r="32" fill="#4B1202"/>
+<circle cx="288" cy="32" r="32" fill="#4B1202"/>
+<circle cx="416" cy="32" r="32" fill="#4B1202"/>
+<circle cx="480" cy="32" r="32" fill="#4B1202"/>
+<circle cx="608" cy="32" r="32" fill="#4B1202"/>
+<circle cx="672" cy="32" r="32" fill="#4B1202"/>
+<circle cx="736" cy="32" r="32" fill="#4B1202"/>
+</g>
+<defs>
+<clipPath id="clip0_90_2">
+<rect width="768" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/website/theme/static/images/gfx-detail-1.svg b/website/theme/static/images/gfx-detail-1.svg
new file mode 100644
index 0000000..4d85bb3
--- /dev/null
+++ b/website/theme/static/images/gfx-detail-1.svg
@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_85_316)">
+<circle cx="32" cy="32" r="32" fill="#E9500A"/>
+</g>
+<defs>
+<clipPath id="clip0_85_316">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/website/theme/static/images/gfx-detail-2.svg b/website/theme/static/images/gfx-detail-2.svg
new file mode 100644
index 0000000..1cf5874
--- /dev/null
+++ b/website/theme/static/images/gfx-detail-2.svg
@@ -0,0 +1,11 @@
+<svg width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_86_327)">
+<circle cx="32" cy="32" r="32" fill="#E9500A"/>
+<circle cx="32" cy="96" r="32" fill="#E9500A"/>
+</g>
+<defs>
+<clipPath id="clip0_86_327">
+<rect width="64" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index 348f70a..ecf2ee0 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -7,7 +7,7 @@
 
 <div class="splashContent">
 
-    <div class="w-100 h3">
+    <div class="w-100 mw9-ns center-ns h3">
       <h1 class="f4 ma0 pt3 ml3">
         <span class="fw4">offen.</span><span class="fw7">software</span>
       </h1>
@@ -15,7 +15,7 @@
 
     <div class="w-100 bgColorOrange">
       <div class="mw7 center">
-        <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448" class="db imageCrop">
+        <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCrop">
       </div>
     </div>
 
@@ -39,16 +39,16 @@
 
   <div class="w-100 bgColorOrange">
     <div class="mw7 center">
-      <img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
+      <img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
     </div>
   </div>
 
   <div class="mw7 center mv5 ph3 ph0-ns">
 
-    <p class="ma0 mb4 ml4 ml6-ns">
+    <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>
     </p>
-    <p class="ma0 mr4 mr6-ns">
+    <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.
     </p>
 
@@ -56,19 +56,19 @@
 
   <div class="w-100 bgColorOrange">
     <div class="mw7 center">
-      <img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
+      <img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
     </div>
   </div>
 
-  <div class="mw7 center mv5 ph3 ph0-ns">
+  <div class="mw7 center mt5 ph3 ph0-ns">
 
-    <p class="ma0 mb4 ml4 ml6-ns">
+    <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.
     </p>
-    <p class="ma0 mb4 mr4 mr6-ns">
+    <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.
     </p>
-    <p class="ma0 ml4 ml6-ns">
+    <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.
     </p>
     <div class="flex justify-center pv5">
@@ -81,30 +81,34 @@
 
 <!-- FOLD 2 -->
 
-<div class="w-100 w-auto-ns pt5 pb6 ph3">
+<div class="w-100 mw9-l center-l mv5-l">
 
-  <div class="flex flex-wrap justify-center gapExtra">
+  <div class="flex flex-wrap justify-center">
 
-    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 f4 f2-ns 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>
+    <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>
+      <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l">
     </div>
 
-    <div class="h3 h-auto-ns w-100 w4-ns bgColorOrange">
-    </div>
+    <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
 
-    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 f4 f2-ns ma0 mb3">
+    <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">
@@ -118,14 +122,10 @@
       </p>
     </div>
 
-    <div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
-    </div>
+    <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
 
-    <div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
-    </div>
-
-    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 f4 f2-ns ma0 mb3">
+    <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">
@@ -142,51 +142,53 @@
       </p>
     </div>
 
-    <div class="h3 h-auto-ns w-100 w4-ns bgColorOrange">
+    <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="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>
+      <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
     </div>
 
-    <div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
-    </div>
+    <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
 
-    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 f4 f2-ns 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 class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
-    </div>
-
-    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
-      <p class="fw7 f4 f2-ns ma0 mb3">
-        We are
+    <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">
-        Generative systems
+        Make things look good
       </p>
       <p class="ma0 mb2">
         Literal present tense in Korean
       </p>
       <p class="ma0">
-        ###
+        Generative systems
       </p>
     </div>
 
+    <img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
+
   </div>
 
 </div>
@@ -195,10 +197,16 @@
 
 <div class="w-100 colorWine bgColorOrange pt5 pb6 ph3 ph5-ns">
 
-  <div class="flex flex-row-l flex-column justify-between">
+  <div class="flex flex-wrap justify-between">
+
+    <div class="w-100 h3">
+      <h1 class="f2 ma0">
+        <span class="fw4">offen.</span><span class="fw7">software</span>
+      </h1>
+    </div>
 
     <div class="w-100 w-50-ns">
-      <p class="fw7 ma0 mb2">
+      <p class="ma0 mb2">
         hi@offen.software
       </p>
       <p class="ma0 mb2">
@@ -222,6 +230,12 @@
 
 </div>
 
+<div class="w-100 bgColorOrange">
+  <div class="mw7 center">
+    <img src="/theme/images/gfx-content-3.svg" alt="pattern" width="768px" height="128px" class="db imageCrop">
+  </div>
+</div>
+