Merge pull request #26 from offen/css-revise

update CSS to Tachyons

build/robots.txt.production

@@ -2,3 +2,5 @@ User-agent: *
 Disallow: /vault/
 Disallow: /auditorium/
 Disallow: /legal-notice/
+
+Sitemap: /sitemap.xml

homepage/content/articles/milestone-1.md

@@ -5,35 +5,34 @@ slug: laying-foundation-for-fair-web-analytics
 sitemap_priority: 0.7
 sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
 
-![Milestone 1 - Laying the foundation for fair web analytics](/theme/images/offen-blog-0010-milestone1.jpg){:class="image-text-600-322"}
+<figure class="larger-image mb5">
+<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
+###### 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.
 
+---
+
 ### Extension through middleware
 We have further refined the existing application architecture to make it more robust and accessible to both contributors and people who want to build upon Offen. As a developer, you can transparently control additional behavior by adding or removing middleware.
 
 ### 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.  
-<div class="btn-wrapper-article">
+[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="yellow"} 
-<a class="btn btn-color-yellow" target="_blank" href="https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz">Download binary</a>
-</div>
 
 ### 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.  
-<div class="btn-wrapper-article">
+[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="yellow"}
-<a class="btn btn-color-yellow" target="_blank" href="https://github.com/offen/offen/wiki/Developing-offen#setup">Open wiki</a>
-</div>
 
 ### 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.  
-<div class="btn-wrapper-article">
+[Get in touch](mailto:hioffen@posteo.de){: data-button="yellow"}
-<a class="btn btn-color-yellow" href="mailto:hioffen@posteo.de">Get in touch</a>
-</div>
 
 ### 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.
@@ -48,6 +47,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.  
-<div class="btn-wrapper-article">
+[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="black"}
-<a class="btn btn-color-black" target="_blank" href="https://github.com/offen/offen/pull/192">Open milestone 1 pull</a>
-</div>

homepage/content/pages/about.md

@@ -12,15 +12,18 @@ Offen is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendr
 [hendrik-niefeld]: http://niefeld.com/
 [frederik-ring]: https://www.frederikring.com/
 
