reorganize styles for navbar

opitzconsulting · Jan 3, 2021 · 96f1a9f · 96f1a9f
1 parent 8275141
commit 96f1a9f
Showing 1 changed file with 49 additions and 58 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -21,6 +21,10 @@ body {
   text-decoration: none;
 }
 
+.navbar-brand {
+  display: flex;
+}
+
 .navbar-brand .navbar-item:first-child,
 .navbar-brand .navbar-item:first-child a {
   color: var(--navbar-font-color);
@@ -31,32 +35,6 @@ body {
   padding: 0 0.375rem;
 }
 
-@media screen and (min-width: 1024px) {
-  .navbar-end > .navbar-item,
-  .navbar-end .navbar-link {
-    color: var(--navbar-font-color);
-  }
-
-  .navbar-end > a.navbar-item:hover,
-  .navbar-end .navbar-link:hover {
-    background: var(--navbar_hover-background);
-    color: var(--navbar-font-color);
-  }
-
-  .navbar-end .navbar-link::after {
-    border-color: var(--navbar-font-color);
-  }
-
-  .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar_hover-background);
-    color: var(--navbar-font-color);
-  }
-}
-
-.navbar-brand {
-  display: flex;
-}
-
 .navbar-burger {
   background: none;
   border: none;
@@ -103,21 +81,12 @@ body {
   transform: rotate(-45deg);
 }
 
-.navbar-menu {
-  display: none;
-}
-
 .navbar-item,
 .navbar-link {
   color: var(--navbar-menu-font-color);
   display: block;
   line-height: var(--doc-line-height);
   padding: 0.5rem 1rem;
-  position: relative;
-}
-
-.navbar-item {
-  flex: none;
 }
 
 .navbar-item.has-dropdown {
@@ -146,6 +115,18 @@ body {
   margin: 0.25rem 0;
 }
 
+.navbar .button {
+  display: inline-flex;
+  align-items: center;
+  background: var(--navbar-button-background);
+  border: 1px solid var(--navbar-button-border-color);
+  border-radius: 0.15rem;
+  height: 1.75rem;
+  color: var(--navbar-button-font-color);
+  padding: 0 0.75em;
+  white-space: nowrap;
+}
+
 @media screen and (max-width: 1023.5px) {
   .navbar-brand {
     height: inherit;
@@ -158,14 +139,14 @@ body {
 
   .navbar-menu {
     background: var(--navbar-menu-background);
-    padding: 0.5rem 0;
-  }
-
-  .navbar-menu.is-active {
-    display: block;
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
     max-height: var(--body-min-height);
     overflow-y: auto;
+    padding: 0.5rem 0;
+  }
+
+  .navbar-menu:not(.is-active) {
+    display: none;
   }
 
   .navbar-menu a.navbar-item:hover,
@@ -175,19 +156,29 @@ body {
 }
 
 @media screen and (min-width: 1024px) {
+  .navbar-burger {
+    display: none;
+  }
+
   .navbar,
   .navbar-menu,
   .navbar-end {
     display: flex;
   }
 
-  .navbar-burger {
-    display: none;
+  .navbar-menu {
+    flex: auto;
+  }
+
+  .navbar-end {
+    margin-left: auto;
   }
 
   .navbar-item,
   .navbar-link {
     display: flex;
+    position: relative;
+    flex: none;
   }
 
   .navbar-item:not(.has-dropdown),
@@ -214,12 +205,24 @@ body {
     top: 50%;
   }
 
-  .navbar-menu {
-    flex: auto;
+  .navbar-end > .navbar-item,
+  .navbar-end .navbar-link {
+    color: var(--navbar-font-color);
   }
 
-  .navbar-end {
-    margin-left: auto;
+  .navbar-end > a.navbar-item:hover,
+  .navbar-end .navbar-link:hover {
+    background: var(--navbar_hover-background);
+    color: var(--navbar-font-color);
+  }
+
+  .navbar-end .navbar-link::after {
+    border-color: var(--navbar-font-color);
+  }
+
+  .navbar-item.has-dropdown:hover .navbar-link {
+    background: var(--navbar_hover-background);
+    color: var(--navbar-font-color);
   }
 
   .navbar-dropdown {
@@ -256,15 +259,3 @@ body {
     background: var(--navbar-menu_hover-background);
   }
 }
-
-.navbar .button {
-  display: inline-flex;
-  align-items: center;
-  background: var(--navbar-button-background);
-  border: 1px solid var(--navbar-button-border-color);
-  border-radius: 0.15rem;
-  height: 1.75rem;
-  color: var(--navbar-button-font-color);
-  padding: 0 0.75em;
-  white-space: nowrap;
-}