Merge pull request #43 from offen/development

Add 'Get started' page

build/Dockerfile

@@ -8,6 +8,7 @@ ENV SITEURL=$siteurl
 ARG offenaccountid
 ENV OFFEN_ACCOUNT_ID=$offenaccountid
 
+RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
 RUN npm install -g postcss-cli@^6.1.3 autoprefixer@^9.7.0 svgo@^1.3.0
 RUN apt-get update \
 	&& apt-get install -y libjpeg-progs optipng \

homepage/content/articles/0030-milestone-2.md

@@ -33,10 +33,10 @@ The current state of *Offen runs on this domain.* You should have noticed our co
 
 ### Testdrive on your system
 Whether you are a developer that want to contribute or a website operator that wants to test Offen. Have a demo up and running in no time on your local machine. Download and install a single binary file on Linux, Windows or MacOS.  
-[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.1/offen-v0.1.0-alpha.1.tar.gz){: target="_blank" data-button="yellow"}
+[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz){: data-button="yellow"}
 
 ### Feeling adventurous?
-Offen is under active development but with the introduction of the user consent banner has become usable for the general public. If you are brave enough you can use our [very first alpha release](https://github.com/offen/offen/releases/tag/v0.1.0-alpha.1){: target="_blank"} in a production environment.
+Offen is under active development but with the introduction of the user consent banner has become usable for the general public. If you are brave enough you can use our [latest alpha release](https://github.com/offen/offen/releases/latest/){: target="_blank"} in a production environment.
 
 ### We need to talk about Safari
 Currently, the way we store encryption keys securely on the client side does not work in Apple's Safari browser. Fortunately, our improved opt-in flow will allow us to resume Safari support in milestone 3. Please bear with us until then.

homepage/content/pages/get-started.md

@@ -0,0 +1,5 @@
+title: Get started | Offen
+description: Want to collect usage statistics transparently? Like to contribute as a developer? Download our latest release and learn how to run, use and develop Open.
+slug: get-started
+template: getstarted
+sitemap_priority: 0.8

homepage/pelicanconf.py

@@ -70,5 +70,7 @@ GPG_KEY_FILE = '74B041E23DB29D552644CEB1B18C633D6967FE3F.asc'
 PATREON_URL = 'https://www.patreon.com/offen'
 LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
 TWITTER_URL = 'https://twitter.com/hioffen'
+RELEASE_URL = 'https://github.com/offen/offen/releases/latest/'
+RELEASE_DIRECT_URL = 'https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz'
 
 OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

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;
 }
@@ -71,7 +77,6 @@ LAYOUT
 }
 
 
-
 /* ---------------------------------------------------
 TYPO AND LAYOUT ELEMENTS
 ----------------------------------------------------*/
@@ -100,6 +105,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,14 +125,20 @@ ul {
     padding-inline-start: 1rem;
   }
 }
+.tracked-min {
+	letter-spacing:  .03em;
+}
+.intro-margin-a {
+	margin-top: 0.3rem;
+}
+.intro-margin-b {
+	margin-top: 0.7rem;
+}
 
 
 /* ---------------------------------------------------
 MENU
 ----------------------------------------------------*/
-.nav-list {
-  margin: 0 0.7rem 0 0;
-}
 .nav-bar {
   height: 4rem;
 }
@@ -160,10 +175,19 @@ nav ul li a:visited {
   background: #F7BF08;
   color: #39352A;
 }
+nav ul li:last-child a {
+	padding-right: 2rem;
+  background: #39352A;
+  color: #fff;
+}
 nav ul li a:hover,
 nav ul li a:visited:hover {
   color: #39352A;
 }
+nav ul li:last-child a:hover,
+nav ul li:last-child a:visited:hover {
+  color: #fff;
+}
 nav ul li a:not(:only-child):after,
 nav ul li a:visited:not(:only-child):after {
   padding-left: 0.4rem;
@@ -212,17 +236,19 @@ nav ul li ul li a {
   nav ul li a {
     padding: 1rem;
     line-height: 1;
-	  padding-left: 20%;
+	  padding-left: 4.2rem;
   }
   nav ul li ul li a {
     padding-left: 30%;
   }
   nav ul li:last-child a {
-    padding-bottom: 4rem;
+    padding-bottom: 1.2rem;
-  }
+		margin: 0;
-  nav ul li:last-child a {
 		box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
   }
+	nav ul li:first-child a {
+		padding-top: 0.2rem;
+	}
   .nav-dropdown {
     position: static;
   }
@@ -306,7 +332,20 @@ IMAGES
 GRAPHICS
 ----------------------------------------------------*/
 #bg-intro {
-  background: url(/theme/images/gfx-intro.svg) no-repeat center;
+  background: url(/theme/images/gfx-intro.svg);
+	background-repeat: no-repeat;
+	background-attachment: scroll;
+	background-position: 200px 130px;
+}
+@media only screen and (min-width: 30.1em) and (max-width: 60em) {
+	#bg-intro {
+		background-position: calc(20% + 120px) 130px;
+	}
+}
+@media only screen and (max-width: 30em) {
+	#bg-intro {
+		background-position: 10px 60px;
+	}
 }
 #bg-feature {
   background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
@@ -320,4 +359,3 @@ GRAPHICS
 #bg-cta-bottom {
   background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
 }
-

homepage/theme/templates/base.html

@@ -37,9 +37,11 @@
     <div class="menu w-100 cclr-mid-yellow">
       <section class="nav-bar">
         <div class="nav-container">
