Merge pull request #54 from offen/test-offen

Test offen

homepage/content/articles/0040-test-offen-today.md

@@ -0,0 +1,40 @@
+title: Test our alpha release today | Offen
+description: Help us take a step forward. Download or deploy Offen today and give it a spin. Any feedback is appreciated.
+date: 2020-03-04
+slug: test-offen-today
+sitemap_priority: 0.7
+sm_image_url: /theme/images/offen-blog-0040-test-offen-today.jpg
+
+<figure class="larger-image mb5">
+<img alt="Test Offen today" src="/theme/images/offen-blog-0040-test-offen-today.jpg"/>
+</figure>
+
+###### 04 Mar 2020, Hendrik Niefeld
+# [Test Offen today](/blog/test-offen-today/)
+We’re excited to present our first version that is officially ready for testing.
+
+---
+
+After we released our initial Offen v0.1.0-alpha.1 in January this year, we've been busy working on a successor version for the last six weeks. Based on the initial feedback, we have made major adjustments in the front and backend area.
+
+We believe with these updates Offen has reached a level of functionality and stability that is ready for public testing. Your feedback is helping us take a step forward on our way to developing *a viable alternative to established web analytic tools.*
+
+Although we have dug very deep, things may still contain issues. Therefore, we recommend using Offen in a production environment only for the brave. Also be aware that the upgrade path may be broken with upcoming releases.  
+
+---
+
+## Offen v0.1.0-alpha.3
+
+##### Single binary file for Linux, Windows or MacOS
+[Download](https://get.offen.dev/){: data-button="black"}
+
+##### Your own Offen instance
+[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master){: target="_blank" data-button-mb5="black"}
+
+Download or deploy Offen today and give it a spin. *[Check our Docs](https://docs.offen.dev/){: target="_blank"} for detailed instructions.*
+
+We appreciate any feedback. No matter if you have difficulties with the installation, find our UI hard to understand or catch anything unexpected. Please get in touch via [Twitter,](https://twitter.com/hioffen){: target="_blank"} [LinkedIn](https://www.linkedin.com/company/hioffen/){: target="_blank"} or [email.](mailto:hioffen@posteo.de){: target="_blank"} 
+
+We look forward to hearing from you. Happy testing!
+
+[Give feedback](mailto:hioffen@posteo.de){: data-button="yellow"}

homepage/pelicanconf.py

@@ -48,22 +48,26 @@ PLUGIN_PATHS = ['./plugins']
 PLUGINS = ['decorate_content', 'assets']
 
 DECORATE_CONTENT = {
-    '[data-button]': ['dib', 'mv3', 'ph4', 'pv2', 'b--solid', 'bw2'],
+    '[data-button]': ['w-100', 'w-auto-ns', 'tc', 'tl-ns', 'dib', 'mt3', 'ph4', 'pv2', 'b--solid', 'bw2'],
+    '[data-button-mb5]': ['w-100', 'w-auto-ns', 'tc', 'tl-ns', 'dib', 'mt3', 'mb5', 'ph4', 'pv2', 'b--solid', 'bw2'],
     '[data-button="yellow"]': ['brd-cclr-mid-yellow', 'fnt-cclr-mid-yellow'],
     '[data-button="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
+    '[data-button-mb5="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
     'a': ['link', 'b', 'dim'],
     'a:not([data-button])': ['gray'],
-    'h1': ['f2', 'normal', 'lh-title', 'mt4', 'mb0', 'mb3', 'light-silver'],
+    'h1': ['f2', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'],
-    'h2': ['f25', 'normal', 'lh-title', 'mt4', 'mb0', 'mb3', 'light-silver'],
+    'h2': ['f25', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'],
-    'h3': ['f5', 'normal', 'mt4', 'mb0', 'mb3', 'fnt-cclr-mid-black'],
+    'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
-    'h4': ['f5', 'normal', 'mt4', 'mb0', 'mb3'],
+    'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
-    'h5': ['ma0'],
+    'h5': ['f5', 'b', 'mt4', 'ma0', 'mb1'], # text over button
-    'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'],
+    'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'], # date
     'p': ['ma0', 'pb3'],
     'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
-    'hr': ['mt5', 'mb3', 'b--black-05']
+    'hr': ['mt5', 'mb3', 'b--black-05'],
+    '[spacer-4]': ['ma0', 'mb4']
 }
 
+DOCS_URL = 'https://docs.offen.dev'
 GITHUB_ORG = 'https://github.com/offen'
 CONTACT_EMAIL = 'hioffen@posteo.de'
 GPG_KEY_FILE = '74B041E23DB29D552644CEB1B18C633D6967FE3F.asc'

homepage/theme/static/css/fix.css

@@ -110,11 +110,7 @@ em {
   font-style: normal;
 }
 .em-mint {
-  background: linear-gradient(transparent 66%, #BBD9D3 66%);
+  background: linear-gradient(transparent 66%, #E5FDF8 66%);
-  font-style: normal;
-}
-.em-mint-bright {
-  background: linear-gradient(transparent 66%, #CEEBE5 66%);
   font-style: normal;
 }
 hr {

homepage/theme/templates/base.html

@@ -61,7 +61,7 @@
                 <a class="b link dim fnt-cclr-mid-black" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
               </li>
               <li>
-                <a class="b link dim fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
+                <a class="b link dim fnt-cclr-mid-black" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
               </li>
               <li>
                 <a class="b link dim" href="/get-started/">Get started</a>
@@ -83,10 +83,10 @@
       {% if is_getstarted != 'true' %}
       {% block outro %}
         <div class="w-100 cclr-mid-yellow">
-          <div class="pt3 pb6 ph3" id="bg-cta-bottom">
+          <div class="pt3 pb4 ph3" id="bg-cta-bottom">
             <div class="mw8 center">
-              <div class="flex flex-wrap justify-center">
+              <div class="flex flex-wrap justify-center pt3">
-                <div class="w55 ph3 pt5 tc">
+                <div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Participate
                   </h2>
@@ -96,7 +96,7 @@
                   <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
                 </div>
                 {% if is_article != 'true' %}
-                <div class="w55 ph3 pt5 tc">
+                <div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     In the making
                   </h2>
@@ -106,7 +106,7 @@
                   <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
                 </div>
                 {% endif %}
-                <div class="w55 ph3 pt5 tc">
+                <div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Ethical internet
                   </h2>
@@ -121,7 +121,7 @@
         </div>
       {% endblock %}
       {% endif %}
-      <div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
+      <div class="w-100 cclr-mid-black gray ph4 pb4"> <!--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">
             <p class="ma0">
@@ -139,22 +139,25 @@
               <a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">GPG Key</a>
             </p>
             <p class="ma0 mt2">
-              <a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
+              <a class="link b dim gray" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
             </p>
             <p class="ma0">
-              <a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
+              <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>
             <p class="ma0">
               <a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
             </p>
             <p class="ma0">
               <a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
             </p>
-            <p class="ma0">
+            <p class="ma0 mt2">
               <a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
             </p>
             {% endif %}

homepage/theme/templates/getstarted.html

@@ -4,14 +4,19 @@
 
 {% block content %}
 <div class="w-100 mt5-ns" id="bg-feature">
-  <div class="pv5 ph4">
+  <div class="pa4">
-    <div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
+    <div class="mw8 center flex flex-column flex-row-ns mb5 pa3 cclr-mid-mint">
       <div class="w-100 w-60-ns">
         <h2 class="f25 normal tc tl-ns ma0 mb3">
-          <em>Our alpha release</em>
+          <em class="em-mint">
+            Test Offen today
+          </em>
         </h2>
+        <p class="ma0 mb2 tc tl-ns">
+          Our alpha release is ready for testing. Offen is free and always will be.
+        </p>
         <p class="ma0 mb3 tc tl-ns">
-          Offen is in active development. Do something brave and test our latest alpha release today. It’s free and always will be.
+          Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
         </p>
       </div>
       <div class="w-100 w-40-ns ml4-m ml6-l">
@@ -28,23 +33,23 @@
   </div>
 </div>
 <div class="w-100" id="bg-outro">
-  <div class="pv5 ph4">
+  <div class="pa4">
-    <div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
+    <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 class="em-extra">
+          <em>
-            Get started now
+            Kick things off
           </em>
         </h2>
         <p class="ma0 mb3 tc tl-ns">
-          Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides help you kick off.
+          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="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 guides</a>
+        <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>
       </div>
     </div>
   </div>

homepage/theme/templates/index.html

@@ -36,7 +36,7 @@
             <div class="flex justify-center w55-container" id="bg-feature-1">
               <div class="w56 tc pa3">
                 <h2 class="f25 normal lh-solid mt5 mb3">
-                  <em class="em-mint-bright">
+                  <em class="em-mint">
                     Free & Open
                   </em>
                 </h2>
@@ -48,7 +48,7 @@
             <div class="flex justify-center w55-container" id="bg-feature-3">
               <div class="w56 tc pa3">
                 <h2 class="f25 normal lh-solid mt6 mb3">
-                  <em class="em-mint-bright">
+                  <em class="em-mint">
                     Self hosted
                   </em>
                 </h2>
@@ -60,7 +60,7 @@
             <div class="flex justify-center w55-container" id="bg-feature-2">
               <div class=" w56 tc pa3">
                 <h2 class="f25 normal lh-solid mt7 mb3">
-                  <em class="em-mint-bright">
+                  <em class="em-mint">
                     Fair & Secure
                   </em>
                 </h2>
@@ -90,7 +90,7 @@
   </div>
 
   <div class="w-100 bg-white gray">
-    <div class="flex flex-wrap justify-center pt5 pb6">
+    <div class="flex flex-wrap justify-center pt4 pb5">
       <div class="mw7 mw8-l center ph5-ns ph3">
         <h2 class="f25 normal lh-solid">Summary</h2>
         <div class="columns mb3">
@@ -104,14 +104,19 @@
 
 {% block outro %}
 <div class="w-100" id="bg-feature">
-  <div class="pv5 ph4">
+  <div class="pa4">
-    <div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
+    <div class="mw8 center flex flex-column flex-row-ns mb5 pa3 cclr-mid-mint">
       <div class="w-100 w-60-ns">
         <h2 class="f25 normal tc tl-ns ma0 mb3">
-          <em>Our alpha release</em>
+          <em class="em-mint">
+            Test Offen today
+          </em>
         </h2>
+        <p class="ma0 mb2 tc tl-ns">
+          Our alpha release is ready for testing. Offen is free and always will be.
+        </p>
         <p class="ma0 mb3 tc tl-ns">
-          Offen is in active development. Do something brave and test our latest alpha release today. It’s free and always will be.
+          Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
         </p>
       </div>
       <div class="w-100 w-40-ns ml4-m ml6-l">
@@ -128,23 +133,23 @@
   </div>
 </div>
 <div class="w-100" id="bg-outro">
-  <div class="pv5 ph4">
+  <div class="pa4">
-    <div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
+    <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 class="em-mint">
+          <em>
-            Get started now
+            Kick things off
           </em>
         </h2>
         <p class="ma0 mb3 tc tl-ns">
-          Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides help you kick off.
+          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="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 guides</a>
+        <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>
       </div>
     </div>
   </div>