website/theme/static/css/styles.css

@@ -37,12 +37,12 @@ LAYOUT
   position: sticky;
   bottom: 0;
 }
-.paddingExtra {
+.paddingSplash {
   padding-left: 0;
   padding-right: 0;
 }
 @media only screen and (max-width: 48rem) {
-	.paddingExtra {
+	.paddingSplash {
     padding-left: 1rem;
     padding-right: 1rem;
 	}

website/theme/templates/index.html

@@ -7,20 +7,20 @@
 
 <div class="splashContent">
 
-    <div class="w-100 pt3 ph3">
-      <h1 class="f4 ma0 mb3">
+    <div class="w-100 pt3 ph3 ph5-ns mb3 mb4-m mb5-l">
+      <h1 class="f4 ma0">
         <span class="fw4">offen.</span><span class="fw7">software</span>
       </h1>
     </div>
 
-    <div class="w-100 bgColorOrange">
+    <div class="w-100 bgColorOrange mb3 mb4-ns">
       <div class="mw7 center">
         <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="432" class="db imageCrop">
       </div>
     </div>
 
-    <div class="mw7 center paddingExtra">
-      <h2 class="f4 f2-ns ma0 mt3">
+    <div class="mw7 center paddingSplash">
+      <h2 class="f4 f2-ns ma0">
         <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>
       </h2>
     </div>
@@ -35,7 +35,7 @@
 
 <!-- FOLD -->
 
-<div class="w-100 colorWine bgColorOrange pv5 mt5">
+<div class="w-100 colorWine bgColorOrange pv5 mt5 ph3 ph5-ns">
 
   <div class="mw7 center paddingExtra">
 
@@ -64,11 +64,11 @@
 
 <!-- FOLD -->
 
-<div class="w-100 pv5 ph3">
+<div class="w-100 w-auto-ns pt5 pb6 ph3">
 
   <div class="flex flex-wrap justify-center gapExtra">
 
-    <div class="colorWhite bgColorOrange pa4">
+    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
       <p class="fw7 ma0 mb3">
         We offer
       </p>
@@ -83,7 +83,7 @@
       </p>
     </div>
 
-    <div class="colorWhite bgColorOrange pa4">
+    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
       <p class="fw7 ma0 mb3">
         We created
       </p>
@@ -98,7 +98,7 @@
       </p>
     </div>
 
-    <div class="colorWhite bgColorOrange pa4">
+    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
       <p class="fw7 ma0 mb3">
         We worked with
       </p>
@@ -116,12 +116,12 @@
       </p>
     </div>
 
-    <div class="colorWhite bgColorOrange pa4">
+    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
       <p class="fw7 ma0 mb3">
-        We are Frederik Ring
+        We are
       </p>
       <p class="ma0 mb2">
-        Currently interested in
+        Frederik Ring, interested in
       </p>
       <p class="ma0 mb2">
         Minimal Kubernetes distributions
@@ -134,12 +134,12 @@
       </p>
     </div>
 
-    <div class="colorWhite bgColorOrange pa4">
+    <div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
       <p class="fw7 ma0 mb3">
-        We are Hendrik Niefeld
+        We are
       </p>
       <p class="ma0 mb2">
-        Currently interested in
+        Hendrik Niefeld, interested in
       </p>
       <p class="ma0 mb2">
         Generative systems
@@ -148,7 +148,7 @@
         Literal present tense in Korean
       </p>
       <p class="ma0">
-        Sociological aspects of hyperpolitics
+        ###
       </p>
     </div>
 
@@ -156,4 +156,40 @@
 
 </div>
 
+<!-- FOOTER -->
+
+<div class="w-100 colorWine bgColorOrange pt5 pb6 ph3 ph5-ns">
+
+  <div class="flex flex-row-l flex-column justify-between">
+
+    <div class="w-100 w-50-ns">
+      <p class="ma0 mb2">
+        hi@offen.software
+      </p>
+      <p class="ma0 mb2">
+        LinkedIn
+      </p>
+      <p class="ma0 mb2">
+        Imprint
+      </p>
+    </div>
+
+    <div class="w-100 w-50-ns">
+      <p class="ma0 mb2 tl tr-l">
+        Source code for this website
+      </p>
+      <p class="ma0 tl tr-l">
+        Work with us
+      </p>
+    </div>
+
+  </div>
+
+</div>
+
+
+
+
+
+
 {% endblock %}