details

homepage/content/articles/milestone-1.md

@@ -9,8 +9,9 @@ sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
 <img alt="Milestone 1 - Laying the foundation for fair web analytics" class="mb5" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
 </div>
 
+
 ###### 12 Dec 2019, Hendrik Niefeld
-## Episode One — Laying the foundation for fair web analytics
+## [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/pelicanconf.py

@@ -48,14 +48,14 @@ PLUGINS = ['decorate_content', 'assets']
 
 # maps any CSS selector to a list of classes to be added
 DECORATE_CONTENT = {
+'a': ['link', 'b', 'dim', 'gray'],
 'h2': ['f25', 'ma0', 'mb3', 'light-silver'],
 'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
 'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
 'h5': ['ma0'],
 'h6': ['f5', 'lh-solid', 'normal', 'i', 'ma0', 'mb3', 'light-silver'],
 'p': ['ma0', 'pb3'],
-'a': ['link', 'b', 'dim', 'gray'],
+'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
-'blockquote': ['f5', 'i', 'ma0', 'ml4'],
 'hr': ['mt5', 'mb3', 'b--black-05']
 }
 

homepage/theme/static/css/fix.css

@@ -76,6 +76,10 @@ LAYOUT
 /* ---------------------------------------------------
 TYPO AND LAYOUT ELEMENTS
 ----------------------------------------------------*/
