Rename mobile.* files to mobilemenu.*.

assets/js/mobilemenu.js

@@ -0,0 +1,56 @@
+/**
+ * @file
+ * A JavaScript file for the mobile menu.
+ */
+
+(function () {
+  const nav = document.querySelector('.mobile-nav');
+  const sheet = document.querySelector('.mobile-nav__sheet');
+  const toggle = document.querySelector('.mobile-nav__toggle');
+
+  function navopen() {
+    nav.dataset.navopen = 'true';
+    sheet.setAttribute('aria-hidden', 'false');
+    toggle.setAttribute('aria-expanded', 'true');
+    document.body.addEventListener('keydown', closeonesc);
+  }
+
+  function navclose() {
+    delete nav.dataset.navopen;
+    sheet.setAttribute('aria-hidden', 'true');
+    toggle.setAttribute('aria-expanded', 'false');
+    document.body.removeEventListener('keydown', closeonesc);
+  }
+
+  // Close the nav sheet with "esc" key.
+  function closeonesc(e) {
+    if (e.key === 'Escape') {
+      navclose();
+    }
+  }
+
+  // Toggle the mobile nav sheet.
+  const toggles = document.querySelectorAll('.mobile-nav__cover, .mobile-nav__toggle');
+  toggles.forEach(function (toggle) {
+    toggle.addEventListener('click', function (e) {
+      e.preventDefault();
+      if (nav.dataset.navopen) {
+        navclose();
+      } else {
+        navopen();
+      }
+    });
+  });
+
+  // Close the nav sheet after click (needed for anchor links).
+  const links = document.querySelectorAll('.mobile-nav__sheet a');
+  links.forEach(function (link) {
+    link.addEventListener('click', () => navclose());
+  });
+
+  // Move focus back to button efter user tab out of last link.
+  if (links.length) {
+    const lastlink = [].slice.call(links).pop();
+    lastlink.addEventListener('blur', () => toggle.focus());
+  }
+})();

assets/sass/mobilemenu.scss

@@ -0,0 +1,163 @@
+// The mobile navigation stylesheet for this theme.
+
+@import 'init';
+
+.main-menu,
+.header__region { // stylelint-disable selector-class-pattern
+  display: none;
+
+  @include respond-to(s) {
+    display: block;
+  }
+} // stylelint-enable selector-class-pattern
+
+.mobile-nav {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  font-family: var(--ff-headings);
+  z-index: 20;
+  pointer-events: none;
+
+  @include respond-to(s) {
+    display: none;
+  }
+
+  &[data-navopen] {
+    position: fixed;
+  }
+
+  .language-icon {
+    fill: var(--color-text-bg);
+  }
+
+  &__cover {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--color-mobile-menu-cover);
+    opacity: 0;
+
+    [data-navopen] & {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: var(--gutters);
+    right: var(--gutters);
+    margin: 0;
+    padding: 0 .3rem;
+    border-color: var(--color-button-text-hover);
+    font-weight: var(--fw-bold);
+    z-index: 22;
+    pointer-events: auto;
+
+    @include respond-to(s) {
+      display: none;
+    }
+
+    &:hover,
+    &:focus-visible {
+      svg {
+        fill: var(--color-button-text-hover);
+      }
+
+      &.button--outline {
+        border-color: var(--color-button-text-hover);
+      }
+    }
+  }
+
+  &__hamburger {
+    fill: var(--color-button-text);
+    width: 1.6rem;
+    margin-inline-start: .1rem;
+
+    .button--outline & {
+      fill: var(--color-button);
+    }
+
+    rect {
+      transform-origin: center;
+    }
+
+    [data-navopen] & { // stylelint-disable max-nesting-depth
+      rect {
+        y: 45px;
+
+        &:nth-of-type(1) {
+          transform: rotate(45deg);
+        }
+
+        &:nth-of-type(2) {
+          opacity: 0;
+        }
+
+        &:nth-of-type(3) {
+          transform: rotate(-45deg);
+        }
+      }
+    } // stylelint-enable max-nesting-depth
+  }
+
+  &__sheet {
+    visibility: hidden;
+    background-color: var(--color-mobile-menu);
+    width: 90vw;
+    height: 100vh;
+    padding: 2.25rem;
+    transform: translateX(100vw);
+    z-index: 21;
+
+    [data-navopen] & {
+      visibility: visible;
+      pointer-events: auto;
+      box-shadow: -10px 0 10px -10px var(--color-nearblack);
+      transform: translateX(10vw);
+    }
+  }
+
+  &__region {
+    &:not(:empty) {
+      margin-block-end: .5rem;
+    }
+  }
+
+  &__navbar {
+    display: flex;
+    flex-direction: column;
+    padding-inline-start: 0;
+    margin-block: 0;
+
+    li {
+      list-style: none;
+    }
+
+    a {
+      display: inline-block;
+      padding-block: .5rem;
+    }
+  }
+
+  &__cover,
+  &__toggle,
+  &__hamburger > rect,
+  &__sheet {
+    // Add some transitions unless user prefer less motion.
+    @media (prefers-reduced-motion: no-preference) {
+      transition: all 130ms ease-in;
+
+      [data-navopen] & {
+        transition: all 330ms ease-out;
+      }
+    }
+  }
+}

layouts/partials/scripts.html

@@ -22,7 +22,7 @@
 {{ end -}}
 
 {{ if $.Param "mobilemenu" -}}
-{{ $mobilemenu := resources.Get "js/mobile.js" | js.Build $opts | fingerprint -}}
+{{ $mobilemenu := resources.Get "js/mobilemenu.js" | js.Build $opts | fingerprint -}}
 <script defer src="{{ $mobilemenu.RelPermalink }}"></script>
 {{ end -}}
 

layouts/partials/styles.html

@@ -2,10 +2,10 @@
 {{ if eq hugo.Environment "development" -}}
   {{ $main_options = merge $main_options (dict "outputStyle" "nested" "enableSourceMap" true) -}}
 {{ end -}}
-{{ $mobile_options := merge $main_options (dict "targetPath" "css/mobile.css") -}}
+{{ $mobile_options := merge $main_options (dict "targetPath" "css/mobilemenu.css") -}}
 {{ $print_options := merge $main_options (dict "targetPath" "css/print.css") -}}
 {{ $main_style := resources.Get "sass/styles.scss" | toCSS $main_options -}}
-{{ $mobile_style := resources.Get "sass/mobile.scss" | toCSS $mobile_options -}}
+{{ $mobile_style := resources.Get "sass/mobilemenu.scss" | toCSS $mobile_options -}}
 {{ $print_style := resources.Get "sass/print.scss" | toCSS $print_options -}}
 {{ if ne hugo.Environment "development" -}}
   {{ $main_style = $main_style | fingerprint -}}