center text inside .mobile-menu vertically

404.html

@@ -68,6 +68,7 @@
 			</nav>
 		  </div>
 		  
+		  <div class="menu-right">
 		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
 			<ul>
 			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -89,11 +90,10 @@
 			aria-haspopup="true"
 			aria-label="Open menu"
 		  >
-			<span></span>
-			<span></span>
-			<span></span>
+			Menu
 		  </button>
 		  </div>
+		</div>
 	  </header>
 	  
 	  <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -107,7 +107,7 @@
 		<div class="mobile-menu__header">
 		  <strong>Menu</strong>
 		  <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-			✕
+			Close
 		  </button>
 		</div>
 	  

about.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>About – Lars Winter</title>
   <link rel="stylesheet" href="css/style.css">
-  <link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
+  <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
   <meta name="description" content="Creator of visual identities and digital interfaces">
 
   <meta property="og:title" content="Lars Winter">
@@ -50,6 +50,7 @@
         </nav>
       </div>
       
+      <div class="menu-right">
       <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
         <ul>
           <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
         aria-haspopup="true"
         aria-label="Open menu"
       >
-        <span></span>
-        <span></span>
-        <span></span>
+        Menu
       </button>
       </div>
+    </div>
   </header>
   
   <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -89,7 +89,7 @@
     <div class="mobile-menu__header">
       <strong>Menu</strong>
       <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-        ✕
+        Close
       </button>
     </div>
   

css/style.css

