Fix some bugs with mobile toggle and reuse button and link classes for mobile menu.

README.md

@@ -273,6 +273,7 @@ params:
   menuInHeader: true        # Move the main menu to the header, default false.
   microUsername: ""         # Your micro.blog username.
   mobileMenu: true          # Turn on a mobile menu on small screens, default false.
+  mobileMenuOutline: true   # Mobil menu button as outline, default false.
   piwikSiteId:              # Matomo site id
   piwikTrackerUrl: ""       # Matomo url, schemaless and no slash on end (example.org/matomo).
   plausibleSiteID: ""       # Plausible site id/domain.

assets/sass/components/button/_button.scss

@@ -27,25 +27,17 @@ button,
   cursor: pointer;
   color: var(--color-button-text);
   background-color: var(--color-button);
-  border: 0;
+  border: 1px solid var(--color-button);
   border-radius: var(--radius-s);
 
   &:hover,
-  &:focus,
+  &:focus-visible,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
     color: var(--color-button-text-hover);
     background-color: var(--color-button-hover);
   }
-
-  &:hover {
-    box-shadow: 2px 2px 5px 1px var(--color-button-hover);
-  }
-
-  &:active {
-    box-shadow: inset 2px 2px 5px 1px var(--color-button);
-  }
 }
 
 // Add button variations here.
@@ -63,7 +55,7 @@ button,
     background-color: var(--color-button-hover);
 
     &:hover,
-    &:focus,
+    &:focus-visible,
     &:active {
       color: var(--color-button-text);
       background-color: var(--color-button);
@@ -73,15 +65,25 @@ button,
   &--outline {
     color: var(--color-button);
     background-color: var(--color-button-text);
-    border: 1px solid var(--color-button);
+    border-color: var(--color-button);
 
     &:hover,
-    &:focus,
+    &:focus-visible,
     &:active {
       color: var(--color-button-text);
       background-color: var(--color-button);
     }
   }
+
+  &--shadow {
+    &:hover {
+      box-shadow: 2px 2px 5px 1px var(--color-button-hover);
+    }
+
+    &:active {
+      box-shadow: inset 2px 2px 5px 1px var(--color-button);
+    }
+  }
 }
 
 // The disabled variation should always go last, so that it overrides any

assets/sass/mobile.scss

@@ -55,41 +55,43 @@
     right: var(--gutters);
     margin: 0;
     padding: 0 .3rem;
+    border-color: var(--color-button-text-hover);
     font-weight: var(--fw-bold);
-    background-color: var(--color-text-bg);
-    color: var(--color-text);
     z-index: 22;
-    border: 1px solid var(--color-border);
     pointer-events: auto;
 
     @include respond-to(s) {
       display: none;
     }
 
-    .js-nav-open & {
+    &:hover,
-      color: var(--color-text-bg);
+    &:focus-visible {
-    }
+      svg {
+        fill: var(--color-button-text-hover);
+      }
 
-    &:hover svg,
+      &.button--outline {
-    &:focus-visible svg {
+        border-color: var(--color-button-text-hover);
-      fill: var(--color-text-bg);
+      }
     }
   }
 
   &__hamburger {
-    fill: var(--color-text);
+    fill: var(--color-button-text-hover);
     width: 1.6rem;
     margin-left: .1rem;
 
+    .button--outline & {
+      fill: var(--color-button);
+    }
+
     rect {
       transform-origin: center;
     }
 
     .js-nav-open & { // stylelint-disable max-nesting-depth
-      fill: var(--color-text-bg);
-
       rect {
-        y: 45;
+        y: 45px;
 
         &:nth-of-type(1) {
           transform: rotate(45deg);
@@ -115,16 +117,6 @@
     transform: translateX(100vw);
     z-index: 21;
 
-    a {
-      color: var(--color-text-bg);
-      text-decoration: none;
-
-      &:hover,
-      &:focus {
-        color: var(--color-text-bg);
-      }
-    }
-
     .js-nav-open & {
       visibility: visible;
       pointer-events: auto;

layouts/partials/mobilemenu.html

@@ -1,6 +1,6 @@
 <div class="mobile-nav" dir="ltr">
   <div class="mobile-nav__cover"></div>
-  <button class="mobile-nav__toggle" aria-expanded="false" aria-controls="sheet">
+  <button class="mobile-nav__toggle{{ if $.Param "mobilemenuoutline" }} button--outline{{ end }}" aria-expanded="false" aria-controls="sheet">
     {{ i18n "menu_mobile" }}
     <svg class="mobile-nav__hamburger" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
       <rect width="80" height="12" x="10" y="20" rx="5"></rect>
@@ -8,7 +8,7 @@
       <rect width="80" height="12" x="10" y="70" rx="5"></rect>
     </svg>
   </button>
-  <div class="mobile-nav__sheet" id="sheet" aria-hidden="true">
+  <div class="mobile-nav__sheet link-inverted link-nav" id="sheet" aria-hidden="true">
     <div class="mobile-nav__region">{{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}</div>
     <nav class="mobile-nav__main-menu" aria-label="{{ i18n "menu_title" }}">
     <ul class="mobile-nav__navbar">