+/* Break long word on mobile */
+body {
+  overflow-wrap: break-word;
+}
 /* Custom Tachyons class */
 .f25 {
   font-size: 1.9rem;
@@ -103,14 +107,14 @@ hr {
 MENU
 ----------------------------------------------------*/
 .nav-list {
-  margin: 0 10px 40px 0;
+  margin: 0 0.7rem 0 0;
 }
 .nav-bar {
   height: 4rem;
 }
 .icon {
   position: absolute;
-  padding: 12px 0 0 20px;
+  padding: 0.7rem 0 0 1.2rem;
   float: left;
 }
 body.index .icon {
@@ -134,7 +138,7 @@ nav ul li {
 nav ul li a,
 nav ul li a:visited {
   display: block;
-  padding: 0 20px;
+  padding: 0 1.4rem;
   line-height: 4rem;
   text-decoration: none;
   font-weight: 700;
@@ -147,15 +151,15 @@ nav ul li a:visited:hover {
 }
 nav ul li a:not(:only-child):after,
 nav ul li a:visited:not(:only-child):after {
-  padding-left: 4px;
+  padding-left: 0.4rem;
   content: ' ▾';
 }
 nav ul li ul li {
-  min-width: 150px;
+  min-width: 10rem;
 }
 nav ul li ul li a {
-  padding: 15px;
+  padding: 1rem;
-  line-height: 20px;
+  line-height: 1.5rem;
 }
 .nav-dropdown {
   position: absolute;
@@ -172,9 +176,9 @@ nav ul li ul li a {
   width: 4rem;
 }
 /* Mobile Styles */
-@media only screen and (max-width: 960px) {
+@media only screen and (max-width: 60rem) {
   .nav-list {
-    margin: 0 0 40px 0;
+    margin: 0;
   }
   .nav-mobile {
     display: block;
@@ -191,15 +195,15 @@ nav ul li ul li a {
     float: none;
   }
   nav ul li a {
-    padding: 15px;
+    padding: 1rem;
-    line-height: 20px;
+    line-height: 1;
-	  padding-left: 25%;
+	  padding-left: 20%;
   }
   nav ul li ul li a {
     padding-left: 30%;
   }
   nav ul li:last-child a {
-    padding-bottom: 60px;
+    padding-bottom: 4rem;
   }
   nav ul li:last-child a {
     box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
@@ -209,25 +213,24 @@ nav ul li ul li a {
   }
 }
 /* Desktop Styles */
-@media screen and (min-width: 961px) {
+@media screen and (min-width: 60.1rem) {
   .nav-list {
     display: block !important;
   }
 }
 #nav-toggle {
   position: absolute;
-  left: 18px;
+  left: 1rem;
-  top: 22px;
+  top: 1rem;
   cursor: pointer;
-  padding: 12px 35px 16px 0px;
+  padding: 1rem 2rem 1rem 0;
 }
 #nav-toggle span,
 #nav-toggle span:before,
 #nav-toggle span:after {
   cursor: pointer;
-  border-radius: 1px;
+  height: 0.1rem;
-  height: 2px;
+  width: 1.6rem;
-  width: 25px;
   background: #39352A;
   position: absolute;
   display: block;
@@ -237,10 +240,10 @@ nav ul li ul li a {
   */
 }
 #nav-toggle span:before {
-  top: -8px;
+  top: -0.5rem;
 }
 #nav-toggle span:after {
-  bottom: -8px;
+  bottom: -0.5rem;
 }
 #nav-toggle.active span {
   background-color: transparent;

homepage/theme/templates/archives.html

@@ -1,18 +1,19 @@
 {% extends "base.html" %}
 
-{% set title = 'Feed' %}
+{% set title = 'Fair analytics blog | Offen' %}
-{% set description = 'Description' %}
+{% set description = 'Developing Offen. A free and open source analytics software for websites and web applications that allows respectful handling of data.' %}
 {% set href = 'blog/' %}
 {% set no_stats = False %}
 {% set template = 'archives' %}
+{% set is_article = 'true' %}
 
 {% block content %}
     {% for article in articles %}
     {% if loop.index != 1 %}
-      <hr>
+      <hr class="mb5 b--none">
     {% endif %}
-    <div class="content bg-red">
+    <div class="w-100 mt5-ns gray">
-      <div class="container-reader">
+      <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
           {{ article.content }}
       </div>
     </div>

homepage/theme/templates/article.html

@@ -7,3 +7,4 @@
 {% set no_stats = article.no_stats %}
 {% set template = article.template %}
 {% set content = article.content %}
+{% set is_article = 'true' %}

homepage/theme/templates/base.html

@@ -18,7 +18,9 @@
   <meta property="og:image" content="{{ SITEURL }}{{ sm_image_url or '/theme/images/offen-logo-social-media.jpg' }}">
   <meta name="twitter:image:alt" content="Offen logo">
   <meta name="twitter:card" content="summary_large_image">
+  {% if template != 'archives' %}
   <link rel="canonical" href="{{ SITEURL }}/{{ href }}">
+  {% endif %}
   <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
   <link rel="stylesheet" href="/theme/css/tachyons.min.css">
   <link rel="stylesheet" href="/theme/css/fix.css">
@@ -69,7 +71,7 @@
 <!-- Content ######################################################### -->
     {% block content %}
       <div class="w-100 mt5-ns gray"> <!-- content -->
-        <div class="mw7 center pt5 pb6 ph3 ph5-ns bg-white">
+        <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
           {{ content }}
         </div>
       </div>
@@ -80,29 +82,31 @@
         <div class="pt3 pb6 ph3" id="bg-cta-bottom">
           <div class="mw8 center">
             <div class="flex flex-wrap justify-around">
-              <div class="w55 mh3 pt5">
+              <div class="w55 mh3 pt5 tc">
                 <h2 class="f25 lh-solid ma0 mb3">
                   Participate
                 </h2>
-                <p class="ma0 mb4">
+                <p class="ma0 mb3">
                   Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
                 </p>
                 <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>
-              <div class="w55 mh3 pt5">
+              {% if is_article != 'true' %}
+              <div class="w55 mh3 pt5 tc">
                 <h2 class="f25 lh-solid ma0 mb3">
                   In the making
                 </h2>
-                <p class="ma0 mb4">
+                <p class="ma0 mb3">
                   Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
                 </p>
                 <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>
-              <div class="w55 mh3 pt5">
+              {% endif %}
+              <div class="w55 mh3 pt5 tc">
                 <h2 class="f25 lh-solid ma0 mb3">
                   Ethical internet
                 </h2>
-                <p class="ma0 mb4">
+                <p class="ma0 mb3">
                   We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
                 </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>

homepage/theme/templates/index.html

@@ -26,7 +26,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">
+          <div class="w55 mh3 pt5 tc">
             <h2 class="f25 lh-solid ma0 mb3">
               <em>Free & Open</em>
             </h2>
@@ -34,7 +34,7 @@
               Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge.
             </p>
           </div>
-          <div class="w55 mh3 pt5">
+          <div class="w55 mh3 pt5 tc">
             <h2 class="f25 lh-solid ma0 mb3">
               <em>Fair & Secure</em>
             </h2>
@@ -42,7 +42,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">
+          <div class="w55 mh3 pt5 tc">
             <h2 class="f25 lh-solid ma0 mb3">
               <em>Easy to use</em>
             </h2>