prepare for auditorium, basic typo

homepage/content/pages/auditorium-operator.md

@@ -0,0 +1,6 @@
+Title: Auditorium Operator | offen
+description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
+save_as: auditorium/operator/index.html
+href: /auditorium/operator/
+
+Auditorium Operator

homepage/content/pages/auditorium-user.md

@@ -0,0 +1,6 @@
+Title: Auditorium User | offen
+description: offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
+save_as: auditorium/user/index.html
+href: /auditorium/user/
+
+Auditorium User

homepage/content/pages/deep-dive.md

@@ -25,13 +25,13 @@ As a regular user of the internet, are you really being spied upon? *What exactl
 
 [^7]: Google CEO Eric Schmidt Dismisses the Importance of Privacy <https://www.eff.org/de/deeplinks/2009/12/google-ceo-eric-schmidt-dismisses-privacy>
 
-We would like to turn the tables on this much quoted statement and apply it to the operators of services and websites instead of their users. The analytics software __offen__ *transparently and uncompromisingly discloses what data is being collected and what it is being used for* to the users.
+We would like to turn the tables on this much quoted statement and apply it to the operators of services and websites instead of their users. The analytics software __Offen__ *transparently and uncompromisingly discloses what data is being collected and what it is being used for* to the users.
 
 ---
 
 ### For users
 
-Visiting a website or using a web application that utilizes __offen__, the user gains access to and ownership of the usage data collected. The cookie used by __offen__ allows viewing all of the associated metrics, the users can *assert themselves what is being collected and what isn't*. Data is being displayed in an accessible and articulate manner and each metric comes with explanations about its usage, relevance and possible privacy implications.
+Visiting a website or using a web application that utilizes __Offen__, the user gains access to and ownership of the usage data collected. The cookie used by __Offen__ allows viewing all of the associated metrics, the users can *assert themselves what is being collected and what isn't*. Data is being displayed in an accessible and articulate manner and each metric comes with explanations about its usage, relevance and possible privacy implications.
 
 Users can choose to export their data, delete it selectively or in its entirety, or simply opt out of any data collection.
 
@@ -39,11 +39,11 @@ Users can choose to export their data, delete it selectively or in its entirety,
 
 Operators of small and mid-sized websites and web applications are faced with growing challenges not only since the introduction of GDPR: how do they gain insights into what users are interested in and which of the features offered are being used? Is it possible to showcase *transparent and considerate handling of user data* - i.e. neither being spy or data leech - without surrendering and abandoning usage metrics altogether?
 
-Choosing __offen__, websites and web applications obtain a free, open and robust tool for collecting and analyzing relevant usage data. The insights gained enable continuous improvement of these services while still respecting their user's privacy. *Opening up the data to the users does not constitute a disadvantage, but strengthens the relationship with them* by being entirely transparent.
+Choosing __Offen__, websites and web applications obtain a free, open and robust tool for collecting and analyzing relevant usage data. The insights gained enable continuous improvement of these services while still respecting their user's privacy. *Opening up the data to the users does not constitute a disadvantage, but strengthens the relationship with them* by being entirely transparent.
 
 ### Part of the public debate
 
-Transparently handling usage data in the open creates mutual trust while still enabling operators to collect needed usage statistics. __offen__ is designed to be a mediating agent only, and does not side with either users or operators. Sharing knowledge between the two parties creates opportunities for an *open and fact based discussion* about user data and privacy. Users gain insights into what data is being collected and what these data points are used for, just like they learn about which kind of data is not part of the collection. They are enabled to reach self-determined decisions about what they consent with and what they disagree with when it comes to privacy on the web, also in other contexts than analytics.
+Transparently handling usage data in the open creates mutual trust while still enabling operators to collect needed usage statistics. __Offen__ is designed to be a mediating agent only, and does not side with either users or operators. Sharing knowledge between the two parties creates opportunities for an *open and fact based discussion* about user data and privacy. Users gain insights into what data is being collected and what these data points are used for, just like they learn about which kind of data is not part of the collection. They are enabled to reach self-determined decisions about what they consent with and what they disagree with when it comes to privacy on the web, also in other contexts than analytics.
 
 We want to exemplify that it is time to depart the age of "data capitalism" [^8] and to create *technologies and infrastructure that are transparent, open and oriented towards the common good*
 
