updates and cleanup

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

@@ -20,18 +20,18 @@ We have further refined the existing application architecture to make it more ro
 
 ### Easy to test drive
 Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon.  
-[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="yellow"} 
+[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="outline"} 
 
 ### Develop without complex setup
 Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running.  
-[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="yellow"}
+[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="outline"}
 
 ### Lightweight and accessible interfaces
 The *Auditorium* is ready for a dry run. It's a functional prototype for accessing and managing user data. We opted for [Choo](https://choo.io/){: target="_blank"} as the application framework and [Tachyons](https://tachyons.io/){: target="_blank"} as the CSS framework.
 
 ### Ready to localize
 You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed.  
-[Get in touch](mailto:hioffen@posteo.de){: data-button="yellow"}
+[Get in touch](mailto:hioffen@posteo.de){: data-button="outline"}
 
 ### Read the docs
 The work on our wiki has started. Including documentation for [developers](https://github.com/offen/offen/wiki/Developing-offen){: target="_blank"} as well as for [website operators](https://github.com/offen/offen/wiki/Running-offen){: target="_blank"} who want to deploy and run Offen.
@@ -46,4 +46,4 @@ We have further hardened and improved the HTTP server that Offen exposes. If you
 
 ### Deep dive
 Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.  
-[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="black"}
+[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="full"}

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

@@ -17,7 +17,7 @@ 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"} 
+[Learn more](https://analytics.offen.dev/){: target="_blank" data-button="outline"} 
 
 ### Accidental leaks don't 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.
@@ -29,11 +29,11 @@ The insight into user behavior has been improved. Still, no sensitive user infor
 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"} 
+[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="outline"} 
 
 ### 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.2/offen-v0.1.0-alpha.2.tar.gz){: 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="outline"}
 
 ### 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 [latest alpha release](https://github.com/offen/offen/releases/latest/){: target="_blank"} in a production environment.
@@ -48,4 +48,4 @@ Currently, the way we store encryption keys securely on the client side does not
 
 ### 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"}
+[Open milestone 2 Pull Request](https://github.com/offen/offen/pull/270){: target="_blank" data-button="full"}

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

@@ -26,10 +26,10 @@ Although we have dug very deep, things may still contain issues. Therefore, we r
 ## Offen v0.1.0-alpha.3
 
 ##### Single binary file for Linux, Windows or MacOS
-[Download](https://get.offen.dev/){: data-button="black"}
+[Download](https://get.offen.dev/){: data-button="full"}
 
 ##### 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"}
+[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master){: target="_blank" data-button-mb5="full"}
 
 Download or deploy Offen today and give it a spin. *[Check our Docs](https://docs.offen.dev/){: target="_blank"} for detailed instructions.*
 
@@ -37,4 +37,4 @@ We appreciate any feedback. No matter if you have difficulties with the installa
 
 We look forward to hearing from you. Happy testing!
 
-[Give feedback](mailto:hioffen@posteo.de){: data-button="yellow"}
+[Give feedback](mailto:hioffen@posteo.de){: data-button="outline"}

homepage/content/articles/0050-milestone-3.md

@@ -19,7 +19,7 @@ Milestone 3 has been completed. This is what we have achieved in the last ten we
 The Auditorium for users is now annotated with explanations of all metrics as well as analytics-specific terms. It also contains an FAQ section. In general, new metrics were added and the UX was refined for users and operators.
 <img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050-explainer.gif"/> 
 These updates are already *up and running in our own instance* for users. Opt in and open the Auditorium.  
-[Check it out](https://analytics.offen.dev/){: target="_blank" data-button="yellow"} 
+[Check it out](https://analytics.offen.dev/){: target="_blank" data-button="outline"} 
 
 ### Working in teams
 If you want to improve your services with transparent and fair web analytics, it is very likely that you collaborate in groups. Therefore, in a first draft we have added basic utilities for managing user logins and accounts. These tools will be further refined during milestone 4.
@@ -33,7 +33,7 @@ Using the command line can be a bit intimidating. This is why we have added an i
 
 ### Verifying download integrity
 Our binaries are now signed with a GPG key. After downloading Offen, you can now check if the binary you want to use is the one we intend to distribute.
-[Learn more](https://docs.offen.dev/running-offen/downloads-distributions/#verifying-the-binaries-signatures){: target="_blank" data-button="yellow"} 
+[Learn more](https://docs.offen.dev/running-offen/downloads-distributions/#verifying-the-binaries-signatures){: target="_blank" data-button="outline"} 
 
 ### Safari now fully supported
 At the end of milestone 2 we noticed problems with the way the Safari browser stores keys. We fixed this by adding a dedicated fallback mechanism. [Give it a try.](https://analytics.offen.dev/){: target="_blank"}
@@ -42,7 +42,7 @@ At the end of milestone 2 we noticed problems with the way the Safari browser st
 Self-hosting is ideal for privacy focused software. Based on free resources, you can now deploy a production ready Offen instance to Heroku in a jiffy. 
 <img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050_oneClickDeploy.gif"/> 
 We are currently working on further 1-click options for platforms such as [DigitalOcean](https://github.com/offen/digitalocean){: target="_blank"} and YunoHost.  
-[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/maste){: target="_blank" data-button="yellow"}
+[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/maste){: target="_blank" data-button="outline"}
 
 ### Happy Birthday to us
 Offen is now [one year old.](https://github.com/offen/offen/commit/3a50763bbd93c9c655fad002e94c340a623ee613){: target="_blank"} We made some progress on our way to develop a self hosted and transparent alternative to established web analytics tools. 
@@ -56,4 +56,4 @@ But it is not yet the time for standing ovations. There is still a lot to be don
 
 ### Deep dive
 Interested in the details? Want to get your hands dirty? Take a look at our code.
-[Open GitHub repo](https://github.com/offen/offen){: target="_blank" data-button="black"}
+[Open GitHub repo](https://github.com/offen/offen){: target="_blank" data-button="full"}

homepage/pelicanconf.py

@@ -50,14 +50,14 @@ PLUGINS = ['decorate_content', 'assets']
 DECORATE_CONTENT = {
     '[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="outline"]': ['b--gray', 'gray'],
-    '[data-button="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
+    '[data-button="full"]': ['cclr-brd-black-mid', 'white', 'cclr-bg-black-mid'],
-    '[data-button-mb5="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
+    '[data-button-mb5="full"]': ['cclr-brd-black-mid', 'white', 'cclr-bg-black-mid'],
     'a': ['link', 'b', 'dim'],
     'a:not([data-button])': ['gray'],
     'h1': ['f2', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'],
     'h2': ['f25', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'],
-    'h3': ['f5', 'normal', 'mt5', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
+    'h3': ['f5', 'normal', 'mt5', 'ma0', 'mb3', '.cclr-fnt-black-mid'],
     'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
     'h5': ['f5', 'b', 'mt4', 'ma0', 'mb1'], # text over button
     'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'], # date
@@ -75,7 +75,8 @@ PATREON_URL = 'https://www.patreon.com/offen'
 LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
 TWITTER_URL = 'https://twitter.com/hioffen'
 RELEASE_DIRECT_URL = 'https://get.offen.dev'
-DOCKER_DIRECT_URL = '#'
+DOCKER_DIRECT_URL = 'https://hub.docker.com/r/offen/offen'
 HEROKU_DIRECT_URL = 'https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master'
+OFFEN_AUDITORIUM_URL = 'https://analytics.offen.dev/'
 
 OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

homepage/theme/static/css/fix.css

@@ -1,10 +1,13 @@
 /* ---------------------------------------------------
-COLORS NEW
+COLORS
 ----------------------------------------------------*/
 /* Yellows */
 .cclr-bg-yellow-mid {
 	 background-color: #F7BF08;
 }
+.cclr-fnt-yellow-mid {
+	 color: #F7BF08;
+}
 .cclr-bg-yellow-bright {
 	 background-color: #FDE28C;
 }
@@ -41,11 +44,6 @@ COLORS NEW
 	 border-color: #39352A;
 }
 
-
-
-
-
-
 /* White */
 .cclr-bg-white-dark {
 	background-color: #f9f7f2;
@@ -58,62 +56,10 @@ COLORS NEW
 }
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-/* ---------------------------------------------------
-COLORS OLD
-----------------------------------------------------*/
-/* Custom Tachyons classes */
-.cclr-mid-yellow {
- background-color: #F7BF08;
-}
-.fnt-cclr-mid-yellow {
-  color: #F7BF08;
-}
-.brd-cclr-mid-yellow {
-  border-color: #F7BF08;
-}
-.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;
-}
-.fnt-cclr-mid-black {
-  color: #39352A;
-}
-.brd-cclr-mid-black {
-  border-color: #39352A;
-}
-.cclr-dark-white {
-  background-color: #f9f7f2;
-}
-
-
 /* ---------------------------------------------------
 LAYOUT
 ----------------------------------------------------*/
-
+/* Menu  */
-/* Menu - UPDATE!!!! */
 .menu {
   width: 100%;
   height: 4rem;  /* Tachyons mt5 */
@@ -122,9 +68,6 @@ LAYOUT
   top: 0;
   right: 0;
 }
-.columns {
-  column-count: 1;
-}
 /* Custom media query */
 @media only screen and (min-width: 60rem) {
   .columns {
@@ -140,17 +83,6 @@ LAYOUT
   }
 }
 
-
-
-/* OLD */
-.w55 {
-	width: 20rem;
-}
-
-
-/* NEW */
-
-
 /* HWidths and heights */
 .wx18 {
 	width: 18rem;
@@ -159,7 +91,6 @@ LAYOUT
 .wx24-metrics {
 	width: 86%;
 }
-
 .hx24 {
 	height: 24rem;
 }
@@ -176,13 +107,11 @@ LAYOUT
 .hx-metrics {
 	height: 100%;
 }
-
 @media only screen and (min-width: 30em) {
 	.wx24,
 	.wx24-metrics {
 		width: 24rem;
 	}
-
 	.hx-try-user {
 		height: 24rem;
 	}
@@ -190,12 +119,10 @@ LAYOUT
 		height: 128rem;
 	}
 }
-
 @media only screen and (min-width: 60em) {
 	.wx24-metrics {
 		width: 100%;
 	}
-
 	.hx-compare-c,
 	.hx-compare-d {
 		height: 50rem;
@@ -205,7 +132,6 @@ LAYOUT
 	}
 }
 
-
 /* Margins an paddings */
 .ptx-feature-2 {
 	padding-top: 9rem;
@@ -214,7 +140,6 @@ LAYOUT
 	padding-top: 18rem;
 }
 
-
 /* Stacking boxes */
 .stackbox-10 img,
 .stackbox-20 img,
@@ -301,11 +226,25 @@ TYPO AND LAYOUT ELEMENTS
 .link:focus {
     outline: none;
 }
+/* index logo */
+.intro-margin-a {
+	margin-top: 0.3rem;
+}
+.intro-margin-b {
+	margin-top: 0.7rem;
+}
+
 /* Break long word on mobile */
 body {
   overflow-wrap: break-word;
   overscroll-behavior: none;
 }
+/* font size iPhone 5 etc */
+@media only screen and (max-width: 20em) {
+	.f5 {
+	    font-size: 0.95rem;
+	}
+}
 /* Custom Tachyons class */
 .f25 {
   font-size: 1.9rem;
@@ -356,18 +295,133 @@ i {
 }
 
 
-
+/* ---------------------------------------------------
-
+IMAGES
-
+----------------------------------------------------*/
-/* ?????? */
+/* Put article image outside of container margins */
-.tracked-min {
+.larger-image {
-	letter-spacing:  .03em;
+  margin-top: -4rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-.intro-margin-a {
+.smaller-image {
-	margin-top: 0.3rem;
+  width: 200px;
+  height: 109px;
+  margin-bottom: -2rem;
 }
-.intro-margin-b {
+.screencast {
-	margin-top: 0.7rem;
+	border: 1px solid #DDDDDD;
+}
+@media only screen and (min-width: 30em) {
+  .larger-image {
+    margin-top: -4rem;
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+  .smaller-image {
+    width: 350px;
+    height: 190px;
+  }
+}
+
+
+/* ---------------------------------------------------
+STACKING IMAGES
+----------------------------------------------------*/
+.bg-feature-1 img,
+.bg-feature-3 img {
+	max-width: none;
+}
+.bg-feature-1 {
+	top: 0;
+	left: -25%;
+	z-index : 400;
+}
+.bg-feature-3 {
+	top: 0;
+	left: -35%;
+	z-index : 410;
+}
+.bg-compare-a-pfeil {
+	top: -10rem;
+	left: 0;
+	z-index : 510;
+}
+.bg-compare-b-smile {
+	top: 17rem;
+	left: 6rem;
+	z-index : 520;
+}
+.bg-compare-c-pfeil {
+	top: -5rem;
+	left: 7rem;
+	z-index : 530;
+}
+.bg-metrics-bulb {
+	top: 8.5rem;
+	left: calc(100% - 10rem);
+	z-index : 550;
+}
+.bg-cta-pfeil {
+	top: -11rem;
+	left: 66%;
+	z-index : 570;
+}
+@media only screen and (min-width: 30em) {
+	.bg-feature-1 {
+		left: calc(50% - 21rem);
+	}
+	.bg-feature-3 {
+		left: calc(50% - 18rem);
+	}
+	.bg-compare-c-pfeil {
+		top: -5rem;
+		left: 10rem;
+	}
+	.bg-metrics-bulb {
+		top: 11rem;
+		left: calc(100% - 30rem);
+		z-index : 550;
+	}
+	.bg-cta-pfeil {
+		top: -12rem;
+		left: 72%;
+	}
+}
+@media only screen and (min-width: 60em) {
+	.bg-feature-1 {
+		left: -50%;
+	}
+	.bg-feature-3 {
+		left: -50%;
+	}
+	.bg-metrics-bulb {
+		top: -3rem;
+		left: calc(100% - 20rem);
+	}
+	.bg-cta-pfeil {
+		top: -12rem;
+		left: 66%;
+	}
+}
+
+
+/* ---------------------------------------------------
+BACKROUND IMAGES
+----------------------------------------------------*/
+#bg-feature-2 {
+  background: url(/theme/images/gfx-feature-2.png) center;
+	background-repeat: no-repeat;
+	background-size: 640px 480px;
+	transform: rotate(180deg);
+}
+#bg-pattern {
+  background: url(/theme/images/gfx-bg-pattern.svg) 8rem 2rem;
+}
+#bg-explainer {
+  background:
+		url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,
+		url(/theme/images/gfx-bg-explainer.svg) bottom center repeat-x;
 }
 
 
@@ -533,139 +587,3 @@ nav ul li ul li a {
 #nav-toggle.active span:after {
   transform: rotate(-45deg);
 }
-
-
-/* ---------------------------------------------------
-IMAGES
-----------------------------------------------------*/
-/* Put article image outside of container margins */
-.larger-image {
-  margin-top: -4rem;
-  margin-left: -1rem;
-  margin-right: -1rem;
-}
-.smaller-image {
-  width: 200px;
-  height: 109px;
-  margin-bottom: -2rem;
-}
-.screencast {
-	border: 1px solid #DDDDDD;
-}
-/* Custom media query - extra small */
-@media only screen and (min-width: 30em) {
-  .larger-image {
-    margin-top: -4rem;
-    margin-left: -4rem;
-    margin-right: -4rem;
-  }
-  .smaller-image {
-    width: 350px;
-    height: 190px;
-  }
-}
-
-
-/* ---------------------------------------------------
-STACKING IMAGES
-----------------------------------------------------*/
-.bg-feature-1 img,
-.bg-feature-3 img {
-	max-width: none;
-}
-.bg-feature-1 {
-	top: 0;
-	left: -25%;
-	z-index : 400;
-}
-.bg-feature-3 {
-	top: 0;
-	left: -35%;
-	z-index : 410;
-}
-
-.bg-compare-a-pfeil {
-	top: -10rem;
-	left: 0;
-	z-index : 510;
-}
-.bg-compare-b-smile {
-	top: 17rem;
-	left: 6rem;
-	z-index : 520;
-}
-.bg-compare-c-pfeil {
-	top: -5rem;
-	left: 7rem;
-	z-index : 530;
-}
-.bg-metrics-bulb {
-	top: 8.5rem;
-	left: calc(100% - 10rem);
-	z-index : 550;
-}
-.bg-cta-pfeil {
-	top: -11rem;
-	left: 66%;
-	z-index : 570;
-}
-
-@media only screen and (min-width: 30em) {
-	.bg-feature-1 {
-		left: calc(50% - 21rem);
-	}
-	.bg-feature-3 {
-		left: calc(50% - 18rem);
-	}
-	.bg-compare-c-pfeil {
-		top: -5rem;
-		left: 10rem;
-	}
-	.bg-metrics-bulb {
-		top: 11rem;
-		left: calc(100% - 30rem);
-		z-index : 550;
-	}
-	.bg-cta-pfeil {
-		top: -12rem;
-		left: 72%;
-	}
-}
-
-@media only screen and (min-width: 60em) {
-	.bg-feature-1 {
-		left: -50%;
-	}
-	.bg-feature-3 {
-		left: -50%;
-	}
-	.bg-metrics-bulb {
-		top: -3rem;
-		left: calc(100% - 20rem);
-	}
-	.bg-cta-pfeil {
-		top: -12rem;
-		left: 66%;
-	}
-}
-
-
-/* ---------------------------------------------------
-BACKROUND IMAGES
-----------------------------------------------------*/
-#bg-feature-2 {
-  background: url(/theme/images/gfx-feature-2.png) center;
-	background-repeat: no-repeat;
-	background-size: 640px 480px;
-	transform: rotate(180deg);
-}
-
-#bg-pattern {
-  background: url(/theme/images/gfx-bg-pattern.svg) 8rem 2rem;
-}
-
-#bg-explainer {
-  background:
-		url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,
-		url(/theme/images/gfx-bg-explainer.svg) bottom center repeat-x;
-}

homepage/theme/static/images/temp.svg

@@ -1,3 +0,0 @@
-<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="22.5" cy="22.5" r="22.5" fill="#C4C4C4"/>
-</svg>

homepage/theme/templates/archives.html

@@ -5,7 +5,7 @@
 {% set href = 'blog/' %}
 {% set no_stats = False %}
 {% set template = 'archives' %}
-{% set is_article = 'true' %}
+{% set cta_1 = 'true' %}
 
 {% block content %}
     {% for article in articles %}

homepage/theme/templates/article.html

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

homepage/theme/templates/base.html

@@ -32,36 +32,36 @@
   {% endif %}
 </head>
 {% endblock %}
-<body class="{{ template }} f5 rubik lh-copy fnt-cclr-mid-black cclr-mid-black">
+<body class="{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid">
-  <div class="cclr-dark-white">
+  <div class="cclr-bg-white-dark">
-    <div class="menu w-100 cclr-mid-yellow">
+    <div class="menu w-100 cclr-bg-yellow-mid">
       <section class="nav-bar">
         <div class="nav-container">
           <div class="icon flex">
             <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' %}
+          {% if funnel != 'true' %}
           <nav>
             <div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
             <ul class="nav-list">
               <li>
-                <a class="b link dim fnt-cclr-mid-black" href="/">Summary</a>
+                <a class="b link dim cclr-fnt-black-mid" href="/">Summary</a>
               </li>
               <li>
-                <a class="b link dim fnt-cclr-mid-black" href="/deep-dive/">Deep dive</a>
+                <a class="b link dim cclr-fnt-black-mid" href="/deep-dive/">Deep dive</a>
               </li>
               <li>
-                <a class="b link dim fnt-cclr-mid-black" href="/blog/">Status</a>
+                <a class="b link dim cclr-fnt-black-mid" href="/blog/">Blog</a>
               </li>
               <li>
-                <a class="b link dim fnt-cclr-mid-black" href="/about/">About</a>
+                <a class="b link dim cclr-fnt-black-mid" href="/about/">About</a>
               </li>
               <li>
-                <a class="b link dim fnt-cclr-mid-black" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
+                <a class="b link dim cclr-fnt-black-mid" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
               </li>
               <li>
-                <a class="b link dim fnt-cclr-mid-black" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
+                <a class="b link dim cclr-fnt-black-mid" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
               </li>
               <li>
                 <a class="b link dim" href="/get-started/">Get started</a>
@@ -82,39 +82,45 @@
 
       {% if funnel != 'true' %}
       {% block outro %}
-        <div class="w-100 cclr-mid-yellow">
+        <div class="w-100 cclr-bg-yellow-mid">
-          <div class="pt3 pb4 ph3" id="bg-cta-bottom">
+          <div class="pt3 pb4 ph3" id="bg-pattern">
             <div class="mw8 center">
-              <div class="flex flex-wrap justify-center pt3">
+              <div class="flex flex-wrap justify-center tc pt3">
-                <div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
+
+                {% if cta_2 != 'true' %}
+                <div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Participate
                   </h2>
                   <p class="ma0 mb3">
-                    Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
+                    Audit our open source code and feel free to make a contribution.
                   </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>
+                  <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
                 </div>
-                {% if is_article != 'true' %}
+                {% endif %}
-                <div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
+
+                {% if cta_1 != 'true' %}
+                <div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     In the making
                   </h2>
                   <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.
+                    Discover what is already up and running and where we want to go.
                   </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>
+                  <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/">Open blog</a>
                 </div>
                 {% endif %}
-                <div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
+
+                <div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
                   <h2 class="f25 normal lh-solid ma0 mb3">
                     Ethical internet
                   </h2>
                   <p class="ma0 mb3">
-                    We're working hard to ensure that Offen is independent and can be sustained for years to come.
+                    Help to ensure that Offen is independent and can be sustained.
                   </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>
+                  <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
                 </div>
+
               </div>
             </div>
           </div>
@@ -122,11 +128,11 @@
       {% endblock %}
       {% endif %}
       {% if funnel != 'true' %}
-      <div class="w-100 cclr-mid-black gray ph4 pb4">
+      <div class="w-100 cclr-bg-black-mid 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">
+          <div class="w-25-l mt3 mr3 cclr-fnt-yellow-mid">
             <p class="ma0">
-              <a class="b link dim fnt-cclr-mid-yellow" href="/">Offen</a>
+              <a class="b link dim cclr-fnt-yellow-mid" href="/">Offen</a>
             </p>
             <p class="ma0">Transparent web analytics</p>
             <p class="ma0">for everyone</p>
@@ -139,6 +145,9 @@
               <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="/blog/">Blog</a>
+            </p>
+            <p class="ma0">
               <a class="link b dim gray" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
             </p>
             <p class="ma0">
@@ -165,14 +174,13 @@
         </div>
       </div>
       {% else %}
-      <div class="w-100 cclr-mid-mint ph4 pb4">
+      <div class="w-100 cclr-bg-mint-mid ph4 pb4">
         <div id="bg-pattern">
 
-
           <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">
+            <div class="w-25-l mt3 mr3 cclr-fnt-black-mid">
               <p class="ma0">
-              <a class="b link dim fnt-cclr-mid-black" href="/">Offen</a>
+                <a class="b link dim cclr-fnt-black-mid" href="/">Offen</a>
               </p>
               <p class="ma0">Transparent web analytics</p>
               <p class="ma0">for everyone</p>
@@ -186,8 +194,6 @@
             </div>
           </div>
 
-
-
         </div>
       </div>
       {% endif %}

homepage/theme/templates/getstarted.html

@@ -1,5 +1,4 @@
 {% extends "page.html" %}
-
 {% set funnel = 'true' %}
 
 {% block content %}
@@ -12,7 +11,7 @@
         Get started
       </h2>
       <h3 class="f25 f2-ns normal ma0 mb5 mh6-ns">
-        Choose your favorite way to self host Offen.
+        Choose your favorite way to self host Offen
       </h3>
 
       <div class="flex flex-column items-center">
@@ -22,17 +21,16 @@
         <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
 
         <p class="lh-title ma0 mb2 gray">
-          Your own instance in Docker <br>development environment
+          Offen as a lightweight<br> Docker image
         </p>
-        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ DOCKER_DIRECT_URL }}" rel="noopener">Deploy with Docker</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ DOCKER_DIRECT_URL }}" target="_blank" rel="noopener">Deploy with Docker</a>
 
         <p class="lh-title ma0 mb2 gray">
           Your own instance on Heroku
         </p>
-        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" rel="noopener">Deploy to Heroku</a>
+        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" target="_blank" rel="noopener">Deploy to Heroku</a>
       </div>
 
-
       <p class="tc ma0 mb4 mh5-ns gray">
         Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
       </p>
@@ -40,17 +38,18 @@
       <hr class="ma0 mb5 b--black-05">
 
       <h3 class="f25 normal ma0 mb5">
-        Read the docs.
+        Read the docs
       </h3>
       <div class="flex flex-column items-center">
         <p class="lh-title ma0 mb2 gray">
           Details on how to<br> install and run Offen
         </p>
-        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" 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 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="https://docs.offen.dev/" target="_blank" rel="noopener">Open Docs</a>
       </div>
 
     </div>
 
   </div>
 </div>
+
 {% endblock %}

homepage/theme/templates/index.html

@@ -23,13 +23,14 @@
             Offen is a fair alternative to common web analytics tools. <span>Pay respect to your users while gaining insight into their behavior. </span>Self hosted, open source and free.
           </p>
           <div class="pb5 mb2">
-            <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#bg-explainer" rel="noopener">Learn more</a>
+            <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="#bg-explainer" rel="noopener">Learn more</a>
           </div>
         </div>
       </div>
     </div>
   </div>
 
+<!-- FEATURE -->
   <div class="w-100 overflow-hidden cclr-bg-mint-mid">
     <div id="bg-pattern">
 
@@ -99,9 +100,6 @@
     </div>
   </div>
 
-
-
-
 <!-- INSIGHTS -->
   <div class="w-100 dib bg-white">
     <div class="tc mh4">
@@ -123,8 +121,6 @@
       <!-- COMPARE A -->
       <div class="w-50-l w-100 cclr-bg-yellow-mid">
 
-
-
         <div class="w-100 dib">
           <div class="wx24 center">
 
@@ -166,7 +162,6 @@
           </div>
         </div>
 
-
       </div>
 
       <!-- COMPARE B -->
@@ -294,8 +289,6 @@
         <div class="w-100 hx-compare-d dib cclr-bg-white-fade">
           <div class="h-100" id="bg-pattern">
 
-
-
             <div class="wx24 center">
               <p class="f25 lh-solid ma0 mt5 mb4">
                 <em class="em-mint-2">
@@ -343,7 +336,6 @@
 
             </div>
 
-
           </div>
         </div>
 
@@ -396,7 +388,7 @@
               <i>Offen is installed on this website. Access</i> your actual usage data <i>now.</i>
             </p>
             <div class="mt4">
-              <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
+              <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ OFFEN_AUDITORIUM_URL }}" target="_blank" rel="noopener">Open Auditorium</a>
               <img src="/theme/images/gfx-compare-f-scribble.png" alt="smile" width="300px" height="100px">
             </div>
           </div>
@@ -418,7 +410,6 @@
               </div>
             </div>
 
-
             <p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
               <em>
                 Essential metrics
@@ -492,7 +483,6 @@
         </div>
       </div>
 
-
     </div>
   </div>
 
@@ -513,29 +503,20 @@
           <div class="flex flex flex-wrap justify-center">
             <div class="mw5 mb5 mh0 mh4-ns">
               <p class="tc f5 ma0 mb3 gray mh4">
-                Test drive Offen on your system today.
+                Test drive Offen on your system today
               </p>
-              <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/try-demo/" rel="noopener">Try demo</a>
+              <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/try-demo/" rel="noopener">Try demo</a>
             </div>
             <div class="mw5 mb7 mh0 mh4-ns">
               <p class="tc f5 ma0 mb3 mh4">
-                All you need to use Offen in production.
+                All you need to use Offen in production
               </p>
-              <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
+              <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
             </div>
           </div>
       </div>
     </div>
 
-
-
-
-
-
-
-
-
-
 {% endblock %}
 
 {% block outro %}

homepage/theme/templates/page.html

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

homepage/theme/templates/trydemo.html

@@ -1,5 +1,4 @@
 {% extends "page.html" %}
-
 {% set funnel = 'true' %}
 
 {% block content %}
@@ -12,11 +11,11 @@
         Try demo
       </h2>
       <h3 class="f25 f2-ns normal tc ma0 mb5">
-        Test drive Offen on your system.
+        Test drive Offen on your system
       </h3>
 
       <p class="lh-title ma0 mb3 gray">
-        Open your terminal and type:
+        Open your terminal and type
       </p>
       <div class="flex flex-column items-center">
         <div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
@@ -27,7 +26,7 @@
       </div>
 
       <p class="lh-title ma0 mb3 gray">
-        With Docker use:
+        With Docker use
       </p>
       <div class="flex flex-column items-center">
         <div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
@@ -40,7 +39,7 @@
       <hr class="ma0 mb5 b--black-05">
 
       <h3 class="f25 normal tc ma0 mb5">
-        Read the docs.
+        Read the docs
       </h3>
       <div class="flex flex-column items-center">
         <p class="lh-title tc ma0 mb2 gray">
@@ -53,4 +52,5 @@
 
   </div>
 </div>
+
 {% endblock %}