From f9c1219a4e0dcb1d81d8051fa528a4f778f88e5d Mon Sep 17 00:00:00 2001
From: Hendrik Niefeld <hello@niefeld.com>
Date: Sat, 1 Feb 2020 21:47:08 +0100
Subject: [PATCH] index, update intro section

---
 homepage/theme/static/css/fix.css        | 34 +++++++++++++++++++++++-
 homepage/theme/templates/base.html       |  2 +-
 homepage/theme/templates/getstarted.html |  6 ++---
 homepage/theme/templates/index.html      | 21 +++++++++------
 4 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css
index b243db9..7bf02b8 100644
--- a/homepage/theme/static/css/fix.css
+++ b/homepage/theme/static/css/fix.css
@@ -129,6 +129,12 @@ ul {
 .tracked-min {
 	letter-spacing:  .03em;
 }
+.intro-margin-a {
+	margin-top: 0.3rem;
+}
+.intro-margin-b {
+	margin-top: 0.7rem;
+}
 
 
 /* ---------------------------------------------------
@@ -319,8 +325,34 @@ IMAGES
 GRAPHICS
 ----------------------------------------------------*/
 #bg-intro {
-  background: url(/theme/images/gfx-intro.svg) no-repeat center;
+  background: url(/theme/images/gfx-intro.svg);
+	background-repeat: no-repeat;
+	background-attachment: scroll;
+	background-position: 200px 130px;
 }
+/*
+@media only screen and (min-width: 45.1em) and (max-width: 60em) {
+	#bg-intro {
+		background-position: 180px 130px;
+	}
+}
+@media only screen and (min-width: 30.1em) and (max-width: 45em) {
+	#bg-intro {
+		background-position: 140px 130px;
+	}
+}
+*/
+@media only screen and (min-width: 30.1em) and (max-width: 60em) {
+	#bg-intro {
+		background-position: calc(20% + 120px) 130px;
+	}
+}
+@media only screen and (max-width: 30em) {
+	#bg-intro {
+		background-position: 10px 60px;
+	}
+}
+
 #bg-feature {
   background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
 }
diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html
index aadb3b1..9da7e21 100644
--- a/homepage/theme/templates/base.html
+++ b/homepage/theme/templates/base.html
@@ -128,13 +128,13 @@
             <p class="ma0">for everyone</p>
           </div>
           <div class="w-25-l mt3 mr3">
+            {% if is_getstarted != 'true' %}
             <p class="ma0">
               <a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
             </p>
             <p class="ma0">
               <a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">GPG Key</a>
             </p>
-            {% if is_getstarted != 'true' %}
             <p class="ma0 mt2">
               <a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
             </p>
diff --git a/homepage/theme/templates/getstarted.html b/homepage/theme/templates/getstarted.html
index a907d45..6d99d69 100644
--- a/homepage/theme/templates/getstarted.html
+++ b/homepage/theme/templates/getstarted.html
@@ -18,9 +18,9 @@
         <p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
           Single binary file for <br>Linux, Windows or MacOS
         </p>
-        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="#">Download</a>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="#" rel="noopener">Download</a>
         <div class="tc">
-          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="#">Open GitHub release page</a>
+          <a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="#" rel="noopener">Open GitHub release page</a>
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@
         <p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
           Details on how to run, use <br>and develop Offen
         </p>
-        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="#">Open guides</a>
+        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="#" rel="noopener">Open guides</a>
       </div>
     </div>
   </div>
diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html
index f4bf450..efd9f06 100644
--- a/homepage/theme/templates/index.html
+++ b/homepage/theme/templates/index.html
@@ -3,14 +3,19 @@
 {% block content %}
   <div class="w-100 mt5-ns cclr-mid-yellow">
     <div class="mw8 center" id="bg-intro">
-      <div class="flex flex-wrap pt6-ns pt-3 ph4">
-        <div class="mw5 pr4 pb3">
-          <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="146" height="90">
+      <div class="flex justify-center pt6-ns pt5 ph4">
+        <div class="dn db-ns w-20 tr pr3 pb3">
+          <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63">
         </div>
-        <div class="mw6">
-          <h1 class="f1-ns f2 normal lh-solid ma0 mb1 white">
-            Offen
-          </h1>
+        <div class="w-100 w-80-ns">
+          <div class="flex">
+            <div class="db dn-ns intro-margin-a mr2">
+              <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="40" height="43">
+            </div>
+            <h1 class="f1-ns f2 normal lh-solid ma0 mb1 intro-margin-b white">
+              Offen
+            </h1>
+          </div>
           <h1 class="f1-ns f2 normal lh-solid ma0 mb3">
             Transparent <span>web analytics</span>
           </h1>
@@ -18,7 +23,7 @@
             Offen is an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
           </p>
           <div class="pb6">
-            <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
+            <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener" target="_blank">Start now</a>
           </div>
         </div>
       </div>