From 601c07f55c00e686a4eae14e78efaba794f68a3d Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Fri, 27 Dec 2019 12:57:02 +0100
Subject: [PATCH] fixes

---
 homepage/content/pages/index.md   | 16 +++++--------
 homepage/theme/static/css/fix.css | 40 ++++++++++++++++++++-----------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/homepage/content/pages/index.md b/homepage/content/pages/index.md
index e962f00..6a3d876 100644
--- a/homepage/content/pages/index.md
+++ b/homepage/content/pages/index.md
@@ -4,28 +4,24 @@ save_as: index.html
 template: index
 sitemap_priority: 1.0
 
-
-<div class="mw6 ph3">
+<div class="mw7 mw8-l center ph5-ns ph3">
 <h2>Summary</h2>
-
+<article>
 <p>
 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 <em>the users themselves are granted access to and ownership of their data.</em>
 </p>
-
 <p>
 Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details <em>which kind of data is not collected.</em> All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
 </p>
-</div>
-
-<div class="mw6 ph3 mrgn-t">
 <p>
 Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make <em>autonomous and informed decisions regarding the use of their data.</em> Operators are enabled to gain insights while respecting their users' privacy and data.
 </p>
-
 <p>
-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 <em>visit the [auditorium](/auditorium/)</em> 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 <em>visit the <a class="link b dim gray" href="/auditorium/">auditorium</a></em> to access your data.
 </p>
 <div class="mt3">
   <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
 </div>
-</div>
\ No newline at end of file
+</article>
+</div>
+
diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css
index a63e652..c5c2fcf 100644
--- a/homepage/theme/static/css/fix.css
+++ b/homepage/theme/static/css/fix.css
@@ -26,12 +26,6 @@ COLORS
 .brd-cclr-mid-black { 
   border-color: #39352A;
 } 
-.cclr-mid-grey {
-  background-color: #898989;
-} 
-.cclr-bright-grey {
-  background-color: #D5D5D5;
-} 
 .cclr-dark-white {
   background-color: #f9f7f2;
 } 
@@ -48,6 +42,25 @@ LAYOUT
   top: 0;
   right: 0;
 }
+article {
+  -webkit-column-count: 1;
+     -moz-column-count: 1;
+          column-count: 1;
+}
+/* Custom media query */
+@media only screen and (min-width: 60rem) {
+  article {
+    -webkit-column-count: 2;
+       -moz-column-count: 2;
+            column-count: 2;
+    -webkit-column-gap: 4em;
+       -moz-column-gap: 4em;
+            column-gap: 4em;
+    -webkit-column-rule: 0.18rem solid rgba(0,0,0,.05);
+       -moz-column-rule: 0.18rem solid rgba(0,0,0,.05);
+            column-rule: 0.18rem solid rgba(0,0,0,.05);
+  }
+}
 /* Custom media query - extra small */
 @media only screen and (max-width: 29.99em) {
   .menu {
@@ -64,18 +77,15 @@ LAYOUT
     width: 100%;
   }
 }
-/* Custom media query - extra large */
-@media only screen and (min-width: 68em) {
-/* Custom Tachyons class - margin for two-row text */
-  .mrgn-t {
-    margin-top: 3.8rem;
-  }
-}
+
 
 
 /* ---------------------------------------------------
 TYPO AND LAYOUT ELEMENTS
 ----------------------------------------------------*/
+.link:focus {
+    outline: none;
+}
 /* Break long word on mobile */
 body {
   overflow-wrap: break-word;
@@ -101,6 +111,7 @@ hr {
   margin-left: -1rem;
   margin-right: -1rem;
 }
+
   
   
 /* ---------------------------------------------------
@@ -175,7 +186,7 @@ nav ul li ul li a {
   height: 4rem;
   width: 4rem;
 }
-/* Mobile Styles */
+/* Custom media query */
 @media only screen and (max-width: 60rem) {
   .nav-list {
     margin: 0;
@@ -296,3 +307,4 @@ GRAPHICS
 #bg-cta-bottom {
   background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
 }
+