-          <div class="icon">
+          <div class="icon flex">
-            <a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
+            <a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
+            <a class="link dim" href="/"><p class="f25 normal ma0 ml2 white">Offen</p></a>
           </div>
+          {% if is_getstarted != 'true' %}
           <nav>
             <div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
             <ul class="nav-list">
@@ -61,8 +63,12 @@
               <li>
                 <a class="b link dim fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
               </li>
+              <li>
+                <a class="b link dim" href="/get-started/">Get started</a>
+              </li>
             </ul>
           </nav>
+          {% endif %}
         </div>
       </section>
     </div>
@@ -74,6 +80,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 +120,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">
@@ -123,6 +131,7 @@
             <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>
@@ -135,8 +144,10 @@
             <p class="ma0">
               <a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</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="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
             </p>
@@ -146,6 +157,7 @@
             <p class="ma0">
               <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 }}

homepage/theme/templates/getstarted.html

@@ -0,0 +1,51 @@
+{% extends "page.html" %}
+
+{% set is_getstarted = 'true' %}
+
+{% block content %}
+<div class="w-100 mt5-ns" id="bg-feature">
+  <div class="pv5 ph4">
+    <div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
+      <div class="w-100 w-60-ns">
+        <h2 class="f25 normal tc tl-ns ma0 mb3">
+          <em>Our alpha release</em>
+        </h2>
+        <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.
+        </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="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
+        <div class="tc">
+          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="w-100" id="bg-outro">
+  <div class="pv5 ph4">
+    <div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
+      <div class="w-100 w-60-ns">
+        <h2 class="f25 normal tc tl-ns ma0 mb3">
+          <em class="em-extra">
+            Get started now
+          </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 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="https://docs.offen.dev/" rel="noopener" target="_blank">Open guides</a>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}

homepage/theme/templates/index.html

@@ -3,11 +3,19 @@
 {% block content %}
   <div class="w-100 mt5-ns cclr-mid-yellow">
     <div class="mw8 center" id="bg-intro">
-      <div class="flex flex-wrap pt6-ns pt-3 ph4">
+      <div class="flex justify-center pt6-ns pt5 ph4">
-        <div class="mw5 pr4 pb3">
+        <div class="dn db-ns w-20 tr pr3 pb3">
-          <img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
+          <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63">
+        </div>
+        <div class="w-100 w-80-ns">
+          <div class="flex">
+            <div class="db dn-ns intro-margin-a mb2 mr2">
+              <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="40" height="43">
+            </div>
+            <h1 class="f1-ns f2 normal lh-solid ma0 mb1 intro-margin-b white">
+              Offen
+            </h1>
           </div>
-        <div class="mw6">
           <h1 class="f1-ns f2 normal lh-solid ma0 mb3">
             Transparent <span>web analytics</span>
           </h1>
@@ -15,7 +23,7 @@
             Offen is an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
           </p>
           <div class="pb6">
-            <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>
+            <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/get-started/" rel="noopener">Start now</a>
           </div>
         </div>
       </div>
@@ -26,7 +34,7 @@
     <div class="pt3 pb6 ph3" id="bg-feature">
       <div class="mw8 center">
         <div class="flex flex-wrap justify-around">
-          <div class="w55 mh3 pt5 tc">
+          <div class="w55 mh3 mt5 tc cclr-mid-mint">
             <h2 class="f25 normal lh-solid ma0 mb3">
               <em>Free & Open</em>
             </h2>
@@ -34,7 +42,7 @@
               Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
             </p>
           </div>
-          <div class="w55 mh3 pt5 tc">
+          <div class="w55 mh3 mt5 tc cclr-mid-mint">
             <h2 class="f25 normal lh-solid ma0 mb3">
               <em>Fair & Secure</em>
             </h2>
@@ -42,7 +50,7 @@
               Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
             </p>
           </div>
-          <div class="w55 mh3 pt5 tc">
+          <div class="w55 mh3 mt5 tc cclr-mid-mint">
             <h2 class="f25 normal lh-solid ma0 mb3">
               <em>Easy to use</em>
             </h2>
@@ -87,17 +95,47 @@
 
 
 {% block outro %}
-  <div class="w-100 cclr-mid-yellow">
+<div class="w-100" id="bg-feature">
-    <div class="pt3 pb6 ph4" id="bg-outro">
+  <div class="pv5 ph4">
-      <div class="flex justify-end mw6 center pt5">
+    <div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
-        <div class="w55 tr">
+      <div class="w-100 w-60-ns">
-          <h2 class="f25 normal lh-solid ma0 mb3">
+        <h2 class="f25 normal tc tl-ns ma0 mb3">
-            Ethical internet
+          <em>Our alpha release</em>
         </h2>
-          <p class="mb4">
+        <p class="ma0 mb3 tc tl-ns">
-            We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
+          Offen is in active development. Do something brave and test our latest alpha release today. It’s free and always will be.
         </p>
-          <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
+      </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="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
+        <div class="tc">
+          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="w-100" id="bg-outro">
+  <div class="pv5 ph4">
+    <div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
+      <div class="w-100 w-60-ns">
+        <h2 class="f25 normal tc tl-ns ma0 mb3">
+          <em class="em-extra">
+            Get started now
+          </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 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="https://docs.offen.dev/" rel="noopener" target="_blank">Open guides</a>
       </div>
     </div>
   </div>