Merge pull request #40 from offen/new-article

New article

homepage/content/articles/0010-milestone-1.md

@@ -9,7 +9,6 @@ sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
 <img alt="Milestone 1 - Laying the foundation for fair web analytics" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
 </figure>
 
-
 ###### 12 Dec 2019, Hendrik Niefeld
 # [Episode One — Laying the foundation for fair web analytics](/blog/laying-foundation-for-fair-web-analytics/)
 Milestone 1 is completed. This is what we've achieved in the last six weeks.

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

@@ -0,0 +1,51 @@
+title: Collecting data securely | Offen
+description: Our key milestone 2 features are user consent, improved crypto implementation and an extended set of stats.
+date: 2020-01-31
+slug: collecting-data-securely
+sitemap_priority: 0.7
+sm_image_url: /theme/images/offen-blog-0030-milestone2.jpg
+
+<figure class="larger-image mb5">
+<img alt="Milestone 2 - Collecting data securely" src="/theme/images/offen-blog-0030-milestone-2.jpg"/>
+</figure>
+
+###### 31 Jan 2020, Hendrik Niefeld
+# [Episode Two  — Collecting data securely](/blog/collecting-data-securely/)
+We finished milestone 2. Here is what we' ve been doing for the last 8 weeks.
+
+---
+
+### Collecting data only with consent
+A first approach to one of our major features is implemented. Websites that embed the Offen script now display a user consent banner. In case of user's deny, no other requests than loading the script are made from then on.  
+[Learn more](https://analytics.offen.dev/){: target="_blank" data-button="yellow"} 
+
+### Accidental leaks dont expose data
+We encrypt all event data before it leaves the browser. [Two types](https://github.com/offen/offen/pull/270){: target="_blank"}  of crypto implementations are used for this. This allows us to handle user data from both https and http-only sites securely.
+
+### What exactly happens on your website?
+The insight into user behavior has been improved. Still, no sensitive user information is collected. We have added seven additional statistics like Average Page Depth as well as Landing and Exit Pages. Here you find an [overview of all added stats.](https://github.com/offen/offen/pull/270){: target="_blank"} 
+
+### We are live
+The current state of *Offen runs on this domain.* You should have noticed our conset banner by now. Opted in? Head to the [Auditorium](https://analytics.offen.dev/auditorium/){: target="_blank"} to manage your data. If not, please have a look at our [Explainer.](https://analytics.offen.dev/){: target="_blank"}
+
+*We welcome any feedback* on this key subject. Did our banner text inform you sufficiently? Which issues have been left open? How can we do better? Thanks in advance.  
+[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="yellow"} 
+
+### 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"}
+
+### 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.
+
+### 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.
+
+### Up next
+*Episode Three — Compelling data display* will feature informed consent, annotated statistics and a faster display of usage data. Stay tuned.
+
+---
+
+### Deep dive
+Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.  
+[Open milestone 2 Pull Request](https://github.com/offen/offen/pull/270){: target="_blank" data-button="black"}

homepage/pelicanconf.py

@@ -53,7 +53,8 @@ DECORATE_CONTENT = {
     '[data-button="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
     'a': ['link', 'b', 'dim'],
     'a:not([data-button])': ['gray'],
-    'h2': ['f25', 'normal', 'mt4', 'mb0', 'mb3', 'light-silver'],
+    'h1': ['f2', 'normal', 'lh-title', 'mt4', 'mb0', 'mb3', 'light-silver'],
+    'h2': ['f25', 'normal', 'lh-title', 'mt4', 'mb0', 'mb3', 'light-silver'],
     'h3': ['f5', 'normal', 'mt4', 'mb0', 'mb3', 'fnt-cclr-mid-black'],
     'h4': ['f5', 'normal', 'mt4', 'mb0', 'mb3'],
     'h5': ['ma0'],

homepage/theme/static/css/fix.css

@@ -104,7 +104,18 @@ hr {
   margin-left: -1rem;
   margin-right: -1rem;
 }
-
+.dim:focus {
+  transition: none;
+  opacity: 1;
+}
+ul {
+  padding-inline-start: 2rem;
+}
+@media only screen and (max-width: 30em) {
+  ul {
+    padding-inline-start: 1rem;
+  }
+}
 
 
 /* ---------------------------------------------------

homepage/theme/templates/base.html

@@ -80,7 +80,7 @@
             <div class="mw8 center">
               <div class="flex flex-wrap justify-center">
                 <div class="w55 mh3 pt5 tc">
-                  <h2 class="f25 lh-solid ma0 mb3">
+                  <h2 class="f25 normal lh-solid ma0 mb3">
                     Participate
                   </h2>
                   <p class="ma0 mb3">
@@ -90,7 +90,7 @@
                 </div>
                 {% if is_article != 'true' %}
                 <div class="w55 mh3 pt5 tc">
-                  <h2 class="f25 lh-solid ma0 mb3">
+                  <h2 class="f25 normal lh-solid ma0 mb3">
                     In the making
                   </h2>
                   <p class="ma0 mb3">
@@ -100,7 +100,7 @@
                 </div>
                 {% endif %}
                 <div class="w55 mh3 pt5 tc">
-                  <h2 class="f25 lh-solid ma0 mb3">
+                  <h2 class="f25 normal lh-solid ma0 mb3">
                     Ethical internet
                   </h2>
                   <p class="ma0 mb3">

homepage/theme/templates/index.html

@@ -8,7 +8,7 @@
           <img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
         </div>
         <div class="mw6">
-          <h1 class="f1-ns f2 lh-solid ma0 mb3">
+          <h1 class="f1-ns f2 normal lh-solid ma0 mb3">
             Transparent <span>web analytics</span>
           </h1>
           <p class="ma0 mb4">
@@ -27,7 +27,7 @@
       <div class="mw8 center">
         <div class="flex flex-wrap justify-around">
           <div class="w55 mh3 pt5 tc">
-            <h2 class="f25 lh-solid ma0 mb3">
+            <h2 class="f25 normal lh-solid ma0 mb3">
               <em>Free & Open</em>
             </h2>
             <p class="ma0">
@@ -35,7 +35,7 @@
             </p>
           </div>
           <div class="w55 mh3 pt5 tc">
-            <h2 class="f25 lh-solid ma0 mb3">
+            <h2 class="f25 normal lh-solid ma0 mb3">
               <em>Fair & Secure</em>
             </h2>
             <p class="ma0">
@@ -43,7 +43,7 @@
             </p>
           </div>
           <div class="w55 mh3 pt5 tc">
-            <h2 class="f25 lh-solid ma0 mb3">
+            <h2 class="f25 normal lh-solid ma0 mb3">
               <em>Easy to use</em>
             </h2>
             <p class="ma0">
@@ -60,7 +60,7 @@
     <div class="pt3 pb6 ph4" id="bg-cta-top">
       <div class="flex justify-end mw6 center pt5">
         <div class="w55 tr">
-          <h2 class="f25 lh-solid ma0 mb3">
+          <h2 class="f25 normal lh-solid ma0 mb3">
             In the making
           </h2>
           <p class="ma0 mb4">
@@ -75,7 +75,7 @@
   <div class="w-100 bg-white gray">
     <div class="flex flex-wrap justify-center pt5 pb6">
       <div class="mw7 mw8-l center ph5-ns ph3">
-        <h2>Summary</h2>
+        <h2 class="f25 normal lh-solid">Summary</h2>
         <div class="columns mb3">
           {{ page.content }}
           <a class="b link dim ph4 pv2 mt3 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
@@ -91,7 +91,7 @@
     <div class="pt3 pb6 ph4" id="bg-outro">
       <div class="flex justify-end mw6 center pt5">
         <div class="w55 tr">
-          <h2 class="f25 lh-solid ma0 mb3">
+          <h2 class="f25 normal lh-solid ma0 mb3">
             Ethical internet
           </h2>
           <p class="mb4">