From e16d6c6c228130f39ada1e0d2462a582d2d0bc97 Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Sun, 12 Nov 2023 20:43:51 +0100
Subject: [PATCH] illu 4

---
 website/theme/static/css/styles.css          |  2 +-
 website/theme/static/images/gfx-detail-3.svg | 10 ++++
 website/theme/templates/index.html           | 51 +++++++++++---------
 3 files changed, 38 insertions(+), 25 deletions(-)
 create mode 100644 website/theme/static/images/gfx-detail-3.svg

diff --git a/website/theme/static/css/styles.css b/website/theme/static/css/styles.css
index 16b5f71..601211a 100644
--- a/website/theme/static/css/styles.css
+++ b/website/theme/static/css/styles.css
@@ -30,7 +30,7 @@ COLORS
 LAYOUT
 ----------------------------------------------------*/
 .splashContent {
-  min-height: 84vh;
+  min-height: 86vh;
 }
 .splashCta {
   position: -webkit-sticky;
diff --git a/website/theme/static/images/gfx-detail-3.svg b/website/theme/static/images/gfx-detail-3.svg
new file mode 100644
index 0000000..3da583c
--- /dev/null
+++ b/website/theme/static/images/gfx-detail-3.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_92_25)">
+<rect width="64" height="64" rx="2" fill="#E9500A"/>
+</g>
+<defs>
+<clipPath id="clip0_92_25">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/website/theme/templates/index.html b/website/theme/templates/index.html
index eb34ad5..c582d7c 100644
--- a/website/theme/templates/index.html
+++ b/website/theme/templates/index.html
@@ -88,18 +88,18 @@
     <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-l flex flex-column-l flex-wrap justify-center">
-        <div class="wExtra32 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
+        <div class="wExtra32 h-auto h5-l colorSalmon bgColorWine 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">
+            <p class="ma0 ml4-ns mb2">
               Web Application and website development
             </p>
-            <p class="ma0 mb2">
+            <p class="ma0 ml4-ns mb2">
               Independent infrastructure solutions
             </p>
-            <p class="ma0">
+            <p class="ma0 ml4-ns ">
               Support and guidance with self hosting
             </p>
           </div>
@@ -108,19 +108,20 @@
     </div>
 
     <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
+    <img src="/theme/images/gfx-detail-3.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">
+    <div class="wExtra24 h-auto h5-l colorSalmon bgColorWine ph3 pv4 pa4-l">
       <div class="mw6-m center-m">
         <p class="fw7 f4 f2-l ma0 mb3">
           We created
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml4-ns mb2">
           Offen Fair Web Analytics
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml4-ns mb2">
           analytics.txt
         </p>
-        <p class="ma0">
+        <p class="ma0 ml4-ns">
           docker-volume-backup
         </p>
       </div>
@@ -128,21 +129,21 @@
 
     <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">
+    <div class="wExtra24 h-auto h5-l colorSalmon bgColorWine ph3 pv4 pa4-l">
       <div class="mw6-m center-m">
         <p class="fw7 f4 f2-l ma0 mb3">
           We worked with
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml4-ns mb2">
           NLNet
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml4-ns mb2">
           RBB
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml4-ns mb2">
           Ecosia
         </p>
-        <p class="ma0">
+        <p class="ma0 ml4-ns">
           Wikimedia
         </p>
       </div>
@@ -152,21 +153,21 @@
     <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-l flex flex-column-l flex-wrap justify-center">
-      <div class="wExtra32 hExtra20 colorWhite bgColorOrange ph3 pv4 pa4-l">
+      <div class="wExtra32 hExtra20 colorSalmon bgColorWine ph3 pv4 pa4-l">
         <div class="mw6-m center-m">
           <p class="fw7 f4 f2-l ma0 mb3">
             We are
           </p>
-          <p class="ma0 mb2">
+          <p class="ma0 ml4-ns mb2">
             Frederik Ring, interested in
           </p>
-          <p class="ma0 mb2">
+          <p class="ma0 ml5-ns ml2 mb2">
             Minimal Kubernetes distributions
           </p>
-          <p class="ma0 mb2">
+          <p class="ma0 ml5-ns ml2 mb2">
             Open Source Tomato Seeds
           </p>
-          <p class="ma0">
+          <p class="ma0 ml5-ns ml2">
             Psychological aspects of Software Development
           </p>
         </div>
@@ -174,29 +175,31 @@
       <img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
     </div>
 
+    <img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
     <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">
+    <div class="wExtra32 hExtra20 colorSalmon bgColorWine ph3 pv4 pa4-l">
       <div class="mw6-m center-m">
         <p class="fw7 f4 f2-l ma0 mb3">
-          And we are
+          We are
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml4-ns mb2">
           Hendrik Niefeld, interested in
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml5-ns ml2 mb2">
           Make things look good
         </p>
-        <p class="ma0 mb2">
+        <p class="ma0 ml5-ns ml2 mb2">
           Literal present tense in Korean
         </p>
-        <p class="ma0">
+        <p class="ma0 ml5-ns ml2">
           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">
+    <img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
 
   </div>