From 616642847f32ade0dac90daac46c54f1b6224c0c Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 1 Oct 2021 11:10:38 +0200
Subject: [PATCH] Improve nav

---
 src/css/base/header.css    | 27 ++++++++++++---------------
 src/css/base/layout.css    |  4 ++--
 src/css/base/variables.css |  2 +-
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/css/base/header.css b/src/css/base/header.css
index c856769ea5c..8889b04db0a 100644
--- a/src/css/base/header.css
+++ b/src/css/base/header.css
@@ -24,7 +24,7 @@
     z-index: 10;
 
     @nest body.topbar & {
-      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
+      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.125);
     }
   }
 
@@ -66,17 +66,14 @@
     align-self: flex-start;
     align-items: center;
     justify-content: space-between;
+    margin-top: var(--space-l);
     line-height: 1;
-    font-size: 3.5vw;
 
-    @media (--up_to_M) {
-      margin-bottom: var(--space-s);
-      margin-top: var(--space-l);
-      font-size:  var(--font-size-l);
+    @media (--up_to_L) {
+      font-size: 5vw;
     }
-    @media (--M_and_up) {
-      margin-top: var(--space-l);
-      font-size: var(--font-size-xl);
+    @media (--L_and_up) {
+      font-size: var(--font-size-xxl);
     }
 
     & nav {
@@ -85,7 +82,7 @@
 
       & .navItem {
         position: relative;
-        margin-right: var(--space-l);
+        margin-right: var(--space-xl);
         overflow: hidden;
         text-transform: uppercase;
         min-width: 3em;
@@ -109,12 +106,16 @@
           left: calc(var(--space-l) * -1);
           right: calc(var(--space-l) * -1);
           opacity: 0;
-          padding: 1.5em var(--space-l) var(--space-m);
+          padding: 1.25em var(--space-l) var(--space-m);
           background: var(--color-flyout-bg);
           transition-property: background, position, opacity;
           transition-duration: var(--transition-duration-fast);
           border-radius: var(--space-m);
 
+          @media (--up_to_M) {
+            padding-top: 1.4em;
+          }
+
           & a {
             margin-top: var(--space-l);
           }
@@ -161,10 +162,6 @@
   border: 0;
   outline: 0;
 
-  @media screen and (max-width: 370px) {
-    visibility: hidden;
-  }
-
   &:hover {
     @media not all and (hover: none) {
       color: var(--color-accent);
diff --git a/src/css/base/layout.css b/src/css/base/layout.css
index b6ce5441971..c22b8b5e53c 100644
--- a/src/css/base/layout.css
+++ b/src/css/base/layout.css
@@ -11,10 +11,10 @@
   padding-bottom: var(--space-xxl);
 
   @media (--up_to_M) {
-    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.525);
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.65);
   }
   @media (--M_to_L) {
-    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.825);
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 2);
   }
   @media (--L_and_up) {
     padding-top: var(--space-l);
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
index 4a195d4f55b..4ff28132f33 100644
--- a/src/css/base/variables.css
+++ b/src/css/base/variables.css
@@ -52,7 +52,7 @@
   --font-size-m: 1rem;
   --font-size-l: 1.25rem;
   --font-size-xl: 1.75rem;
-  --font-size-xxl: 2.5rem;
+  --font-size-xxl: 2.25rem;
 
   @media (--up_to_M) {
     --wrap-padding-horizontal: var(--space-l);