remove mobile menu js

404.html

@@ -59,13 +59,6 @@
 			  <span class="visually-hidden">Home page</span>
 			</a>
 		  
-			<nav class="desktop-nav" aria-label="Primary navigation">
-			  <ul>
-				<li><a href="/" class="menu-button">Work</a></li>
-				<li><a href="/about.html" class="menu-button">About</a></li>
-				<li><a href="/privacy.html" class="menu-button">Blog</a></li>
-			  </ul>
-			</nav>
 		  </div>
 		  
 		  <div class="menu-right">
@@ -81,44 +74,9 @@
 			</ul>
 		  </nav>
 	  
-		  <button
-			class="menu-toggle"
-			id="menuToggle"
-			type="button"
-			aria-expanded="false"
-			aria-controls="mobileMenu"
-			aria-haspopup="true"
-			aria-label="Open menu"
-		  >
-			Menu
-		  </button>
 		  </div>
 		</div>
 	  </header>
-	  
-	  <div class="menu-overlay" id="menuOverlay" hidden></div>
-	  
-	  <aside
-		class="mobile-menu"
-		id="mobileMenu"
-		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>
-		  </ul>
-		</nav>
-	  </aside>
 
 	<main>
 		<section>

css/style.css

@@ -188,7 +188,11 @@
   
   --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);
+  
 }
 
 *,
@@ -204,7 +208,6 @@ html,
 body {
   margin: 0;
   background: var(--color-background);
-  scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */
 }
 
 html {
@@ -232,6 +235,7 @@ h4,
 h5,
 h6,
 p {
+  scroll-margin-top: 80px;
   width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
 }
 
@@ -367,10 +371,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;
@@ -421,10 +425,9 @@ 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.04);
+  transform: scale(1.05);
 }
 
 button:hover, .button-primary:hover, .logo:hover {
@@ -436,12 +439,11 @@ 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.00);
+  transform: scale(1.05);
 }
 
 button:active, .button-primary:active, .logo:active {
@@ -454,7 +456,7 @@ 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;
@@ -464,7 +466,7 @@ button:active, .button-primary:active, .logo:active {
   background: var(--color-button-secondary);
   color: var(--color-text-button-secondary);
   text-decoration: none;
-} */
+}
 
 .button-primary span {
   margin-right: 0.3em;
@@ -483,7 +485,7 @@ button:active, .button-primary:active, .logo:active {
   position: sticky;
   top: 0;
   padding-top: max(1px, env(safe-area-inset-top));
-  z-index: 400;
+  z-index: 100;
   background-image: linear-gradient(
     180deg,
     light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
@@ -494,9 +496,6 @@ button:active, .button-primary:active, .logo:active {
     76%,
     light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
   );
-  /* background: rgb(255 255 255 / 0.88); */
-  /* backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px); */
 }
 
 .menu-bar {
@@ -604,89 +603,6 @@ button:active, .button-primary:active, .logo:active {
   display: block;
 }
 
-.menu-toggle {
-  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: 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;
-  z-index: 200;
-}
-
-.mobile-menu {
-  position: fixed;
-  top: 7rem;
-  right: var(--spacing-5);
-  left: var(--spacing-5);
-  width: auto;
-  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;
-  transition: opacity 0.25s ease, transform 0.25s ease;
-  z-index: 300;
-}
-
-.mobile-menu ul {
-  display: grid;
-  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: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  min-height: 72px;
-  border-radius: 36px;
-}
-
-/* .page-content {
-  padding: 3rem 1.25rem;
-} */
-
-.menu-open .menu-overlay {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.menu-open .mobile-menu {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  pointer-events: auto;
-}
-
-
 /* Maint content */
 
 main, footer {
@@ -970,47 +886,6 @@ 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);
@@ -1040,10 +915,6 @@ footer a:visited {
   .menu-bar {
     gap: var(--spacing-3);
   }
-  .mobile-menu {
-    right: var(--spacing-4);
-    left: var(--spacing-4);
-  }
 }
 
 @media print,

index.html

@@ -40,14 +40,6 @@
           <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
           <span class="visually-hidden">Home page</span>
         </a>
-      
-        <nav class="desktop-nav" aria-label="Primary navigation">
-          <ul>
-            <li><a href="/" class="menu-button" aria-current="page">Work</a></li>
-            <li><a href="/about.html" class="menu-button">About</a></li>
-            <li><a href="/privacy.html" class="menu-button">Blog</a></li>
-          </ul>
-        </nav>
       </div>
       
       <div class="menu-right">
@@ -62,40 +54,10 @@
             </svg><span class="visually-hidden">Change light/dark mode</span></button></li>
         </ul>
       </nav>
-  
-      <button
-        class="menu-toggle"
-        id="menuToggle"
-        type="button"
-        aria-expanded="false"
-        aria-controls="mobileMenu"
-        aria-haspopup="true"
-        aria-label="Open menu"
-      >
-        <span class="menu-toggle__label">Menu</span>
-      </button>
       </div>
     </div>
   </header>
   
-  <div class="menu-overlay" id="menuOverlay" hidden></div>
-  
-  <aside
-    class="mobile-menu"
-    id="mobileMenu"
-    aria-label="Mobile navigation"
-    aria-hidden="true"
-  >
-  
-    <nav aria-label="Mobile navigation">
-      <ul>
-        <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>
-  
   <main id="siteContent" class="page-content">
     
     <!--  target="_blank" rel="noopener noreferrer"  -->

js/app.js

@@ -1,65 +1,3 @@
-// Menu system
-
-  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');
-
-  function openMenu() {
-	body.classList.add('menu-open');
-	menuOverlay.hidden = false;
-	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({ preventScroll: true });
-  }
-
-  function closeMenu() {
-	body.classList.remove('menu-open');
-	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({ preventScroll: true });
-
-	window.setTimeout(() => {
-	  if (!body.classList.contains('menu-open')) {
-		menuOverlay.hidden = true;
-	  }
-	}, 250);
-  }
-
-  function toggleMenu() {
-	if (body.classList.contains('menu-open')) {
-	  closeMenu();
-	} else {
-	  openMenu();
-	}
-  }
-
-  menuToggle.addEventListener('click', toggleMenu);
-  menuOverlay.addEventListener('click', closeMenu);
-
-  document.addEventListener('keydown', (event) => {
-	if (event.key === 'Escape' && body.classList.contains('menu-open')) {
-	  closeMenu();
-	}
-  });
-
-  window.addEventListener('resize', () => {
-	if (window.innerWidth >= 768 && body.classList.contains('menu-open')) {
-	  closeMenu();
-	}
-  });
-  
-  
 // accessibility toggle
 
 {