center text inside .mobile-menu vertically

css/style.css

@@ -189,10 +189,6 @@
   --shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
   --shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
 
-  --border: #d8d8d8;
-  --header-offset: 6.5rem;
-  --overlay: light-dark(rgb(247 247 247 / 0.8), rgb(18 18 18 / 0.8));
-  --panel: rgb(255 255 255 / 0.76);
 }
 
 *,
@@ -428,7 +424,7 @@ button, .button-primary, .logo {
 @media (hover: hover) {
 button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
   text-decoration: none;
-  transform: scale(1.05);
+  transform: scale(1.04);
 }
 
 button:hover, .button-primary:hover, .logo:hover {
@@ -609,17 +605,21 @@ button:active, .button-primary:active, .logo:active {
 }
 
 .menu-toggle {
-  display: none;
   position: relative;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+  align-self: stretch;
   transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
 .menu-overlay {
   position: fixed;
   inset: 0;
-  background: var(--overlay);
+  background: light-dark(rgb(247 247 247 / 0.4), rgb(18 18 18 / 0.4));
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(8px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.25s ease;
@@ -628,20 +628,18 @@ button:active, .button-primary:active, .logo:active {
 
 .mobile-menu {
   position: fixed;
-  top: 6.5rem;
+  top: 7rem;
-  right: 1rem;
+  right: var(--spacing-5);
-  bottom: 1rem;
+  left: var(--spacing-5);
-  left: 1rem;
   width: auto;
-  max-width: 24rem;
+  max-width: none;
-  margin-inline: auto;
+  max-height: calc(100dvh - 7.5rem);
-  background: var(--panel);
+  overflow-y: auto;
-  backdrop-filter: blur(16px);
+  margin-inline: 0;
-  -webkit-backdrop-filter: blur(16px);
+  background: var(--color-button-secondary);
-  border: 1px solid rgb(255 255 255 / 0.45);
+  border-radius: calc(36px + var(--spacing-2));
-  border-radius: 1rem;
+  box-shadow: var(--shadow-button);
-  box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
+  padding: 0;
-  padding: 1rem;
   opacity: 0;
   transform: translateY(1rem) scale(0.98);
   pointer-events: none;
@@ -651,14 +649,26 @@ button:active, .button-primary:active, .logo:active {
 
 .mobile-menu ul {
   display: grid;
-  gap: 0.5rem;
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-2);
+  list-style: none;
+  gap: var(--spacing-2);
+}
+
+.mobile-menu li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .mobile-menu a {
-  display: block;
+  display: flex;
-  padding: 0.95rem 1rem;
+  align-items: center;
-  border-radius: 0.75rem;
+  justify-content: center;
-  background: rgb(255 255 255 / 0.56);
+  text-align: center;
+  min-height: 72px;
+  border-radius: 36px;
 }
 
 /* .page-content {
@@ -676,23 +686,6 @@ button:active, .button-primary:active, .logo:active {
   pointer-events: auto;
 }
 
-@media (max-width: 579px) {
-  .desktop-nav {
-    display: none;
-  }
-
-  .menu-toggle {
-    display: inline-block;
-  }
-}
-
-@media (min-width: 580px) {
-  .menu-overlay,
-  .mobile-menu {
-    display: none;
-  }
-}
-
 
 /* Maint content */
 
@@ -977,6 +970,47 @@ footer a:visited {
   }
 }
 
+@media (max-width: 579px) {  
+  .desktop-nav {
+    display: none;
+  }
+  
+  .menu-toggle {
+  display: inline-flex;
+  justify-self: end;
+  min-height: 52px;
+  }
+  
+  .menu-bar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  }
+  
+  .menu-left {
+  justify-self: start;
+  }
+  
+  .menu-right {
+  display: contents;
+  }
+  
+  .desktop-nav-secondary {
+  justify-self: center;
+  }
+  
+  .desktop-nav-secondary ul {
+  justify-content: center;
+  }
+}
+
+@media (min-width: 580px) {
+  .menu-overlay,
+  .mobile-menu {
+    display: none;
+  }
+}
+
 @media screen and (max-width:440px) {
   .menu-bar {
     padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) var(--spacing-5);
@@ -1006,6 +1040,10 @@ footer a:visited {
   .menu-bar {
     gap: var(--spacing-3);
   }
+  .mobile-menu {
+    right: var(--spacing-4);
+    left: var(--spacing-4);
+  }
 }
 
 @media print,

index.html

@@ -72,7 +72,7 @@
         aria-haspopup="true"
         aria-label="Open menu"
       >
-        Menu
+        <span class="menu-toggle__label">Menu</span>
       </button>
       </div>
     </div>
@@ -89,9 +89,9 @@
   
     <nav aria-label="Mobile navigation">
       <ul>
-        <li><a href="/" class="button-primary" aria-current="page">Work</a></li>
+        <li><a href="/" class="menu-button" aria-current="page">Work</a></li>
-        <li><a href="/legal-notice.html" class="button-primary">About</a></li>
+        <li><a href="/legal-notice.html" class="menu-button">About</a></li>
-        <li><a href="/privacy.html" class="button-primary">Blog</a></li>
+        <li><a href="/privacy.html" class="menu-button">Blog</a></li>
       </ul>
     </nav>
   </aside>

js/app.js

@@ -2,6 +2,7 @@
 
   const body = document.body;
   const menuToggle = document.getElementById('menuToggle');
+  const menuToggleLabel = menuToggle?.querySelector('.menu-toggle__label');
   const menuOverlay = document.getElementById('menuOverlay');
   const mobileMenu = document.getElementById('mobileMenu');
   const siteContent = document.getElementById('siteContent');
@@ -12,9 +13,10 @@
 	menuToggle.classList.add('is-open');
 	menuToggle.setAttribute('aria-expanded', 'true');
 	menuToggle.setAttribute('aria-label', 'Close menu');
+	if (menuToggleLabel) menuToggleLabel.textContent = 'Close';
 	mobileMenu.setAttribute('aria-hidden', 'false');
 	siteContent.setAttribute('inert', '');
-	menuToggle.focus();
+	menuToggle.focus({ preventScroll: true });
   }
 
   function closeMenu() {
@@ -22,9 +24,10 @@
 	menuToggle.classList.remove('is-open');
 	menuToggle.setAttribute('aria-expanded', 'false');
 	menuToggle.setAttribute('aria-label', 'Open menu');
+	if (menuToggleLabel) menuToggleLabel.textContent = 'Menu';
 	mobileMenu.setAttribute('aria-hidden', 'true');
 	siteContent.removeAttribute('inert');
-	menuToggle.focus();
+	menuToggle.focus({ preventScroll: true });
 
 	window.setTimeout(() => {
 	  if (!body.classList.contains('menu-open')) {