@@ -53,7 +53,7 @@ We want to exemplify that it is time to depart the age of "data capitalism" [^8]
 
 ### offen as a technology
 
-At runtime, __offen__ is just mediating exchange between users and operators. Usage data is collected in conformance to GDPR and with the concept of "Datensparsamkeit" [^9] in mind. All user data is encrypted in the browser so that it can only be accessed by the users themselves or the matching operator. While being collected in the context of a website or application, neither operators nor third party scripts have any possibilty to access the usage data. __offen__ itself doesn't have any way of decrypting, processing or even selling the gathered data at any point.
+At runtime, __Offen__ is just mediating exchange between users and operators. Usage data is collected in conformance to GDPR and with the concept of "Datensparsamkeit" [^9] in mind. All user data is encrypted in the browser so that it can only be accessed by the users themselves or the matching operator. While being collected in the context of a website or application, neither operators nor third party scripts have any possibilty to access the usage data. __Offen__ itself doesn't have any way of decrypting, processing or even selling the gathered data at any point.
 
 [^9]: Datensparsamkeit <https://martinfowler.com/bliki/Datensparsamkeit.html>
 
@@ -68,11 +68,11 @@ Users and operators are given intuitive and accessibility-focused tools for anal
 
 ### Modus Operandi
 
-Developing and running __offen__ can only work out when it is entirely *free of any kind of economic constraints or goals* and its only objective is *contributing to the common good*. Development of a prototype is reliant on public grants or similar funding sources. Long term operation of the software, just like its maintenance and continued development, is tied to resources granted by foundations or being donated by the public.
+Developing and running __Offen__ can only work out when it is entirely *free of any kind of economic constraints or goals* and its only objective is *contributing to the common good*. Development of a prototype is reliant on public grants or similar funding sources. Long term operation of the software, just like its maintenance and continued development, is tied to resources granted by foundations or being donated by the public.
 
 ### Status Quo
 
-__offen__ is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendrik Niefeld][hendrik-niefeld]{: target="_blank"} and is currently being conceptually designed, both as a product as well as as a software.
+__Offen__ is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendrik Niefeld][hendrik-niefeld]{: target="_blank"} and is currently being conceptually designed, both as a product as well as as a software.
 
 We are happy about any kind of feedback. From *criticism and praise to contributions or support*, everything is welcome.
 

homepage/content/pages/index.md

@@ -3,10 +3,10 @@ description: offen is a free and open source analytics software for websites and
 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*.
+__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 their 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 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.
+__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.

homepage/content/pages/opt-out.md

@@ -4,9 +4,9 @@ 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.
+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.
 
 <script>
   var vault = document.createElement('iframe')

homepage/content/pages/status.md

@@ -6,7 +6,7 @@ href: /status/
 ### Current status
 
 #### July 2019
-We have deployed an alpha version of __offen__ 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)*
+We have deployed an alpha version of __Offen__ 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)*
 
 ---
 
@@ -25,7 +25,7 @@ Currently, we are researching the milieu on the topics of privacy and web analyt
 
 #### Story
 
-Our product story is based on three key questions. What makes __offen__ 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?
+Our product story is based on three key questions. What makes __Offen__ 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
 

homepage/theme/templates/base.html

@@ -25,9 +25,8 @@
   {% endif %}
 </head>
 <body>
-  
+
-  <!--- MENU start -->
+  <div class="menu">
-  <div class='menu'>
     <section class="nav-bar">
       <div class="nav-container">
         <div class="brand">
@@ -46,10 +45,10 @@
               <a>Auditorium</a>
               <ul class="nav-dropdown">
                 <li>
-                  <a href="#">for Operators</a>
+                  <a href="/auditorium/operator/">for Operators</a>
                 </li>
                 <li>
-                  <a href="#">for Users</a>
+                  <a href="/auditorium/user/">for Users</a>
                 </li>
               </ul>
             </li>
