From 42fa4e941a3dd5b84f84c02af8d7e308354ba1c3 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 23 Nov 2020 11:11:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=20Update=20header=20and=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/base/footer.css    | 26 +++++++++++++++++++---
 src/css/base/header.css    | 44 +++++++++++++++++++++-----------------
 src/css/base/layout.css    |  2 +-
 src/css/base/variables.css |  1 +
 src/includes/template.pug  | 24 ++++++++-------------
 5 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/src/css/base/footer.css b/src/css/base/footer.css
index aec969a6d6e..76ea1f59b89 100644
--- a/src/css/base/footer.css
+++ b/src/css/base/footer.css
@@ -5,7 +5,7 @@
   background-color: var(--color-card-bg);
   transition-property: background-color;
   transition-duration: var(--transition-duration-fast);
-  padding: var(--space-m) 0;
+  padding: var(--space-l) 0;
 
   & .wrap {
     @media (--M_and_up) {
@@ -13,9 +13,29 @@
       flex-wrap: wrap;
       justify-content: space-between;
     }
+
+    & p:last-child {
+      margin-bottom: 0;
+    }
   }
 
-  & p {
-    margin-bottom: 0;
+  & .social {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & a {
+      display: inline-block;
+
+      & svg {
+        height: 24px;
+        width: 24px;
+        display: block;
+      }
+    }
+
+    & > * + * {
+      margin-left: var(--space-l);
+    }
   }
 }
diff --git a/src/css/base/header.css b/src/css/base/header.css
index 3f47355b603..70b1af3410b 100644
--- a/src/css/base/header.css
+++ b/src/css/base/header.css
@@ -45,6 +45,11 @@
     align-items: center;
   }
 
+  & .brand {
+    display: block;
+    margin-bottom: var(--space-m);
+  }
+
   & .logo {
     display: block;
     width: 100%;
@@ -58,9 +63,11 @@
     align-self: flex-start;
     align-items: center;
     justify-content: space-between;
-    padding-right: 5.75%;
     line-height: 1;
 
+    @media (--up_to_M) {
+      margin-bottom: var(--space-s);
+    }
     @media (--up_to_L) {
       margin-top: var(--space-m);
       font-size: var(--font-size-xl);
@@ -75,38 +82,35 @@
       align-items: center;
 
       & a {
+        margin-right: var(--space-l);
         text-transform: uppercase;
         font-weight: var(--font-weight-bold);
         cursor: pointer;
+        line-height: 0;
 
         &.current {
           color: var(--color-accent);
         }
       }
-
-      & > a + a {
-        margin-left: var(--space-l);
-      }
     }
 
-    & .more {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
+    & button{
+      display: inline-block;
+      position: relative;
+      top: 2px;
 
-      & a,
-      & button{
-        display: inline-block;
-
-        & svg {
-          height: .85em;
-          width: .85em;
-          display: block;
-        }
+      @media (--up_to_S) {
+        visibility: hidden;
       }
 
-      & > * + * {
-        margin-left: var(--space-l);
+      & svg {
+        height: 4.5vw;
+        width: 4.5vw;
+        min-height: 24px;
+        min-width: 24px;
+        max-height: 42px;
+        max-width: 42px;
+        display: block;
       }
     }
   }
diff --git a/src/css/base/layout.css b/src/css/base/layout.css
index 289385b3454..02f1f9b9699 100644
--- a/src/css/base/layout.css
+++ b/src/css/base/layout.css
@@ -14,7 +14,7 @@
     padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.525);
   }
   @media (--M_to_L) {
-    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.675);
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.825);
   }
   @media (--L_and_up) {
     padding-top: var(--space-l);
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
index 823aeee08f0..2251c4e0585 100644
--- a/src/css/base/variables.css
+++ b/src/css/base/variables.css
@@ -1,3 +1,4 @@
+@custom-media --up_to_S screen and (max-width: 360px);
 @custom-media --up_to_M screen and (max-width: 599px);
 @custom-media --up_to_L screen and (max-width: 839px);
 @custom-media --M_to_L screen and (min-width: 600px) and (max-width: 839px);
diff --git a/src/includes/template.pug b/src/includes/template.pug
index b1b86c2e9b5..1bca87c6791 100644
--- a/src/includes/template.pug
+++ b/src/includes/template.pug
@@ -55,15 +55,8 @@ html(lang="en")
           nav
             a.navItem(href="/podcast/" class=(navCurrent === 'podcast' && 'current')) Podcast
             a.navItem(href="/team/" class=(navCurrent === 'team' && 'current')) Team
-          .more
-            a.twitter(href=site.meta.twitterUrl target="_blank" title="Twitter")
-              +sprite("twitter")
-            a.telegram(href=site.meta.telegramUrl target="_blank" title="Telegram")
-              +sprite("telegram")
-            a.telegram(href=site.meta.sphinxUrl target="_blank" title="Sphinx")
-              +sprite("sphinx")
-            button(type="button").theme
-              +sprite("theme")
+          button(type="button").theme
+            +sprite("theme")
 
     #header-anchor
 
@@ -72,12 +65,6 @@ html(lang="en")
 
     footer#footer.footer
       .wrap
-        p
-          = "Folge uns auf "
-          a(href=site.meta.twitterUrl target="_blank") Twitter
-          = " und "
-          a(href=site.meta.telegramUrl target="_blank") komm in die Gruppe
-          |!
         if site.block
           p
             | Aktualisiert um
@@ -85,6 +72,13 @@ html(lang="en")
             a(href=`https://www.blockstream.info/block-height/${site.block}`)
               time(datetime=site.date)= site.block
             |.
+        p.social
+          a.twitter(href=site.meta.twitterUrl target="_blank" title="Twitter")
+            +sprite("twitter")
+          a.telegram(href=site.meta.telegramUrl target="_blank" title="Telegram")
+            +sprite("telegram")
+          a.telegram(href=site.meta.sphinxUrl target="_blank" title="Sphinx")
+            +sprite("sphinx")
         p
           | Made with 💛 by
           = " "