typo details

homepage/content/pages/index.md

@@ -7,6 +7,6 @@ __Offen__ is a web analytics software that gives users access to the data they a
 
 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 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.

styles/index.css

@@ -5,7 +5,7 @@ ROOTS
 ----------------------------------------------------*/
 :root {
 --yellow-mid: #F7BF08;
---yellow-bright: #F7BF08;
+--yellow-bright: #fde28c;
 --black-mid: #39352A;
 --grey-mid: #898989;
 --grey-bright: #D5D5D5;
@@ -23,6 +23,76 @@ BASICS
 }
 
 
+/* ---------------------------------------------------
+LAYOUT
+----------------------------------------------------*/
+.menu {
+  width: 100%;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-color: var(--yellow-mid);
+}
+.intro {
+  width: 100%;
+  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;
+  background-color: var(--white);
+}
+.content-index {
+  width: 100%;
+  background-color: var(--white);
+}
+.cta-bottom {
+  width: 100%;
+  height: 200px;
+  background-color: var(--yellow-mid);
+}
+.footer {
+  width: 100%;
+  height: 240px;
+  color: var(--grey-mid);
+  background-color: var(--black-mid);
+}
+
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+  .container-reader,
+  .container-full {
+    padding: 40px 20px 80px 20px;
+  }
+}
+
+/* Desktop Styles */
+@media only screen and (min-width: 961px) {
+  .container-reader {
+    width: 600px;
+    margin: 0 auto;
+    padding: 40px 20px 80px 20px;
+  }
+  .container-full {
+    padding: 40px 80px 80px 80px;
+  }
+}
+
+
 /* ---------------------------------------------------
 TYPO
 ----------------------------------------------------*/
@@ -32,6 +102,7 @@ body {
   font-size: 18px;
   line-height: 1.5;
   font-weight: 400;
+  word-wrap: break-word;
   color: var(--grey-mid);
 }
 h1,
@@ -46,23 +117,62 @@ h3,
 h4 {
   font-size: 18px;
 }
+h3 {
+  margin: 0 0 20px 0;
+}
+p + h3 {
+  margin: 60px 0 20px 0;
+}
+h4 {
+  color: var(--grey-mid);
+}
+
+
+/* ---------------------------------------------------
+LINKS
+----------------------------------------------------*/
+a,
+a:hover,
+a:focus {
+  color: var(--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: var(--grey-bright);
+}
+
+
+
+
 
 
 /* ---------------------------------------------------
 TYPO ELEMENTS
 ----------------------------------------------------*/
+p {
+  margin: 0 0 20px 0;
+}
+hr {
+  height: 0;
+  margin: 80px 0 20px 0;
+  border-top: 1px solid var(--grey-bright);
+}
 .intro h1 {
   color: var(--white);
 }
 blockquote {
   margin: 0;
-  font-style: italic
+  padding: 0 0 0 20px;
+  font-style: italic;
   border-left: 1px solid var(--grey-bright);
 }
-hr {
-  height: 0;
-  border-top: 1px solid var(--grey-bright);
-}
 strong {
   font-weight: 700
 }
@@ -74,7 +184,16 @@ h3 strong {
   font-weight: 400;
   color: var(--black-mid);
 }
-
+em {
+background: linear-gradient(transparent 66%, var(--yellow-bright) 66%);
+font-style: normal;
+}
+.footnote {
+  color: var(--grey-bright);
+}
+ol {
+padding-inline-start: 20px;
+}
 
 /* ---------------------------------------------------
 MENU
@@ -225,74 +344,3 @@ nav ul li ul li a {
 #nav-toggle.active span:after {
   transform: rotate(-45deg);
 }
-
-
-/* ---------------------------------------------------
-LAYOUT
-----------------------------------------------------*/
-.menu {
-  width: 100%;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-  background-color: var(--yellow-mid);
-}
-.intro {
-  width: 100%;
-  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;
-  background-color: var(--white);
-}
-.content-index {
-  width: 100%;
-  background-color: var(--white);
-}
-.cta-bottom {
-  width: 100%;
-  height: 200px;
-  background-color: var(--yellow-mid);
-}
-.footer {
-  width: 100%;
-  height: 240px;
-  color: var(--grey-mid);
-  background-color: var(--black-mid);
-}
-
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-  .container-reader {
-    margin: 0 20px 0 20px;
-  }
-  .container-full {
-    margin: 0 20px 0 20px;
-  }
-}
-
-/* Desktop Styles */
-@media only screen and (min-width: 961px) {
-  .container-reader {
-    width: 600px;
-    margin: 0 auto;
-  }
-  .container-full {
-    margin: 0 80px 0 80px;
-  }
-}