@@ -67,31 +66,48 @@
       </div>
     </section>
   </div>
-  <!--- MENU end -->
 
-  <!--- INDEX SETUP start -->
   {% if page.href == "/" %}
-    <div class='intro'>
+    <div class="intro">
-      <div class='container-reader'>
+      <div class="container-reader">
-        INTRO
+        <h1>
+          <strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
+        </h1>
+      </div>
+    </div>
+    <div class="feature">
+      <div class="container-full">
+        FEATURE
+      </div>
+    </div>
+    <div class="cta-top">
+      <div class="container-full">
+        CTA TOP
       </div>
     </div>
   {% endif %}
-  <!--- INDEX SETUP end -->
 
   {% if page.href == "/" %}
-    <div class='content-index'>
+    <div class="content-index">
+  {% else %}
+    <div class="content">
   {% endif %}
-  {% if page.href != "/" %}
+  {% if page.href == "/auditorium/operator/" or page.href == "/auditorium/user/" %}
-  <div class='content'>
+      <div class="container-full">
+  {% else %}
+      <div class="container-reader">
   {% endif %}
-      <div class='container-reader'>
       {% block content %}{% endblock %}
       </div>
-    </div>
+  </div>
 
-  <div class='footer'>
+  <div class="cta-bottom">
-    <div class='container-full'>
+    <div class="container-full">
+      CTA BOTTOM
+    </div>
+  </div>
+  <div class="footer">
+    <div class="container-full">
      FOOTER
    </div>
   </div>

styles/index.css

@@ -13,8 +13,6 @@ ROOTS
 }
 
 
-
-
 /* ---------------------------------------------------
 BASICS
 ----------------------------------------------------*/
@@ -23,16 +21,59 @@ BASICS
   padding: 0;
   box-sizing: border-box;
 }
+
+
+/* ---------------------------------------------------
+TYPO
+----------------------------------------------------*/
 body {
-  background-color: #fff;
+  background-color: var(--white);
-  color: var(--black-mid);;
   font: 18px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px;
   line-height: 1.5;
   font-weight: 400;
+  color: var(--grey-mid);
+}
+h1,
+h2,
+h3,
+h4 {
+  font-size: 28px;
+  font-weight: 400;
+  color: var(--black-mid);
+}
+h3,
+h4 {
+  font-size: 18px;
 }
 
 
+/* ---------------------------------------------------
+TYPO ELEMENTS
+----------------------------------------------------*/
+.intro h1 {
+  color: var(--white);
+}
+blockquote {
+  margin: 0;
+  font-style: italic
+  border-left: 1px solid var(--grey-bright);
+}
+hr {
+  height: 0;
+  border-top: 1px solid var(--grey-bright);
+}
+strong {
+  font-weight: 700
+}
+strong,
+h1 strong,
+h2 strong,
+h3 strong {
+  text-decoration: none;
+  font-weight: 400;
+  color: var(--black-mid);
+}
 
 
 /* ---------------------------------------------------
@@ -186,8 +227,6 @@ nav ul li ul li a {
 }
 
 
-
-
 /* ---------------------------------------------------
 LAYOUT
 ----------------------------------------------------*/
@@ -201,10 +240,21 @@ LAYOUT
 }
 .intro {
   width: 100%;
-  height: 300px;
+  height: 400px;
   margin: 70px 0 0 0;
   background-color: var(--yellow-mid);
 }
+.feature {
+  width: 100%;
+  height: 400px;
+  background-color: var(--grey-bright);
+}
+.cta-top {
+  width: 100%;
+  height: 200px;
+  color: var(--yellow-mid);
+  background-color: var(--black-mid);
+}
 .content {
   width: 100%;
   margin: 70px 0 0 0;
@@ -214,6 +264,11 @@ LAYOUT
   width: 100%;
   background-color: var(--white);
 }
+.cta-bottom {
+  width: 100%;
+  height: 200px;
+  background-color: var(--yellow-mid);
+}
 .footer {
   width: 100%;
   height: 240px;