add status / update css

content/pages/deep-dive.md

@@ -77,6 +77,7 @@ We are happy about any kind of feedback. From *criticism and praise to contribut
 
 <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>
 

content/pages/index.md

@@ -14,6 +14,7 @@ __offen__ is currently in the early stages of development and is applying for fu
 
 <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>
 

content/pages/opt-out.md

@@ -4,7 +4,7 @@ save_as: opt-out/index.html
 
 ### You are opted out
 
-This will *prevent __offen__ from aggregating* the actions you have taken on participating websites.
+This will prevent __offen__ from aggregating the actions you have taken on participating websites.
 
 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.
 
@@ -12,6 +12,7 @@ Operators now cannot draw any conclusions from your actions via __offen__. At th
 
 <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>
 

content/pages/status.md

@@ -0,0 +1,42 @@
+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
+
+### Current status
+
+We have deployed an alpha version of that we are currently testing on a few select sites. Usage data is collected and can be accessed by both users and site operators. Users can opt out and delete their data at any time. You can *follow the development at [github.com/offen/offen](https://github.com/offen/offen)*
+
+---
+
+### Next up
+
+#### Tech
+The next big task from a technical perspective is enabling account creation by third parties. This will allow us to open up a beta version of to select operators and collect their - as well as their user's - feedback.
+
+#### Explainer
+
+Once the user interface starts to get less volatile at the end of our alpha test, we will start to add explanations to all of the metrics as well as create additional content to educate users about the privacy measures we are taking and about their implications.
+
+#### Milieu
+
+Currently, we are researching the milieu on the topics of privacy and web analytics software in more detail. The aim is to create a selection of opinion leaders, bloggers and journalists who will be invited to test and evaluate.
+
+#### Story
+
+Our product story is based on three key questions. What makes stand out from other offerings in the field? What is the motivation for site operators to implement an open source analytics software that limits the amount of data collected? How can we raise or amplify users' awareness for a respectful handling of their data?
+
+#### 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>

theme/static/css/style.css

@@ -68,6 +68,7 @@ margin: 0 0 10px 0;
 
 h4 {
 color: #898989;
+margin: 30px 0 6px 0;
 }
 
 
@@ -223,8 +224,7 @@ color: #fff;
 text-decoration: none;
 }
 
-.btn:first-of-type,
-.btn:last-of-type {
+.btn {
 margin: 0 0 15px 0;
 }
 
@@ -235,11 +235,7 @@ justify-content: space-around;
 }
 
 .button-wrapper:first-of-type {
-padding-top: 40px;
-}
-
-.button-wrapper:last-of-type {
-padding: 0;
+margin: 60px 0 0 0;
 }
 
 @media (min-width: 480px) {
@@ -252,13 +248,11 @@ flex-flow: row wrap;
 .btn {
 flex-grow: 1;
 }
-.btn:first-of-type {
-margin-left: 0;
-margin-right: 15px;
+.btn {
+margin: 0 15px 15px 0;
 }
 .btn:last-of-type {
-margin-left: 15px;
-margin-right: 0;
+margin: 0 0 15px 0;
 }
 }