reorganize styles for navbar; restore mobile menu button to full height of navbar

Author: mojavelinux

src/css/header.css

@@ -31,11 +31,11 @@ body {
 
 .navbar-brand {
   display: flex;
-  align-items: center;
   padding-left: 1rem;
 }
 
 .navbar-brand .navbar-item.logo {
+  align-self: center;
   padding: 0;
   height: calc(0.6 * var(--navbar-height));
   width: calc(0.6 * var(--navbar-height));
@@ -46,6 +46,7 @@ body {
 }
 
 .navbar-brand .navbar-item.title {
+  align-self: center;
   color: var(--navbar-font-color);
   font-family: "Comfortaa", sans-serif;
   font-size: 1rem;
@@ -109,24 +110,6 @@ body {
   cursor: inherit;
 }
 
-@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,
-  .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar_hover-background);
-    color: var(--navbar-font-color);
-  }
-
-  .navbar-end .navbar-link::after {
-    border-color: currentColor;
-  }
-}
-
 .navbar-burger {
   background: none;
   border: none;
@@ -173,21 +156,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 {
@@ -249,14 +223,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,
@@ -292,6 +266,8 @@ body {
   .navbar-item,
   .navbar-link {
     display: flex;
+    position: relative;
+    flex: none;
   }
 
   .navbar-item:not(.has-dropdown),
@@ -318,6 +294,22 @@ body {
     top: 50%;
   }
 
+  .navbar-end > .navbar-item,
+  .navbar-end .navbar-link {
+    color: var(--navbar-font-color);
+  }
+
+  .navbar-end > a.navbar-item:hover,
+  .navbar-end .navbar-link:hover,
+  .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
+    background: var(--navbar_hover-background);
+    color: var(--navbar-font-color);
+  }
+
+  .navbar-end .navbar-link::after {
+    border-color: currentColor;
+  }
+
   .navbar-end .navbar-item.search {
     flex: 0 1 20rem;
     padding-left: 0;
@@ -354,15 +346,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;
-}