-[![NLnet Foundation](/theme/images/nlnet-logo.svg){:width="160px" height="60px" class="image-text-custom"}](https://nlnet.nl/){: target="_blank"}
+[![NLnet Foundation](/theme/images/nlnet-logo.svg){:width="160px" height="60px" class="mt4"}](https://nlnet.nl/){: target="_blank"}
 
 We are happy to work with [NLnet Foundation][nlnet-foundation]{: target="_blank"} who complement our activities within their [Next Generation Internet][next-generation-internet]{: target="_blank"} initiative.
 
 [nlnet-foundation]: https://nlnet.nl/
 [next-generation-internet]: https://nlnet.nl/NGI/
 
+---
+
 ### Contact
 
 *Feel free to contact us with any kind of feedback.* From criticism and praise to contributions or support, everything is welcome. Get in touch.
 
-[hioffen@posteo.de](mailto:hioffen@posteo.de) [[GPG Key]](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"}
+[hioffen@posteo.de](mailto:hioffen@posteo.de)  
+[Email GPG Key](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"}

homepage/content/pages/index.md

@@ -4,16 +4,10 @@ save_as: index.html
 template: index
 sitemap_priority: 1.0
 
-## Summary
+Offen is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also _the users themselves are granted access to and ownership of their data._
 
-Offen is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also *the users themselves are granted access to and ownership of their data*.
+Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details _which kind of data is not collected._ All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
 
-Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details *which kind of data is not collected*. All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
+Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make _autonomous and informed decisions regarding the use of their data._ Operators are enabled to gain insights while respecting their users' privacy and data.
 
-Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and data.
+Offen is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can _visit the [auditorium](/auditorium/)_ to access your data.
-
-Offen is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can *visit the [auditorium](/auditorium/)* to access your data.
-
-<div class="btn-wrapper">
-<a class="btn btn-color-yellow" href="/deep-dive/">Deep dive</a>
-</div>

homepage/pelicanconf.py

@@ -47,8 +47,19 @@ PLUGIN_PATHS = ['./plugins']
 PLUGINS = ['decorate_content', 'assets']
 
 DECORATE_CONTENT = {
-    # maps any CSS selector to a list of classes to be added
+    '[data-button]': ['dib', 'mv3', 'ph4', 'pv2', 'b--solid', 'bw2'],
-    # 'p': ['pv0', 'dim']
+    '[data-button="yellow"]': ['brd-cclr-mid-yellow', 'fnt-cclr-mid-yellow'],
+    '[data-button="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
+    'a': ['link', 'b', 'dim'],
+    'a:not([data-button])': ['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', 'ma0', 'mb3', 'light-silver'],
+    'p': ['ma0', 'pb3'],
+    'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
+    'hr': ['mt5', 'mb3', 'b--black-05']
 }
 
 GITHUB_ORG = 'https://github.com/offen'

homepage/plugins/decorate_content/decorate_content.py

@@ -22,7 +22,7 @@ def content_object_init(instance):
         soup = BeautifulSoup(instance._content, "html.parser")
 
         for selector, class_names in settings.items():
-            elems = soup.find_all(selector)
+            elems = soup.select(selector)
             for elem in elems:
                 elem["class"] = elem.get("class", []) + class_names
 

homepage/theme/static/css/fix.css

@@ -0,0 +1,305 @@
+/* ---------------------------------------------------
+COLORS
+----------------------------------------------------*/
+/* Custom Tachyons classes */
+.cclr-mid-yellow {
+ background-color: #F7BF08;
+}
+.fnt-cclr-mid-yellow {
+  color: #F7BF08;
+}
+.brd-cclr-mid-yellow {
+  border-color: #F7BF08;
+}
+.cclr-bright-yellow {
+  background-color: #fde28c;
+}
+.cclr-mid-mint {
+  background-color: #BBD9D3;
+}
+.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 {
+  width: 100%;
+  height: 4rem;  /* Tachyons mt5 */
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  right: 0;
+}
+.columns {
+  column-count: 1;
+}
+/* Custom media query */
+@media only screen and (min-width: 60rem) {
+  .columns {
+    column-count: 2;
+    column-gap: 4em;
+    column-rule: 0.18rem solid rgba(0,0,0,.05);
+  }
+}
+/* Custom media query - extra small */
+@media only screen and (max-width: 29.99em) {
+  .menu {
+    position: static;
+  }
+}
+/* Custom Tachyons class */
+.w55 {
+  width: 18.5rem;
+}
+/* Custom media query - extra small */
+@media only screen and (max-width: 30em) {
+  .w55 {
+    width: 100%;
+  }
+}
+
+
+
+/* ---------------------------------------------------
+TYPO AND LAYOUT ELEMENTS
+----------------------------------------------------*/
+.link:focus {
+    outline: none;
+}
+/* Break long word on mobile */
+body {
+  overflow-wrap: break-word;
+  overscroll-behavior: none;
+  /* overscroll color */
+  background-color: #39352A;
+}
+/* Custom Tachyons class */
+.f25 {
+  font-size: 1.9rem;
+}
+span {
+  display: table;
+}
+/* Custom media query - medium small - neutralize span line braks */
+@media only screen and (max-width: 34em) {
+  p span {
+    display: initial;
+  }
+}
+em {
+  background: linear-gradient(transparent 66%, #fde28c 66%);
+  font-style: normal;
+}
+hr {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+
+
+/* ---------------------------------------------------
+MENU
+----------------------------------------------------*/
+.nav-list {
+  margin: 0 0.7rem 0 0;
+}
+.nav-bar {
+  height: 4rem;
+}
+.icon {
+  position: absolute;
+  padding: 0.7rem 0 0 1.2rem;
+  float: left;
+}
+body.index .icon {
+  opacity: 0;
+}
+.nav-container {
+  margin: 0 auto;
+}
+nav {
+  float: right;
+}
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+nav ul li {
+  float: left;
+  position: relative;
+}
+nav ul li a,
+nav ul li a:visited {
+  display: block;
+  padding: 0 1.4rem;
+  line-height: 4rem;
+  text-decoration: none;
+  font-weight: 700;
+  background: #F7BF08;
+  color: #39352A;
+}
+nav ul li a:hover,
+nav ul li a:visited:hover {
+  color: #39352A;
+}
+nav ul li a:not(:only-child):after,
+nav ul li a:visited:not(:only-child):after {
+  padding-left: 0.4rem;
+  content: ' ▾';
+}
+nav ul li ul li {
+  min-width: 10rem;
+}
+nav ul li ul li a {
+  padding: 1rem;
+  line-height: 1.5rem;
+}
+.nav-dropdown {
+  position: absolute;
+  display: none;
+  z-index: 1;
+}
+.nav-mobile {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: #F7BF08;
+  height: 4rem;
+  width: 4rem;
+}
+/* Custom media query */
+@media only screen and (max-width: 60rem) {
+  .nav-list {
+    margin: 0;
+  }
+  .nav-mobile {
+    display: block;
+  }
+  nav {
+    width: 100%;
+    padding: 0;
+    padding-top: 4rem;
+  }
+  nav ul {
+    display: none;
+  }
+  nav ul li {
+    float: none;
+  }
+  nav ul li a {
+    padding: 1rem;
+    line-height: 1;
+	  padding-left: 20%;
+  }
+  nav ul li ul li a {
+    padding-left: 30%;
+  }
+  nav ul li:last-child a {
+    padding-bottom: 4rem;
+  }
+  nav ul li:last-child a {
+    box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
+  }
+  .nav-dropdown {
+    position: static;
+  }
+}
+/* Desktop Styles */
+@media screen and (min-width: 60.1rem) {
+  .nav-list {
+    display: block !important;
+  }
+}
+#nav-toggle {
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+  cursor: pointer;
+  padding: 1rem 2rem 1rem 0;
+}
+#nav-toggle span,
+#nav-toggle span:before,
+#nav-toggle span:after {
+  cursor: pointer;
+  height: 0.1rem;
+  width: 1.6rem;
+  background: #39352A;
+  position: absolute;
+  display: block;
+  content: '';
+  /*
+  transition: all 300ms ease-in-out;
+  */
+}
+#nav-toggle span:before {
+  top: -0.5rem;
+}
+#nav-toggle span:after {
+  bottom: -0.5rem;
+}
+#nav-toggle.active span {
+  background-color: transparent;
+}
+#nav-toggle.active span:before, #nav-toggle.active span:after {
+  top: 0;
+}
+#nav-toggle.active span:before {
+  transform: rotate(45deg);
+}
+#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;
+}
+/* Custom media query - extra small */
+@media only screen and (min-width: 30em) {
+  .larger-image {
+    margin-top: -4rem;
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+}
+
+
+/* ---------------------------------------------------
+GRAPHICS
+----------------------------------------------------*/
+#bg-intro {
+  background: url(/theme/images/gfx-intro.svg) no-repeat center;
+}
+#bg-feature {
+  background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
+}
+#bg-cta-top {
+  background: url(/theme/images/gfx-object-white.svg) center;
+}
+#bg-outro {
+  background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
+}
+#bg-cta-bottom {
+  background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
+}
+

