update get-started

homepage/theme/templates/base.html

@@ -121,7 +121,8 @@
         </div>
       {% endblock %}
       {% endif %}
-      <div class="w-100 cclr-mid-black gray ph4 pb4"> <!--footer-->
+      {% if is_getstarted != 'true' %}
+      <div class="w-100 cclr-mid-black gray ph4 pb4">
         <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">
             <p class="ma0">
@@ -131,7 +132,6 @@
             <p class="ma0">for everyone</p>
           </div>
           <div class="w-25-l mt3 mr3">
-            {% if is_getstarted != 'true' %}
             <p class="ma0">
               <a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
             </p>
@@ -144,10 +144,8 @@
             <p class="ma0">
               <a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
             </p>
-            {% endif %}
           </div>
           <div class="w-25-l mt3 mr3">
-            {% if is_getstarted != 'true' %}
             <p class="ma0">
               <a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
             </p>
@@ -160,13 +158,32 @@
             <p class="ma0 mt2">
               <a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
             </p>
-            {% endif %}
           </div>
           <div class="w-25-l mt3 tr-l">
             {{ BUILD_DATE }}
           </div>
         </div>
       </div>
+      {% else %}
+      <div class="w-100 cclr-mid-mint gray ph4 pb4">
+        <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-black">
+            <p class="ma0">
+              <a class="b link dim fnt-cclr-mid-black" href="/">Offen</a>
+            </p>
+            <p class="ma0">Transparent web analytics</p>
+            <p class="ma0">for everyone</p>
+          </div>
+          <div class="w-25-l mt3 mr3">
+          </div>
+          <div class="w-25-l mt3 mr3">
+          </div>
+          <div class="w-25-l mt3 tr-l">
+            {{ BUILD_DATE }}
+          </div>
+        </div>
+      </div>
+      {% endif %}
     </div>
     {% block scripts %}
       {% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js" %}

homepage/theme/templates/getstarted.html

@@ -3,55 +3,41 @@
 {% set is_getstarted = 'true' %}
 
 {% block content %}
-<div class="w-100 mt5-ns" id="bg-feature">
+<div class="w-100 mt5-ns cclr-dark-white">
-  <div class="pa4">
+  <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
-    <div class="mw8 center flex flex-column flex-row-ns mb5 pa3 cclr-mid-mint">
+    <div class="w-100 center">
-      <div class="w-100 w-60-ns">
+      <h2 class="f1-ns f2 normal tc ma0 mb4">
-        <h2 class="f25 normal tc tl-ns ma0 mb3">
-          <em class="em-mint">
         Test Offen today
-          </em>
       </h2>
-        <p class="ma0 mb2 tc tl-ns">
+      <p class="tc tl-ns ma0 mb2 gray">
-          Our alpha release is ready for testing. Offen is free and always will be.
+        Our alpha release is ready for testing. <em>Offen is free and always will be.</em>
       </p>
-        <p class="ma0 mb3 tc tl-ns">
+      <p class="tc tl-ns ma0 mb4 gray">
         Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
       </p>
-      </div>
+      <div class="flex flex-column items-center">
-      <div class="w-100 w-40-ns ml4-m ml6-l">
         <p class="b tc lh-title tracked-min ma0 mt3 mb2">
           Single binary file <br>for Linux, Windows or MacOS
         </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="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 white cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
         <p class="b tc lh-title tracked-min ma0 mt4 mb2">
           Your own Offen instance
         </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="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb4 white cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
       </div>
-    </div>
+      <hr class="mt5 mb4 b--black-05">
-  </div>
+      <h2 class="f25 normal tc ma0 mb4">
-</div>
-<div class="w-100" id="bg-outro">
-  <div class="pa4">
-    <div class="mw8 center flex flex-column flex-row-ns mb5 pa3 cclr-mid-yellow">
-      <div class="w-100 w-60-ns">
-        <h2 class="f25 normal tc tl-ns ma0 mb3">
-          <em>
         Kick things off
-          </em>
       </h2>
-        <p class="ma0 mb3 tc tl-ns">
+      <p class="tc tl-ns ma0 mb4 gray">
         Running a website and need to collect usage statistics? Want to contribute as a developer? Our Docs will help you kick off.
       </p>
-      </div>
+      <div class="flex flex-column items-center">
-      <div class="w-100 w-40-ns ml4-m ml6-l">
         <p class="b tc lh-title tracked-min ma0 mt3 mb2">
           Details on how to <br>run, use 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="https://docs.offen.dev/" rel="noopener" target="_blank">Open Docs</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb5 white cclr-mid-black" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open Docs</a>
       </div>
     </div>
   </div>
-</div>
 {% endblock %}