clean up templates

homepage/content/pages/deep-dive.md

@@ -1,6 +1,7 @@
 Title: Deep dive | offen
 description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
 save_as: deep-dive/index.html
+href: /deep-dive/
 
 ### What is this thing called "my data" and why does seemingly everyone want to get hold of it?
 
@@ -75,18 +76,5 @@ __offen__ is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [H
 
 We are happy about any kind of feedback. From *criticism and praise to contributions or support*, everything is welcome.
 
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-grey" href="../">Summary</a>
-<a class="btn btn-color-grey" href="../status/">Status</a>
-<a class="btn btn-color-orange" href="mailto:mail@offen.dev">Contact</a>
-</div>
-
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-orange" href="https://github.com/offen" target="_blank">Get involved</a>
-<a class="btn btn-color-orange" href="https://www.patreon.com/bePatron?u=21484999" target="_blank">Support us</a>
-</div>
-
----
-
 [hendrik-niefeld]: http://niefeld.com/
 [frederik-ring]: https://www.frederikring.com/

homepage/content/pages/index.md

@@ -1,7 +1,7 @@
 Title: Transparent web analytics | offen
 description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
 save_as: index.html
-
+href: /
 
 __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*.
 
@@ -10,15 +10,3 @@ Usage metrics come with explanations about their meaning, relevance, usage and p
 __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 their 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](https://auditorium-alpha.offen.dev) to access your data.
-
-
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-grey" href="./deep-dive/">Deep dive</a>
-<a class="btn btn-color-grey" href="./status/">Status</a>
-<a class="btn btn-color-orange" href="mailto:mail@offen.dev">Contact</a>
-</div>
-
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-orange" href="https://github.com/offen" target="_blank">Get involved</a>
-<a class="btn btn-color-orange" href="https://www.patreon.com/bePatron?u=21484999" target="_blank">Support us</a>
-</div>

homepage/content/pages/opt-out.md

@@ -9,14 +9,3 @@ This will prevent __offen__ from aggregating the actions you have taken on parti
 Operators now cannot draw any conclusions from your actions via __offen__. At the same time, however, they *cannot create a better experience* for you and other users.
 
 <img style="-webkit-user-select: none; display:none;" src="https://server-alpha.offen.dev/opt-out">
-
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-grey" href="../">Summary</a>
-<a class="btn btn-color-grey" href="../status/">Status</a>
-<a class="btn btn-color-orange" href="mailto:mail@offen.dev">Contact</a>
-</div>
-
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-orange" href="https://github.com/offen" target="_blank">Get involved</a>
-<a class="btn btn-color-orange" href="https://www.patreon.com/bePatron?u=21484999" target="_blank">Support us</a>
-</div>

homepage/content/pages/status.md

@@ -1,7 +1,7 @@
 Title: Status | offen
 description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
 save_as: status/index.html
-
+href: /status/
 
 ### Current status
 
@@ -30,15 +30,3 @@ Our product story is based on three key questions. What makes __offen__ stand ou
 #### Publicity
 
 This product story is the starting point for publicty efforts that will start as soon as a beta version is available. They include own blog posts, forum marketing as well as SEO measures.
-
-
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-grey" href="../">Summary</a>
-<a class="btn btn-color-grey" href="../deep-dive/">Deep dive</a>
-<a class="btn btn-color-orange" href="mailto:mail@offen.dev">Contact</a>
-</div>
-
-<div class="button-wrapper btn-fill-space">
-<a class="btn btn-color-orange" href="https://github.com/offen" target="_blank">Get involved</a>
-<a class="btn btn-color-orange" href="https://www.patreon.com/bePatron?u=21484999" target="_blank">Support us</a>
-</div>

homepage/pelicanconf.py

@@ -39,4 +39,6 @@ TAGS_SAVE_AS = None
 # keep this for access to page variable
 DIRECT_TEMPLATES = []
 
-OFFEN_ACCOUNT_ID = None
+GITHUB_ORG = 'https://github.com/offen'
+CONTACT_EMAIL = 'mail@offen.dev'
+PATREON_URL = 'https://www.patreon.com/bePatron?u=21484999'

homepage/theme/static/css/style.css

@@ -1 +1,9 @@
-/** styles specific to homepage
+section {
+display: flex;
+flex-flow: column;
+}
+
+section .footnote {
+padding-top: 30px;
+order: 100;
+}

homepage/theme/templates/base.html

@@ -21,34 +21,20 @@
   <link rel="stylesheet" type="text/css" href="/theme/css/fonts.css">
   <link rel="stylesheet" type="text/css" href="/theme/styles/index.css">
   <link rel="stylesheet" type="text/css" href="/theme/css/style.css">
-
   {% if OFFEN_ACCOUNT_ID %}
     <script async src="https://script-alpha.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
   {% endif %}
-
 </head>
 
 <body>
-
   <div class="wrapper">
-
     <header>
-<a href="/" title="offen home page" alt="offen home page"><img src="/theme/images/logo.svg" alt="offen logo" width="165" height="102" class="logo"></a>
+      <a href="/" title="offen home page" alt="offen home page">
+        <img src="/theme/images/logo.svg" alt="offen logo" width="165" height="102" class="logo">
+      </a>
     </header>
 
     {% block content %}{% endblock %}
-
-<!--
-<footer>
-<ul class="footer-list">
-<li>
-May 2019
-</li>
-</ul>
-</footer>
--->
-
   </div>
-
 </body>
 </html>

homepage/theme/templates/page.html

@@ -1,17 +1,50 @@
 {% extends "base.html" %}
 
-{% block title %}{{ page.title }}{% endblock %}
+{% block title %}
+  {{ page.title }}
+{% endblock %}
 
 {% block content %}
-
   <section>
+    {% block before_content %}
       <h1>
         <strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
       </h1>
-
+    {% endblock %}
-{% block before_content %}{% endblock %}
+    {% block page_content %}
-{% block page_content %}{{ page.content }}{% endblock %}
+      {{ page.content }}
-{% block after_content %}{% endblock %}
+    {% endblock %}
-
+    {% block after_content %}
+      <nav class="navigation-wrapper">
+        <div class="button-wrapper btn-fill-space">
+          {% if page.href != "/deep-dive/" %}
+            <a class="btn btn-color-grey" href="/deep-dive/">
+              Deep dive
+            </a>
+          {% endif %}
+          {% if page.href != "/" %}
+            <a class="btn btn-color-grey" href="/">
+              Summary
+            </a>
+          {% endif %}
+          {% if page.href != "/status/" %}
+            <a class="btn btn-color-grey" href="/status/">
+              Status
+            </a>
+          {% endif %}
+          <a class="btn btn-color-orange" href="mailto:{{CONTACT_EMAIL}}">
+            Contact
+          </a>
+        </div>
+        <div class="button-wrapper btn-fill-space">
+          <a class="btn btn-color-orange" href="{{GITHUB_ORG}}" target="_blank">
+            Get involved
+          </a>
+          <a class="btn btn-color-orange" href="{{PATREON_URL}}" target="_blank">
+            Support us
+          </a>
+        </div>
+      </nav>
+    {% endblock %}
   </section>
 {% endblock %}

styles/index.css

@@ -209,7 +209,7 @@ flex-flow: column wrap;
 justify-content: space-around;
 }
 
-.button-wrapper:first-of-type {
+.navigation-wrapper {
 margin: 60px 0 0 0;
 }