website/theme/static/css/styles.css

@@ -17,6 +17,17 @@ COLORS
 /* ---------------------------------------------------
 LAYOUT
 ----------------------------------------------------*/
+.mainContainer {
+  min-height:2000px;
+}
+.mainContent {
+  min-height:900px;
+}
+.mainCta {
+  position:-webkit-sticky;
+  position:sticky;
+  bottom:0;
+}
 .paddingExtra {
   padding-left: 0;
   padding-right: 0;
@@ -34,6 +45,7 @@ LAYOUT
   padding-left: 3rem;
 }
 
+
 /* ---------------------------------------------------
 TYPOGRAPHY
 ----------------------------------------------------*/
@@ -44,7 +56,6 @@ TYPOGRAPHY
   letter-spacing:  0.15em;
 }
 
-
 /* ---------------------------------------------------
 IMAGES
 ----------------------------------------------------*/

website/theme/templates/index.html

@@ -2,23 +2,28 @@
 {% set index = True %}
 
 {% block content %}
-<div class="pt3 paddingExtra">
+<div class="mainContainer">
+  <div class="mainContent">
+    <div class="pt3 paddingExtra">
       <h1 class="f4 trackedWide ma0 mb3">
         <span class="fw4">offen.</span><span class="fw7">software</span>
       </h1>
-</div>
-<div class="w-100">
+    </div>
+    <div class="w-100">
       <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="432" class="db imageCrop">
-</div>
-<div class="paddingExtra">
+    </div>
+    <div class="paddingExtra">
       <p class="trackedWide 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 class="w-100">
-  <div class="flex flex-column items-center">
+    </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>
-
 {% endblock %}