🛠 Update header and footer

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 {
+  & .social {
-    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & a {
+      display: inline-block;
+
+      & svg {
+        height: 24px;
+        width: 24px;
+        display: block;
+      }
+    }
+
+    & > * + * {
+      margin-left: var(--space-l);
+    }
   }
 }

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 {
+    & button{
-      display: flex;
+      display: inline-block;
-      align-items: center;
+      position: relative;
-      margin-left: auto;
+      top: 2px;
 
-      & a,
+      @media (--up_to_S) {
-      & button{
+        visibility: hidden;
-        display: inline-block;
-
-        & svg {
-          height: .85em;
-          width: .85em;
-          display: block;
-        }
       }
 
-      & > * + * {
+      & svg {
-        margin-left: var(--space-l);
+        height: 4.5vw;
+        width: 4.5vw;
+        min-height: 24px;
+        min-width: 24px;
+        max-height: 42px;
+        max-width: 42px;
+        display: block;
       }
     }
   }

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);

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);

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
+          button(type="button").theme
-            a.twitter(href=site.meta.twitterUrl target="_blank" title="Twitter")
+            +sprite("theme")
-              +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")
 
     #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
           = " "