add get-started page

homepage/content/pages/get-started.md

@@ -0,0 +1,4 @@
+title: Get started | Offen
+description: temp
+slug: get-started
+template: getstarted

homepage/theme/static/css/fix.css

@@ -11,12 +11,18 @@ COLORS
 .brd-cclr-mid-yellow {
   border-color: #F7BF08;
 }
-.cclr-bright-yellow {
+.cclr-yellow-bright {
   background-color: #fde28c;
 }
+.fnt-cclr-yellow-bright {
+  color: #fde28c;
+}
 .cclr-mid-mint {
   background-color: #BBD9D3;
 }
+.fnt-cclr-mint-bright {
+  color: #E2F6F2;
+}
 .cclr-mid-black {
   background-color: #39352A;
 }
@@ -100,6 +106,10 @@ em {
   background: linear-gradient(transparent 66%, #fde28c 66%);
   font-style: normal;
 }
+.em-extra {
+  background: linear-gradient(transparent 66%, #BBD9D3 66%);
+  font-style: normal;
+}
 hr {
   margin-left: -1rem;
   margin-right: -1rem;
@@ -116,6 +126,9 @@ ul {
     padding-inline-start: 1rem;
   }
 }
+.tracked-min {
+	letter-spacing:  .03em;
+}
 
 
 /* ---------------------------------------------------
@@ -320,4 +333,3 @@ GRAPHICS
 #bg-cta-bottom {
   background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
 }
-

homepage/theme/templates/base.html

@@ -40,6 +40,7 @@
           <div class="icon">
             <a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
           </div>
+          {% if is_getstarted != 'true' %}
           <nav>
             <div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
             <ul class="nav-list">
@@ -63,6 +64,7 @@
               </li>
             </ul>
           </nav>
+          {% endif %}
         </div>
       </section>
     </div>
@@ -74,6 +76,7 @@
         </div>
       {% endblock %}
 
+      {% if is_getstarted != 'true' %}
       {% block outro %}
         <div class="w-100 cclr-mid-yellow">
           <div class="pt3 pb6 ph3" id="bg-cta-bottom">
@@ -113,6 +116,7 @@
           </div>
         </div>
       {% endblock %}
+      {% endif %}
       <div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
         <div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
           <div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">

homepage/theme/templates/getstarted.html

@@ -0,0 +1,51 @@
+{% extends "page.html" %}
+
+{% set is_getstarted = 'true' %}
+
+{% block content %}
+<div class="w-100 mt5-ns cclr-mid-mint">
+  <div class="pv5 ph4">
+    <div class="mw8 center flex flex-column flex-row-ns">
+      <div class="w-100 w-60-ns">
+        <h2 class="f25 normal ma0 mb3">
+          <em>Our alpha release</em>
+        </h2>
+        <p class="ma0 mb3">
+          Offen is in active development. Do something brave and test our very first alpha release today. It’s free and always will be.
+        </p>
+      </div>
+      <div class="w-100 w-40-ns ml4-m ml6-l">
+        <p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
+          Single binary file for <br>Linux, Windows or MacOS
+        </p>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="#">Download</a>
+        <div class="tc">
+          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="#">Open GitHub release page</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="w-100 cclr-mid-yellow">
+  <div class="pv5 ph4">
+    <div class="mw8 center flex flex-column flex-row-ns mb3">
+      <div class="w-100 w-60-ns">
+        <h2 class="f25 normal ma0 mb3">
+          <em class="em-extra">
+            Get started now
+          </em>
+        </h2>
+        <p class="ma0 mb3">
+          Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides will help you kick off.
+        </p>
+      </div>
+      <div class="w-100 w-40-ns ml4-m ml6-l">
+        <p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
+          Details on how to run, use <br>and develop Offen
+        </p>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="#">Open guides</a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}