homepage/theme/static/css/fonts.css

@@ -1,31 +1,25 @@
+/* rubik-regular - latin */
 @font-face {
-	font-family: 'Noto Sans';
+  font-family: 'Rubik';
-	font-weight: 400;
+  font-display: swap;
   font-style: normal;
-	src: url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot");
-	src: url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.eot?#iefix") format("embedded-opentype"), local("Noto Sans"), local("Noto-Sans-400"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.woff") format("woff"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-400/Noto-Sans-400.svg#NotoSans") format("svg")
-}
-
-@font-face {
-	font-family: 'Noto Sans';
-	font-weight: 700;
-	font-style: normal;
-	src: url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot");
-	src: url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold"), local("Noto-Sans-700"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.woff") format("woff"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans") format("svg")
-}
-
-@font-face {
-	font-family: 'Noto Sans';
   font-weight: 400;
-	font-style: italic;
+  src: local('Rubik'), local('Rubik-Regular'),
-	src: url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot");
+       url('../fonts/rubik-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-	src: url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Italic"), local("Noto-Sans-italic"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.woff") format("woff"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans") format("svg")
+       url('../fonts/rubik-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/rubik-v9-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
 }
-
+/* rubik-700 - latin */
 @font-face {
-	font-family: 'Noto Sans';
+  font-family: 'Rubik';
+  font-display: swap;
+  font-style: normal;
   font-weight: 700;
-	font-style: italic;
+  src: local('Rubik Bold'), local('Rubik-Bold'),
-	src: url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot");
+       url('../fonts/rubik-v9-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-	src: url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix") format("embedded-opentype"), local("Noto Sans Bold Italic"), local("Noto-Sans-700italic"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2") format("woff2"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff") format("woff"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf") format("truetype"), url("/theme/fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans") format("svg")
+       url('../fonts/rubik-v9-latin-500.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/rubik-v9-latin-500.ttf') format('truetype'); /* Safari, Android, iOS */
+}
+.rubik {
+  font-family: Rubik, sans-serif;
 }

homepage/theme/static/css/normalize.css

@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

homepage/theme/static/css/style.scss

@@ -1,612 +0,0 @@
-
-
-/* ---------------------------------------------------
-ROOTS
-----------------------------------------------------*/
-$yellow-mid: #F7BF08;
-$yellow-bright: #fde28c;
-$mint-mid: #BBD9D3;
-$black-mid: #39352A;
-$grey-mid: #898989;
-$grey-bright: #D5D5D5;
-$white: #FFF;
-
-
-/* ---------------------------------------------------
-BASICS
-----------------------------------------------------*/
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-
-/* ---------------------------------------------------
-LAYOUT & SPACER
-----------------------------------------------------*/
-.menu {
-  width: 100%;
-  height: 70px;
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  background-color: $yellow-mid;
-}
-.intro {
-  width: 100%;
-  margin: 70px 0 0 0;
-  background-color: $yellow-mid;
-}
-.feature {
-  width: 100%;
-}
-.cta-top {
-  width: 100%;
-  color: $yellow-mid;
-}
-.content {
-  width: 100%;
-  margin: 70px 0 0 0;
-  background-color: $white;
-}
-.content-index {
-  width: 100%;
-  background-color: $white;
-}
-.cta-bottom,
-.outro {
-  width: 100%;
-}
-.footer {
-  width: 100%;
-  min-height: 300px;
-  color: $grey-mid;
-  background-color: $black-mid;
-}
-.spacer-intro {
-  width: 430px;
-}
-.spacer-right {
-  width: 400px;
-  margin: 0 0 0 auto;
-}
-/* Desktop Styles */
-@media only screen and (min-width: 961px) {
-  .container-full {
-    padding: 60px 0 120px 0;
-  }
-  .container-reader {
-    width: 600px;
-    margin: 0 auto;
-    padding: 60px 0 120px 0;
-  }
-  .footer {
-    padding: 40px 40px 0 40px;
-  }
-}
-/* Mobile Styles */
-@media only screen and (min-width: 600px) and (max-width: 960px) {
-  .container-reader {
-    width: 600px;
-    margin: 0 auto;
-  }
-}
-@media only screen and (max-width: 960px) {
-  .container-reader,
-  .container-full,
-  .footer {
-    padding: 60px 20px 120px 20px;
-  }
-}
-/* Mobile Styles*/
-@media only screen and (max-width: 480px) {
-  .menu {
-    position: static;
-  }
-  .intro {
-    margin: 0;
-  }
-  .content {
-    margin: 0;
-  }
-  .spacer-intro {
-    width: 300px;
-  }
-  .spacer-right {
-    width: 100%;
-    margin: 0;
-  }
-}
-
-
-/* ---------------------------------------------------
-CARDS
-----------------------------------------------------*/
-.card-deck,
-.card,
-.footer-card-deck {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.card {
-  flex-direction: column;
-  width: 280px;
-  color: $black-mid;
-}
-.card h2,
-.card p {
-  text-align: center;
-}
-.footer-card p {
-  margin: 0 0 2px 0;
-}
-.footer-card:nth-child(1),
-.footer-card:nth-child(3) {
-  margin: 0 0 20px 0;
-}
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-  .card-deck,
-  .footer-card-deck {
-    flex-direction: column;
-  }
-  .card-deck {
-    justify-content: center;
-  }
-  .card {
-    margin: 0 auto;
-  }
-  .card:nth-child(2) {
-    margin: 100px auto 100px auto;
-  }
-  .footer-card {
-    text-align: center;
-  }
-}
-/* Desktop Styles */
-@media only screen and (min-width: 961px) {
-  .card-deck,
-  .footer-card-deck {
-    flex-direction: row;
-  }
-  .card-deck {
-    justify-content: center;
-  }
-  .card:nth-child(2) {
-    margin: 0 50px 0 50px;
-  }
-  .footer-card-deck {
-    justify-content: space-between;
-  }
-  .footer-card:nth-child(1),
-  .footer-card:nth-child(2),
-  .footer-card:nth-child(3) {
-    flex-grow: 1;
-  }
-  .footer-card:nth-child(4) {
-    text-align: right;
-    flex-grow: 8;
-  }
-}
-
-
-/* ---------------------------------------------------
-TYPO
-----------------------------------------------------*/
-body {
-  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 400;
-  word-wrap: break-word;
-  color: $grey-mid;
-  background-color: $black-mid; // overscroll color
-}
-h1,
-h2 {
-  font-weight: 700;
-  line-height: 1.3;
-  color: $black-mid;
-}
-h3,
-h4 {
-  font-size: 14px;
-  font-weight: 400;
-  color: $black-mid;
-}
-h3 {
-  margin: 0 0 20px 0;
-}
-p + h3 {
-  margin: 60px 0 20px 0;
-}
-h4 {
-  color: $grey-mid;
-}
-/* Desktop Styles */
-@media only screen and (min-width: 481px) {
-  h1,
-  h2{
-    font-size: 30px;
-  }
-  h1 {
-    margin: 20px 0 10px 0;
-  }
-}
-/* Mobile Styles */
-@media only screen and (max-width: 480px) {
-  h1,
-  h2 {
-    font-size: 22px;
-  }
-}
-@media only screen and (max-width: 330px) {
-  .spacer-intro {
-      width: 250px;
-  }
-}
-
-/* ---------------------------------------------------
-LINKS
-----------------------------------------------------*/
-a,
-a:hover,
-a:focus {
-  color: $grey-mid;
-  text-decoration: none;
-}
-p a,
-p a:hover,
-p a:focus {
-  font-weight: 700;
-}
-ol li p a,
-ol li p a:hover,
-ol li p a:focus {
-color: $grey-bright;
-}
-
-
-/* ---------------------------------------------------
-TYPO ELEMENTS
-----------------------------------------------------*/
-h1 + p {
-  color: $black-mid;
-}
-.bg h2 {
-  margin: 0 0 10px 0;
-}
-#bg-cta-top h2,
-#bg-cta-top p,
-#bg-cta-top .btn-wrapper,
-#bg-outro h2,
-#bg-outro p,
-#bg-outro .btn-wrapper {
-  text-align: right;
-}
-#bg-cta-bottom .btn-wrapper {
-  text-align: center;
-}
-#bg-cta-top h2,
-#bg-cta-top p {
-  color: $white;
-}
-#bg-outro h2,
-#bg-outro p {
-  color: $black-mid;
-}
-strong,
-h1 + p strong,
-.bg strong {
-  font-weight: 700;
-}
-.container-reader h2 {
-  margin: 0 0 20px 0;
-  color: $grey-bright;
-}
-strong,
-h3 strong {
-  text-decoration: none;
-  font-weight: 400;
-  color: $black-mid;
-}
-.cta-top strong {
-  color: $white;
-}
-.content-index p,
-.content p {
-  margin: 0 0 20px 0;
-}
-hr {
-  height: 0;
-  margin: 80px 0 20px 0;
-  border-top: 1px solid $grey-bright;
-}
-blockquote {
-  margin: 0;
-  padding: 0 0 0 20px;
-  font-style: italic;
-  border-left: 1px solid $grey-bright;
-}
-ol {
-  padding-inline-start: 20px;
-}
-em {
-  background: linear-gradient(transparent 66%, $yellow-bright 66%);
-  font-style: normal;
-}
-.footer-card h3 strong {
-  font-weight: 700;
-  color: $yellow-mid;
-}
-.footer h3,
-.footer h4 {
-  color: $yellow-mid;
-  margin: 0 0 2px 0;
-}
-.footnote {
-  color: $grey-bright;
-}
-/* reposition for fixed menu */
-.footnote li {
-  margin-top: -75px;
-  padding-top: 75px;
-}
-
-
-/* ---------------------------------------------------
-BUTTONS
-----------------------------------------------------*/
-.btn-wrapper {
-  margin: 40px 0 0 0;
-}
-.btn-wrapper-article {
-  margin: 30px 0 80px 0;
-}
-.btn {
-  border-radius: 0px;
-  padding: 8px 30px;
-  text-align: center;
-  text-decoration: none;
-}
-.btn-color-yellow,
-.btn-color-yellow:visited,
-.btn-color-yellow:link,
-.btn-color-yellow:hover,
-.btn-color-yellow:active {
-  font-weight: 700;
-  color: $yellow-mid;
-  border: solid $yellow-mid 5px;
-}
-.btn-color-black,
-.btn-color-black:visited,
-.btn-color-black:link,
-.btn-color-black:hover,
-.btn-color-black:active {
-  font-weight: 700;
-  color: $black-mid;
-  border: solid $black-mid 5px;
-}
-.btn-color-white,
-.btn-color-white:visited,
-.btn-color-white:link,
-.btn-color-white:hover,
-.btn-color-white:active {
-  font-weight: 700;
-  color: $white;
-  border: solid $white 5px;
-}
-
-
-/* ---------------------------------------------------
-MENU
-----------------------------------------------------*/
-.nav-list {
-  margin: 0 10px 40px 0;
-}
-.nav-bar {
-  height: 70px;
-}
-.icon {
-  position: absolute;
-  padding: 12px 0 0 20px;
-  float: left;
-  line-height: 70px;
-}
-body.index .icon {
-  opacity: 0;
-}
-.nav-container {
-  margin: 0 auto;
-}
-nav {
-  float: right;
-}
-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-nav ul li {
-  float: left;
-  position: relative;
-}
-nav ul li a,
-nav ul li a:visited {
-  display: block;
-  padding: 0 20px;
-  line-height: 70px;
-  text-decoration: none;
-  font-weight: 700;
-  background: $yellow-mid;
-  color: $black-mid;
-}
-nav ul li a:hover,
-nav ul li a:visited:hover {
-  color: $black-mid;
-}
-nav ul li a:not(:only-child):after,
-nav ul li a:visited:not(:only-child):after {
-  padding-left: 4px;
-  content: ' ▾';
-}
-nav ul li ul li {
-  min-width: 150px;
-}
-nav ul li ul li a {
-  padding: 15px;
-  line-height: 20px;
-}
-.nav-dropdown {
-  position: absolute;
-  display: none;
-  z-index: 1;
-}
-.nav-mobile {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: $yellow-mid;
-  height: 70px;
-  width: 70px;
-}
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-  .nav-list {
-    margin: 0 0 40px 0;
-  }
-  .nav-mobile {
-    display: block;
-  }
-  nav {
-    width: 100%;
-    padding: 70px 0 15px;
-  }
-  nav ul {
-    display: none;
-  }
-  nav ul li {
-    float: none;
-  }
-  nav ul li a {
-    padding: 15px;
-    line-height: 20px;
-	  padding-left: 25%;
-  }
-  nav ul li ul li a {
-    padding-left: 30%;
-  }
-  nav ul li:last-child a {
-    padding-bottom: 60px;
-  }
-  nav ul li:last-child a {
-    box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
-  }
-  .nav-dropdown {
-    position: static;
-  }
-}
-/* Desktop Styles */
-@media screen and (min-width: 961px) {
-  .nav-list {
-    display: block !important;
-  }
-}
-#nav-toggle {
-  position: absolute;
-  left: 18px;
-  top: 22px;
-  cursor: pointer;
-  padding: 12px 35px 16px 0px;
-}
-#nav-toggle span,
-#nav-toggle span:before,
-#nav-toggle span:after {
-  cursor: pointer;
-  border-radius: 1px;
-  height: 2px;
-  width: 25px;
-  background: $black-mid;
-  position: absolute;
-  display: block;
-  content: '';
-  /*
-  transition: all 300ms ease-in-out;
-  */
-}
-#nav-toggle span:before {
-  top: -8px;
-}
-#nav-toggle span:after {
-  bottom: -8px;
-}
-#nav-toggle.active span {
-  background-color: transparent;
-}
-#nav-toggle.active span:before, #nav-toggle.active span:after {
-  top: 0;
-}
-#nav-toggle.active span:before {
-  transform: rotate(45deg);
-}
-#nav-toggle.active span:after {
-  transform: rotate(-45deg);
-}
-
-
-/* ---------------------------------------------------
-GRAPHICS
-----------------------------------------------------*/
-#bg-intro {
-  background: url(/theme/images/gfx-intro.svg) no-repeat center;
-}
-/*-------------------------*/
-#bg-feature {
-  background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
-}
-/*-------------------------*/
-#bg-cta-top {
-  background: url(/theme/images/gfx-object-white.svg) center;
-}
-/*-------------------------*/
-#bg-outro {
-  background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
-}
-/*-------------------------*/
-#bg-cta-bottom {
-  background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
-}
-
-
-/* ---------------------------------------------------
-IMAGES
-----------------------------------------------------*/
-img {
-  display: block;
-}
-.image-text-custom {
-  margin: 10px 0 -15px 0;
-}
-.image-text-600-338 {
-  width: 600px;
-  height: 338px;
-}
-.image-text-600-322 {
-  width: 600px;
-  height: 322px;
-}
-
-@media only screen and (max-width: 600px) {
-  .image-text-600-338 {
-    max-width:100%;
-    height: auto;
-  }
-  .image-text-600-322 {
-    max-width:100%;
-    height: auto;
-  }
-}