@@ -55,6 +55,7 @@
 
 :root {
   color-scheme: light dark;
+  background-color: light-dark(#F7F7F7, #121212);
   
   /* Primitive tokens: raw design values */
   --color-neutral-100: #F7F7F7;
@@ -87,6 +88,21 @@
   --color-orange-800: #933D00;
   --color-orange-900: #7A2C00;
   
+  --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
+  --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
+  
+  --gradient-stop-1-light: #f7f7f7;
+  --gradient-stop-1-dark:  #121212;
+  
+  --gradient-stop-2-light: #f7f7f7;
+  --gradient-stop-2-dark:  #121212;
+  
+  --gradient-stop-3-light: #f7f7f780;
+  --gradient-stop-3-dark:  #12121280;
+  
+  --gradient-stop-4-light: #f7f7f700;
+  --gradient-stop-4-dark:  #12121200;
+  
   --text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
   --text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
   --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
@@ -128,9 +144,6 @@
   --radius-xl: 2rem;
   --radius-xxl: 2.5rem;
   
-  --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
-  --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
-
 
   /* Semantic tokens: contextual usage */
   --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -176,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;
-  --overlay: rgb(12 12 12 / 0.24);
-  --panel: rgb(255 255 255 / 0.76);
-  
 }
 
 *,
@@ -195,6 +204,7 @@ html,
 body {
   margin: 0;
   background: var(--color-background);
+  scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */
 }
 
 html {
@@ -222,7 +232,6 @@ h4,
 h5,
 h6,
 p {
-  scroll-margin-top: 80px;
   width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
 }
 
@@ -358,10 +367,10 @@ a:hover {
   text-decoration-thickness: 0.175rem;
 }
 
-a:visited {
+/* a:visited {
   color: var(--color-primary);
   text-decoration-thickness: 0.175rem;
-}
+} */
 
 button, .button-primary, .button-secondary, .menu-button, .logo {
   appearance: none;
@@ -412,9 +421,10 @@ button, .button-primary, .logo {
   fill: currentColor;
 }
 
+@media (hover: hover) {
 button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
   text-decoration: none;
-  transform: scale(1.03);
+  transform: scale(1.04);
 }
 
 button:hover, .button-primary:hover, .logo:hover {
@@ -426,11 +436,12 @@ button:hover, .button-primary:hover, .logo:hover {
   background: var(--color-button-secondary-hover);
   color: var(--color-text-button-secondary-hover);
 }
+}
 
 button:active, .button-primary:active, .button-secondary:active, .logo:active {
   box-shadow: var(--shadow-button-active);
   text-decoration: none;
-  transform: scale(1.03);
+  transform: scale(1.00);
 }
 
 button:active, .button-primary:active, .logo:active {
@@ -443,15 +454,17 @@ button:active, .button-primary:active, .logo:active {
   color: var(--color-text-button-secondary-active);
 }
 
-button:visited, .button-primary:visited, .logo:visited {
+/* button:visited, .button-primary:visited, .logo:visited {
+  background: var(--color-button-primary);
   color: var(--color-text-button-primary);
   text-decoration: none;
 }
 
 .button-secondary:visited {
+  background: var(--color-button-secondary);
   color: var(--color-text-button-secondary);
   text-decoration: none;
-}
+} */
 
 .button-primary span {
   margin-right: 0.3em;
@@ -470,24 +483,20 @@ button:visited, .button-primary:visited, .logo:visited {
   position: sticky;
   top: 0;
   padding-top: max(1px, env(safe-area-inset-top));
-  z-index: 100;
-  background: linear-gradient(
+  z-index: 400;
+  background-image: linear-gradient(
     180deg,
-    light-dark(var(--color-neutral-100), var(--color-neutral-900)) 80%,
-    light-dark(rgba(247,247,247,0), rgba(18,18,18,0)) 100%
+    light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
+    6%,
+    light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
+    44%,
+    light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
+    76%,
+    light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
   );
-  /* -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-  -webkit-mask-image: linear-gradient(
-    to top,
-    rgba(18,18,18,0) 0%,
-    rgba(18,18,18,1.00) 16%
-  );
-  mask-image: linear-gradient(
-    to top,
-    rgba(18,18,18,0) 0%,
-    rgba(18,18,18,1.00) 16%
-  ); */
+  /* background: rgb(255 255 255 / 0.88); */
+  /* backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); */
 }
 
 .menu-bar {
@@ -596,21 +605,21 @@ button:visited, .button-primary:visited, .logo:visited {
 }
 
 .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-toggle.is-open {
-  opacity: 0;
-}
-
 .menu-overlay {
   position: fixed;
   inset: 0;
-  background: var(--overlay);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  background: light-dark(rgb(247 247 247 / 0.4), rgb(18 18 18 / 0.4));
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.25s ease;
@@ -619,17 +628,18 @@ button:visited, .button-primary:visited, .logo:visited {
 
 .mobile-menu {
   position: fixed;
-  inset: auto 1rem 1rem 1rem;
+  top: 7rem;
+  right: var(--spacing-5);
+  left: var(--spacing-5);
   width: auto;
-  max-width: 24rem;
-  margin-inline: auto;
-  background: var(--panel);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgb(255 255 255 / 0.45);
-  border-radius: 1rem;
-  box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
-  padding: 1rem;
+  max-width: none;
+  max-height: calc(100dvh - 7.5rem);
+  overflow-y: auto;
+  margin-inline: 0;
+  background: var(--color-button-secondary);
+  border-radius: calc(36px + var(--spacing-2));
+  box-shadow: var(--shadow-button);
+  padding: 0;
   opacity: 0;
   transform: translateY(1rem) scale(0.98);
   pointer-events: none;
@@ -637,23 +647,28 @@ button:visited, .button-primary:visited, .logo:visited {
   z-index: 300;
 }
 
-.mobile-menu__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
 .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;
-  padding: 0.95rem 1rem;
-  border-radius: 0.75rem;
-  background: rgb(255 255 255 / 0.56);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 72px;
+  border-radius: 36px;
 }
 
 /* .page-content {
@@ -671,23 +686,6 @@ button:visited, .button-primary:visited, .logo:visited {
   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 */
 
@@ -972,7 +970,51 @@ 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);
+  }
   .footer-links {
     flex-direction: column;
     row-gap: var(--spacing-4);
@@ -986,8 +1028,8 @@ footer a:visited {
   main {
     padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
   }
-  .site-header .menu-bar {
-  padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-4);
+  .menu-bar {
+  padding: var(--spacing-4);
   }
   .menu-left, .menu-right {
     gap: var(--spacing-3);
@@ -998,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

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>Lars Winter</title>
   <link rel="stylesheet" href="css/style.css">
-  <link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
+  <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
   <meta name="description" content="Creator of visual identities and digital interfaces">
 
   <meta property="og:title" content="Lars Winter">
@@ -72,7 +72,7 @@
         aria-haspopup="true"
         aria-label="Open menu"
       >
-        Menu
+        <span class="menu-toggle__label">Menu</span>
       </button>
       </div>
     </div>
@@ -86,18 +86,12 @@
     aria-label="Mobile navigation"
     aria-hidden="true"
   >
-    <div class="mobile-menu__header">
-      <strong>Menu</strong>
-      <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-        Close
-      </button>
-    </div>
   
     <nav aria-label="Mobile navigation">
       <ul>
-        <li><a href="/" class="button-primary" aria-current="page">Work</a></li>
-        <li><a href="/legal-notice.html" class="button-primary">About</a></li>
-        <li><a href="/privacy.html" class="button-primary">Blog</a></li>
+        <li><a href="/" class="menu-button" aria-current="page">Work</a></li>
+        <li><a href="/legal-notice.html" class="menu-button">About</a></li>
+        <li><a href="/privacy.html" class="menu-button">Blog</a></li>
       </ul>
     </nav>
   </aside>

js/app.js

@@ -2,7 +2,7 @@
 
   const body = document.body;
   const menuToggle = document.getElementById('menuToggle');
-  const menuClose = document.getElementById('menuClose');
+  const menuToggleLabel = menuToggle?.querySelector('.menu-toggle__label');
   const menuOverlay = document.getElementById('menuOverlay');
   const mobileMenu = document.getElementById('mobileMenu');
   const siteContent = document.getElementById('siteContent');
@@ -13,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', '');
-	menuClose.focus();
+	menuToggle.focus({ preventScroll: true });
   }
 
   function closeMenu() {
@@ -23,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')) {
@@ -43,7 +45,6 @@
   }
 
   menuToggle.addEventListener('click', toggleMenu);
-  menuClose.addEventListener('click', closeMenu);
   menuOverlay.addEventListener('click', closeMenu);
 
   document.addEventListener('keydown', (event) => {

legal-notice.html

@@ -3,10 +3,10 @@
 
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover>
-  <title>Lars Winter</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Legal notice – Lars Winter</title>
   <link rel="stylesheet" href="css/style.css">
-  <link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
+  <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
   <meta name="description" content="Creator of visual identities and digital interfaces">
 
   <meta property="og:title" content="Lars Winter">
@@ -33,7 +33,7 @@
 		<a href="#siteContent">Skip to content</a>
 	</div>
 
-<header class="site-header">
+	<header class="site-header">
 		<div class="menu-bar">
 		  <div class="menu-left">
 			<a class="logo" href="/">
@@ -50,6 +50,7 @@
 			</nav>
 		  </div>
 		  
+		  <div class="menu-right">
 		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
 			<ul>
 			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
 			aria-haspopup="true"
 			aria-label="Open menu"
 		  >
-			<span></span>
-			<span></span>
-			<span></span>
+			Menu
 		  </button>
 		  </div>
+		</div>
 	  </header>
 	  
 	  <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -89,7 +89,7 @@
 		<div class="mobile-menu__header">
 		  <strong>Menu</strong>
 		  <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-			✕
+			Close
 		  </button>
 		</div>
 	  

privacy.html

@@ -4,9 +4,9 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <title>Lars Winter</title>
+  <title>Privacy – Lars Winter</title>
   <link rel="stylesheet" href="css/style.css">
-  <link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
+  <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
   <meta name="description" content="Creator of visual identities and digital interfaces">
 
   <meta property="og:title" content="Lars Winter">
@@ -50,6 +50,7 @@
 			</nav>
 		  </div>
 		  
+		  <div class="menu-right">
 		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
 			<ul>
 			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
 			aria-haspopup="true"
 			aria-label="Open menu"
 		  >
-			<span></span>
-			<span></span>
-			<span></span>
+			Menu
 		  </button>
 		  </div>
+		</div>
 	  </header>
 	  
 	  <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -89,7 +89,7 @@
 		<div class="mobile-menu__header">
 		  <strong>Menu</strong>
 		  <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
-			✕
+			Close
 		  </button>
 		</div>