homepage/theme/static/fonts/LICENSE

@@ -1,4 +1,7 @@
-Copyright 2018 The Noto Project Authors (github.com/googlei18n/noto-fonts)
+Rubik-Regular.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
+Rubik-Italic.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
+Rubik-Medium.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
+Rubik-MediumItalic.ttf: Copyright 2015 The Rubik Project Authors (meir@sadan.com)
 
 This Font Software is licensed under the SIL Open Font License,
 Version 1.1.

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">
+    <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,133 +18,135 @@
   <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">
-  {% assets filters="libsass,postcss,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
+  {% assets filters="postcss,cssmin", output="css/style.min.css", "css/tachyons.min.css", "css/fix.css", "css/fonts.css" %}
     <link rel="stylesheet" href="/{{ ASSET_URL }}">
   {% endassets %}
+  <link rel="preload" href="/theme/fonts/rubik-v9-latin-regular.woff2" as="font">
+  <link rel="preload" href="/theme/fonts/rubik-v9-latin-500.woff2" as="font">
   {% if OFFEN_ACCOUNT_ID and not no_stats %}
     <script async src="/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
   {% endif %}
 </head>
 {% endblock %}
-<body class="{{ template }}">
+<body class="{{ template }} f5 rubik lh-copy fnt-cclr-mid-black cclr-dark-white">
-  <div class="menu">
+  <div class="menu w-100 cclr-mid-yellow">
     <section class="nav-bar">
       <div class="nav-container">
         <div class="icon">
-          <a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="42" height="46" class="logo"></a>
+          <a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
         </div>
         <nav>
           <div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
           <ul class="nav-list">
             <li>
-              <a href="/">Summary</a>
+              <a class="b link dim fnt-cclr-mid-black" href="/">Summary</a>
             </li>
             <li>
-              <a href="/deep-dive/">Deep dive</a>
+              <a class="b link dim fnt-cclr-mid-black" href="/deep-dive/">Deep dive</a>
             </li>
             <li>
-              <a href="/blog/">Status</a>
+              <a class="b link dim fnt-cclr-mid-black" href="/blog/">Status</a>
             </li>
             <li>
-              <a href="/about/">About</a>
+              <a class="b link dim fnt-cclr-mid-black" href="/about/">About</a>
             </li>
             <li>
-              <a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
+              <a class="b link dim fnt-cclr-mid-black" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
             </li>
             <li>
-              <a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
+              <a class="b link dim fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
             </li>
           </ul>
         </nav>
       </div>
     </section>
   </div>
-
     {% block content %}
-    <div class="content">
+      <div class="w-100 mt5-ns gray">
-      <div class="container-reader">
+        <div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
           {{ content }}
         </div>
       </div>
     {% endblock %}
 
     {% block outro %}
-    <div class="cta-bottom">
+      <div class="w-100 cclr-mid-yellow">
-      <div class="bg" id="bg-cta-bottom">
+        <div class="pt3 pb6 ph3" id="bg-cta-bottom">
-        <div class="container-full">
+          <div class="mw8 center">
-          <div class="card-deck">
+            <div class="flex flex-wrap justify-center">
-            <div class="card">
+              <div class="w55 mh3 pt5 tc">
-              <h2>
+                <h2 class="f25 lh-solid ma0 mb3">
                   Participate
                 </h2>
-              <p>
+                <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>
-              <div class="btn-wrapper">
+                <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="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
               </div>
-            </div>
+              {% if is_article != 'true' %}
-            <div class="card">
+              <div class="w55 mh3 pt5 tc">
-              <h2>
+                <h2 class="f25 lh-solid ma0 mb3">
                   In the making
                 </h2>
-              <p>
+                <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>
-              <div class="btn-wrapper">
+                <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="btn btn-color-black" href="/blog/">Project status</a>
               </div>
-            </div>
+              {% endif %}
-            <div class="card">
+              <div class="w55 mh3 pt5 tc">
-              <h2>
+                <h2 class="f25 lh-solid ma0 mb3">
                   Ethical internet
                 </h2>
-              <p>
+                <p class="ma0 mb3">
-                We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
+                  We're working hard to ensure that Offen is independent and can be sustained for years to come.
                 </p>
-              <div class="btn-wrapper">
+                <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="btn btn-color-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
-              </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     {% endblock %}
-
+    <div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
-  <div class="footer">
+      <div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
-    <div class="footer-card-deck">
+        <div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
-      <div class="footer-card">
+          <p class="ma0">
-        <h3>Offen</h3>
+            <a class="b link dim fnt-cclr-mid-yellow" href="/">Offen</a>
-        <h4>Transparent web analytics</h4>
+          </p>
-        <h4>for everyone</h4>
+          <p class="ma0">Transparent web analytics</p>
+          <p class="ma0">for everyone</p>
         </div>
-      <div class="footer-card">
+        <div class="w-25-l mt3 mr3">
-        <p>
+          <p class="ma0">
-          <a href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
+            <a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
-          <a target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
           </p>
-        <p>
+          <p class="ma0">
-          <a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
+            <a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">GPG Key</a>
           </p>
-        <p>
+          <p class="ma0 mt2">
-          <a 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>
+          <p class="ma0">
+            <a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
           </p>
         </div>
-      <div class="footer-card">
+        <div class="w-25-l mt3 mr3">
-        <p>
+          <p class="ma0">
-          <a href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
+            <a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
           </p>
-        <p>
+          <p class="ma0">
-          <a href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
+            <a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
           </p>
-        <p>
+          <p class="ma0">
-          <a href="/legal-notice/">Legal Notice</a>
+            <a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
           </p>
         </div>
-      <div class="footer-card">
+        <div class="w-25-l mt3 tr-l">
           {{ BUILD_DATE }}
         </div>
       </div>
@@ -155,5 +157,5 @@
         <script src="/{{ ASSET_URL }}"></script>
       {% endassets %}
     {% endblock %}
-</body>
+  </body>
 </html>

homepage/theme/templates/index.html

@@ -1,52 +1,52 @@
-{% extends "base.html" %}
+{% extends "page.html" %}
 
 {% block content %}
-  <div class="intro">
+  <div class="w-100 mt5-ns cclr-mid-yellow">
-    <div class="bg" id="bg-intro">
+    <div class="mw8 center" id="bg-intro">
-      <div class="container-reader">
+      <div class="flex flex-wrap pt6-ns pt-3 ph4">
-        <div class="spacer-intro">
+        <div class="mw5 pr4 pb3">
-          <div class="sign">
+          <img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
-            <img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="152" height="94">
         </div>
-          <h1>
+        <div class="mw6">
-            <em>Transparent web analytics for operators and users</em>
+          <h1 class="f1-ns f2 lh-solid ma0 mb3">
+            Transparent <span>web analytics</span>
           </h1>
-          <p>
+          <p class="ma0 mb4">
-            Offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
+            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="btn-wrapper">
+          <div class="pb6">
-            <a class="btn btn-color-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="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="feature">
+  <div class="w-100 cclr-mid-mint">
-    <div class="bg" id="bg-feature">
+    <div class="pt3 pb6 ph3" id="bg-feature">
-      <div class="container-full">
+      <div class="mw8 center">
-        <div class="card-deck">
+        <div class="flex flex-wrap justify-around">
-          <div class="card">
+          <div class="w55 mh3 pt5 tc">
-            <h2>
+            <h2 class="f25 lh-solid ma0 mb3">
               <em>Free & Open</em>
             </h2>
-            <p>
+            <p class="ma0">
-              Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge.
+              Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
             </p>
           </div>
-          <div class="card">
+          <div class="w55 mh3 pt5 tc">
-            <h2>
+            <h2 class="f25 lh-solid ma0 mb3">
               <em>Fair & Secure</em>
             </h2>
-            <p>
+            <p class="ma0">
               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="card">
+          <div class="w55 mh3 pt5 tc">
-            <h2>
+            <h2 class="f25 lh-solid ma0 mb3">
               <em>Easy to use</em>
             </h2>
-            <p>
+            <p class="ma0">
               Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
             </p>
           </div>
@@ -56,44 +56,48 @@
   </div>
 
 
-  <div class="cta-top">
+  <div class="w-100 cclr-mid-black white">
-    <div class="bg" id="bg-cta-top">
+    <div class="pt3 pb6 ph4" id="bg-cta-top">
-      <div class="container-reader">
+      <div class="flex justify-end mw6 center pt5">
-        <div class="spacer-right">
+        <div class="w55 tr">
-          <h2>
+          <h2 class="f25 lh-solid ma0 mb3">
             In the making
           </h2>
-          <p>
+          <p class="ma0 mb4">
             Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
           </p>
-          <div class="btn-wrapper">
+          <a class="b link dim ph4 pv2 dib b--solid bw2 b--white white" href="/blog/">Project status</a>
-            <a class="btn btn-color-white" href="/blog/">Project status</a>
         </div>
       </div>
     </div>
   </div>
-  </div>
+
-  <div class="content-index">
+  <div class="w-100 bg-white gray">
-    <div class="container-reader">
+    <div class="flex flex-wrap justify-center pt5 pb6">
+      <div class="mw7 mw8-l center ph5-ns ph3">
+        <h2>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>
+        </div>
+      </div>
     </div>
   </div>
 {% endblock %}
 
+
 {% block outro %}
-  <div class="outro">
+  <div class="w-100 cclr-mid-yellow">
-    <div class="bg" id="bg-outro">
+    <div class="pt3 pb6 ph4" id="bg-outro">
-      <div class="container-reader">
+      <div class="flex justify-end mw6 center pt5">
-        <div class="spacer-right">
+        <div class="w55 tr">
-          <h2>
+          <h2 class="f25 lh-solid ma0 mb3">
             Ethical internet
           </h2>
-          <p>
+          <p class="mb4">
             We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
           </p>
-          <div class="btn-wrapper">
+          <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="btn btn-color-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
-          </div>
         </div>
       </div>
     </div>