center text inside .mobile-menu vertically

reduze button scale on hover
change mobile-menu list item height
2026-06-30 00:28:31 +02:00 · 2026-06-30 00:23:34 +02:00 · 2026-06-30 00:21:42 +02:00 · 2026-06-30 00:15:57 +02:00 · 2026-06-29 23:54:24 +02:00 · 2026-06-29 23:36:49 +02:00
12 changed files with 1127 additions and 205 deletions
@@ -3,59 +3,133 @@

 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Page Not Found</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/style.css">
+  <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">
+  <meta property="og:description" content="Portfolio of Lars Winter">
+  <meta property="og:url" content="https://larswinter.me">
+  <meta property="og:image" content="https://larswinter.me/img/lw-og_image.png">
+  <meta property="og:image:alt" content="">
+  <meta name="fediverse:creator" content="@larswinter@mastodon.social">
+
+  <link rel="icon" href="img/favicon.ico" sizes="any">
+  <!-- <link rel="icon" href="img/icon.svg" type="image/svg+xml"> -->
+  <link rel="apple-touch-icon" href="img/lw.png">
+  
+  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
  <style>
-    * {
-      line-height: 1.2;
-      margin: 0;
-    }
-
-    html {
-      color: #888;
-      display: table;
-      font-family: sans-serif;
-      height: 100%;
-      text-align: center;
-      width: 100%;
-    }
-
-    body {
-      display: table-cell;
-      vertical-align: middle;
-      margin: 2em auto;
-    }
-
-    h1 {
-      color: #555;
-      font-size: 2em;
-      font-weight: 400;
-    }
-
-    p {
-      margin: 0 auto;
-      width: 280px;
-    }
-
-    @media only screen and (max-width: 280px) {
-
-      body,
-      p {
-        width: 95%;
-      }
-
-      h1 {
-        font-size: 1.5em;
-        margin: 0 0 0.3em;
-      }
-
-    }
+	 	 main {
+	  		justify-content: center
+	  	}
+	  	h1 {
+	  		font-size: clamp(7.25rem, 4.5rem + 1.1vw, 8rem);
+			color: light-dark(var(--color-orange-red-600), var(--color-orange-red-500)); 
+	    }
+	  
+	  	h2 {
+			font-size: clamp(2.75rem, 2.5rem + 1.1vw, 4rem);
+		}
+		
+		h1, h2, p {
+			text-align: center;
+		}
  </style>
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
-  <h1>Page Not Found</h1>
-  <p>Sorry, but the page you were trying to view does not exist.</p>
+		
+	<div id="skipLink">
+		<a href="#siteContent">Skip to content</a>
+	</div>
+
+	<header class="site-header">
+		<div class="menu-bar">
+		  <div class="menu-left">
+			<a class="logo" href="/">
+			  <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">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">
+		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
+			<ul>
+			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+				<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+				</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+			  <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+				</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"
+		  >
+			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>
+			<h1>4💀4</h1>
+			<h2>Page Not Found</h2>
+			<p>Sorry, but the page you were trying to view does not exist.</p>
+		</section>
+	</main>
+	
+	<!-- <script src="js/app.js" defer></script> -->
+
 </body>

 </html>
@@ -1,4 +1,5 @@
 Copyright (c) HTML5 Boilerplate
+Copyright (c) 2026 Lars Winter

 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
@@ -16,4 +17,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
@@ -2,19 +2,10 @@

 This is the portfolio website and blog of Lars Winter.

-## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Structure](#structure)
+## License

-## Installation
-```bash
-git clone <repo>
-cd project
-npm install  # if applicable
-```
+Code in this repository is licensed under the MIT License. See the `LICENSE` file.

-## Usage
-Quick start example.
+## Asset notice

-## Structure
+All images, screenshots, logos, trademarks, and project visuals in this repository are excluded from the code license unless explicitly stated otherwise. Such materials are the property of their respective copyright owners and may not be reused, redistributed, or modified without permission.
@@ -0,0 +1,155 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <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>
+  <meta name="description" content="Creator of visual identities and digital interfaces">
+
+  <meta property="og:title" content="Lars Winter">
+  <meta property="og:description" content="Portfolio of Lars Winter">
+  <meta property="og:url" content="https://larswinter.me">
+  <meta property="og:image" content="https://larswinter.me/img/lw-og_image.png">
+  <meta property="og:image:alt" content="">
+  <meta name="fediverse:creator" content="@larswinter@mastodon.social">
+
+  <link rel="icon" href="img/favicon.ico" sizes="any">
+  <!-- <link rel="icon" href="img/icon.svg" type="image/svg+xml"> -->
+  <link rel="apple-touch-icon" href="img/lw.png">
+  
+  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
+  <script src="js/app.js" defer></script>
+  
+</head>
+
+<body>
+  
+  <div id="skipLink">
+    <a href="#siteContent">Skip to content</a>
+  </div>
+  
+  <header class="site-header">
+    <div class="menu-bar">
+      <div class="menu-left">
+        <a class="logo" href="/">
+          <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">Work</a></li>
+            <li><a href="/about.html" class="menu-button" aria-current="page">About</a></li>
+            <li><a href="/privacy.html" class="menu-button">Blog</a></li>
+          </ul>
+        </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">
+            <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+            </svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+          <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+              <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+            </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"
+      >
+        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 id="siteContent" class="page-content">
+    
+    <!--  target="_blank" rel="noopener noreferrer"  -->
+    
+    <header class="content-box content-intro">
+      <h1 class="headline size-h2">
+        About text
+      </h1>
+    </header>
+    
+    <section class="content-box content-text">
+      <p class="text">
+        As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me <a href="mailto:contact@larswinter.me">via email</a> for work collaborations and other requests. You can also find me on one of those fancy social networks, like <a rel="me" href="https://mastodon.social/@larswinter">Mastodon</a>, <a href="https://www.linkedin.com/in/larswinter">LinkedIn</a> (if really necessary), <del>Instagram</del>, and <del>Twitter</del>.
+      </p>
+    </section>
+    
+    <div class="content-box placeholder">
+      
+    </div>
+    
+    <!-- <div class="footer-fade"></div> -->
+    
+  </main>
+    
+  <footer>
+    <div class="footer-content">
+      <span>© 2018–<span id="year"></span> Lars Winter</span>
+      <div class="footer-links">
+        <div>
+          <a href="/legal-notice.html">Legal notice</a>
+        </div>
+        <div>
+          <a href="/privacy.html">Privacy</a>
+        </div>
+        <div>
+          <a href="/archive">Archived Portfolio</a>
+        </div>
+      </div>
+      <script>
+        document.getElementById('year').textContent = new Date().getFullYear();
+      </script>
+    </div>
+  </footer>
+    
+  
+  <!-- Add your site or application content here -->
+  <!-- <script src="js/app.js" defer></script> -->
+
+</body>
+
+</html>
@@ -0,0 +1,69 @@
+*, a, span, li {
+	line-height: var(--line-loose);
+	letter-spacing: 0.12em;
+	word-spacing: 0.16em;
+}
+
+a {
+	line-height: var(--line-loose);
+	letter-spacing: 0.12em;
+	word-spacing: 0.16em;
+}
+
+p, ul, ol, li {
+  margin: 1.6em 0 3.2em 0;
+}
+
+button, .button-primary, .button-secondary, .menu-button, .logo {
+	line-height: var(--line-loose);
+	letter-spacing: 0.12em;
+	word-spacing: 0.16em;
+	text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+button:active, .button-primary:active, .button-secondary:active, .logo:active {
+  text-decoration: underline;
+  text-underline-offset: 0.175rem;
+  text-decoration-thickness: 0.075rem;
+  transition: 0.2s;
+}
+
+.menu-button:hover, 
+.desktop-nav a[aria-current="page"]:hover,
+.mobile-menu a[aria-current="page"]:hover {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active,
+.desktop-nav a[aria-current="page"],
+.mobile-menu a[aria-current="page"] {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active {
+  text-decoration: underline;
+	text-underline-offset: 0.175rem;
+	text-decoration-thickness: 0.075rem;
+	transition: 0.2s;
+}
+
@@ -55,6 +55,7 @@

 :root {
  color-scheme: light dark;
+  background-color: light-dark(#F7F7F7, #121212);
  
  /* Primitive tokens: raw design values */
  --color-neutral-100: #F7F7F7;
@@ -65,7 +66,7 @@
  --color-neutral-600: #5B5B5B;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #292929;
-  --color-neutral-900: #0F0F0F;
+  --color-neutral-900: #121212;
  
  --color-orange-red-100: #FFE7CC;
  --color-orange-red-200: #FFC999;
@@ -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);
@@ -94,6 +110,8 @@
  --text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
  --text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  
+  --round-interval: 2px;
+  
  --text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-small: 0.875rem;
  --text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
@@ -126,9 +144,6 @@
  --radius-xl: 2rem;
  --radius-xxl: 2.5rem;
  
-  --shadow-box: 0px 2px 8px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.12);
-  --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);

  /* Semantic tokens: contextual usage */
  --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -150,18 +165,30 @@
  
  --color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
  --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
+  --color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700));
  
-  --color-primary-button: var(--color-orange-red-500);
-  --color-primary-button-hover: var(--color-orange-500);
-  --color-primary-button-active: var(--color-orange-red-600);
+  --color-button-primary: var(--color-orange-red-500);
+  --color-button-primary-hover: var(--color-orange-500);
+  --color-button-primary-active: var(--color-orange-red-600);
  
-  --color-text-button: var(--color-neutral-900);
-  --color-text-button-active: var(--color-neutral-100);
+  --color-button-secondary: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  --color-button-secondary-hover: light-dark(var(--color-neutral-100), var(--color-neutral-600));
+  --color-button-secondary-active: light-dark(var(--color-neutral-300), var(--color-neutral-800));
  
-  --border: #d8d8d8;
-  --overlay: rgb(12 12 12 / 0.24);
-  --panel: rgb(255 255 255 / 0.76);
+  --color-text-button-primary: var(--color-neutral-900);
+  --color-text-button-primary-hover: var(--color-neutral-100);
+  --color-text-button-primary-active: var(--color-neutral-900);
  
+  --color-text-button-secondary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-text-button-seconary-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+  --color-text-button-seconary-active: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+  
+  --shadow-box: var(--shadow-light);
+  
+  --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);
+
 }

 *,
@@ -173,14 +200,19 @@
  -webkit-font-smoothing: antialiased;
 }

+html,
+body {
+  margin: 0;
+  background: var(--color-background);
+  scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */
+}
+
 html {
  scroll-behavior: smooth;
 }

 body {
-  margin: 0;
-  background: var(--color-background);
-  color: var(--color-text);
+  color: var(--color-text-primary);
  font-family: "MD UI", Helvetica, sans;
  font-style: normal;
  font-weight: 400;
@@ -199,9 +231,7 @@ h3,
 h4,
 h5,
 h6,
-p,
-li {
-  scroll-margin-top: 80px;
+p {
  width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
 }

@@ -290,27 +320,27 @@ h1, h2, h3, h4, h5, h6 {
 }

 h1, .size-h1 {
-  font-size: var(--text-h1);
+  font-size: round(down, var(--text-h1), var(--round-interval));
 }

 h2, .size-h2 {
-  font-size: var(--text-h2);
+  font-size: round(down, var(--text-h2), var(--round-interval));
 }

 h3, .size-h3 {
-  font-size: var(--text-h3);
+  font-size: round(down, var(--text-h3), var(--round-interval));
 }

 h4, .size-h4 {
-  font-size: var(--text-h4);
+  font-size: round(down, var(--text-h4), var(--round-interval));
 }

 h5, .size-h5 {
-  font-size: var(--text-h5);
+  font-size: round(down, var(--text-h5), var(--round-interval));
 }

 h6, .size-h6 {
-  font-size: var(--text-h6);
+  font-size: round(down, var(--text-h6), var(--round-interval));
 }

 p, ul, ol, li {
@@ -318,7 +348,7 @@ p, ul, ol, li {
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "ss01" 1, "ss02" 1;
-  font-size: var(--text-body);
+  font-size: round(down, var(--text-body), var(--round-interval));
  line-height: var(--line-relaxed);
  margin: var(--spacing-3) 0 var(--spacing-6) 0;
  text-align: left;
@@ -337,12 +367,17 @@ a:hover {
  text-decoration-thickness: 0.175rem;
 }

-a:visited {
+/* a:visited {
  color: var(--color-primary);
  text-decoration-thickness: 0.175rem;
-}
+} */

-button, .link-button {
+button, .button-primary, .button-secondary, .menu-button, .logo {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
  min-height: 44px;
  font-family: "MD IO", monospace;
  font-style: normal;
@@ -350,33 +385,88 @@ button, .link-button {
  line-height: var(--line-normal);
  letter-spacing: 0.025rem;
  padding: 0.875rem 1rem;
-  min-height: 44px;
-  background: var(--color-primary-button);
-  font-size: var(--text-button);
-  color: var(--color-text-button);
+  font-size: round(down, var(--text-button), var(--round-interval));
  border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xxl);
+  text-decoration: none;
+  transition: transform 0.2s ease;
+  cursor: pointer;
+}
+
+button, .button-primary, .logo {
+  background: var(--color-button-primary);
+  color: var(--color-text-button-primary);
  box-shadow: var(--shadow-button);
+}
+
+.button-secondary {
+  background: var(--color-button-secondary);
+  color: var(--color-text-button-secondary);
+  box-shadow: var(--shadow-button);
+}
+
+.logo, .button-secondary {
+  padding: 1rem;
+  aspect-ratio: 1/1;
+}
+
+.logo svg {
+  height: 2em;
+  width: 2em;
+  flex: none;
+  display: block;
+}
+
+.logo svg path {
+  fill: currentColor;
+}
+
+@media (hover: hover) {
+button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
  text-decoration: none;
+  transform: scale(1.04);
 }

-button:hover, .link-button:hover {
-  background: var(--color-primary-button-hover);
-  color: var(--color-text-button);
+button:hover, .button-primary:hover, .logo:hover {
+  background: var(--color-button-primary-hover);
+  color: var(--color-text-button-primary);
 }

-button:active, .link-button:active {
-  background: var(--color-primary-button-active);
+.button-secondary: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);
-  color: var(--color-text-button-active);
+  text-decoration: none;
+  transform: scale(1.00);
 }

-button:visited, .link-button:visited {
-  color: var(--color-text-button);
+button:active, .button-primary:active, .logo:active {
+  background: var(--color-button-primary-active);
+  color: var(--color-text-button-primary-active);
+}
+
+.button-secondary:active {
+  background: var(--color-button-secondary-active);
+  color: var(--color-text-button-secondary-active);
+}
+
+/* button:visited, .button-primary:visited, .logo:visited {
+  background: var(--color-button-primary);
+  color: var(--color-text-button-primary);
  text-decoration: none;
 }

-.link-button span {
+.button-secondary:visited {
+  background: var(--color-button-secondary);
+  color: var(--color-text-button-secondary);
+  text-decoration: none;
+} */
+
+.button-primary span {
  margin-right: 0.3em;
 }

@@ -384,12 +474,227 @@ button:visited, .link-button:visited {
 Layout styles
 ======================= */

+/* Site header */
+
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: sticky;
+  top: 0;
+  padding-top: max(1px, env(safe-area-inset-top));
+  z-index: 400;
+  background-image: linear-gradient(
+    180deg,
+    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%
+  );
+  /* background: rgb(255 255 255 / 0.88); */
+  /* backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px); */
+}
+
+.menu-bar {
+  width: 900px;
+  padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+}
+
+.menu-left, .menu-right {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-4);
+}
+
+.desktop-nav {
+  flex: 1 1 auto;
+  display: flex;
+  align-self: stretch;
+  background: var(--color-button-secondary);
+  border-radius: var(--radius-xxl);
+  box-shadow: var(--shadow-button);
+}
+
+.desktop-nav ul {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-2);
+  list-style: none;
+  gap: var(--spacing-2);
+}
+
+.desktop-nav li {
+  flex: 1 1 0;
+  display: flex;
+  align-items: stretch;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.desktop-nav .menu-button {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.menu-button {
+  background: none;
+  color: var(--color-text-button-secondary);
+  transition: transform 0.2s ease;
+}
+
+.menu-button:hover, 
+.desktop-nav a[aria-current="page"]:hover,
+.mobile-menu a[aria-current="page"]:hover {
+  background: var(--color-button-secondary-hover);
+  color: var(--color-text-button-seconary-hover);
+  text-decoration: none;
+  transform: scale(1.03);
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active,
+.desktop-nav a[aria-current="page"],
+.mobile-menu a[aria-current="page"] {
+  background: light-dark(var(--color-neutral-400), var(--color-neutral-800));
+  color: var(--color-text-button-seconary-active);
+}
+
+.menu-button:active, 
+.desktop-nav a[aria-current="page"]:active,
+.mobile-menu a[aria-current="page"]:active {
+  text-decoration: none;
+}
+
+.desktop-nav-secondary ul {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.desktop-nav-secondary li {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.desktop-nav-secondary svg {
+  color: currentcolor;
+  height: 1em;
+  width: 1em;
+  flex: none;
+  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 {
  max-width: 900px;
  border: none;
  margin-left:auto;
  margin-right:auto;
-  padding: var(--spacing-4) var(--spacing-6);
+  padding: 0 var(--spacing-6) var(--spacing-4) var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -412,7 +717,7 @@ footer {
  font-family: "MD IO", monospace;
  font-style: normal;
  font-weight: 400;
-  font-size: var(--text-small);
+  font-size: round(down, var(--text-small), var(--round-interval));
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
 }
@@ -529,6 +834,8 @@ footer a:visited {
  color: var(--color-neutral-900);
 }

+/* Footer */
+
 .footer-content {
  display: flex;
  flex-direction: row;
@@ -541,40 +848,28 @@ footer a:visited {
  column-gap: var(--spacing-4);
 }

-/* .footer-fade {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 320px;
-  background: linear-gradient(
-    to bottom,
-    hsla(0, 0%, 6%, 0) 0%,
-    hsla(0, 0%, 6%, 0.1) 13.6%,
-    hsla(0, 0%, 6%, 0.199) 24.8%,
-    hsla(0, 0%, 6%, 0.296) 33.8%,
-    hsla(0, 0%, 6%, 0.391) 41%,
-    hsla(0, 0%, 6%, 0.481) 46.8%,
-    hsla(0, 0%, 6%, 0.568) 51.5%,
-    hsla(0, 0%, 6%, 0.649) 55.4%,
-    hsla(0, 0%, 6%, 0.724) 58.8%,
-    hsla(0, 0%, 6%, 0.792) 62.2%,
-    hsla(0, 0%, 6%, 0.852) 65.9%,
-    hsla(0, 0%, 6%, 0.903) 70.1%,
-    hsla(0, 0%, 6%, 0.944) 75.3%,
-    hsla(0, 0%, 6%, 0.975) 81.8%,
-    hsla(0, 0%, 6%, 0.993) 89.9%,
-    hsl(0, 0%, 6%) 100%
-  );
-  pointer-events: none;
-  z-index: 10;
-} */
-
-
 /* =======================
   Helper classes
   ======================= */

+/*
+ * Adding skipLink styling for screen readers
+ */   
+
+#skipLink a {
+  display: block;
+  position: absolute;
+  left: -999px;
+  top: -999px;
+}
+  
+#skipLink a:focus {
+  left: 0;
+  top: 0;
+  padding: var(--spacing-2);
+  background: var(--color-background-content-box);
+}
+
 /*
 * Hide visually and from screen readers
 */
@@ -651,10 +946,20 @@ footer a:visited {
 /* =======================
   Media Queries for Responsive Design.
   ======================= */
+   
+@media (prefers-color-scheme: dark) {
+  :root {
+    --shadow-box: var(--shadow-dark);
+  }
+}

@media screen and (max-width:768px) {
+  .menu-bar {
+    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4) var(--spacing-5);
+  }
+  
  main {
-    padding: var(--spacing-4) var(--spacing-5);
+    padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
  }
  .footer-content {
    flex-direction: column;
@@ -665,14 +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) {
-  /* .footer-fixed {
-    position: unset;
-    left: unset;
-    right: unset;
-    bottom: unset;
-    z-index: unset;
-  } */
+  .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);
@@ -684,7 +1026,23 @@ footer a:visited {

@media screen and (max-width:375px) {
  main {
-    padding: var(--spacing-4);
+    padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
+  }
+  .menu-bar {
+  padding: var(--spacing-4);
+  }
+  .menu-left, .menu-right {
+    gap: var(--spacing-3);
+  }
+  .desktop-nav-secondary ul {
+    gap: var(--spacing-3);
+  }
+  .menu-bar {
+    gap: var(--spacing-3);
+  }
+  .mobile-menu {
+    right: var(--spacing-4);
+    left: var(--spacing-4);
  }
 }

@@ -3,9 +3,10 @@

 <head>
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <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>
  <meta name="description" content="Creator of visual identities and digital interfaces">

  <meta property="og:title" content="Lars Winter">
@@ -20,36 +21,61 @@
  <link rel="apple-touch-icon" href="img/lw.png">
  
  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
  
+  <div id="skipLink">
+    <a href="#siteContent">Skip to content</a>
+  </div>
+  
  <header class="site-header">
-    <a class="logo" href="/">Logo</a>
+    <div class="menu-bar">
+      <div class="menu-left">
+        <a class="logo" href="/">
+          <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">
+      <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
+        <ul>
+          <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+            <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+            </svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+          <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+              <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+            </svg><span class="visually-hidden">Change light/dark mode</span></button></li>
+        </ul>
+      </nav>
  
-    <nav class="desktop-nav" aria-label="Primary navigation">
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Work</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Contact</a></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></span>
-      <span></span>
-      <span></span>
-    </button>
+      <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>
@@ -60,38 +86,31 @@
    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">
-        ✕
-      </button>
-    </div>
  
    <nav aria-label="Mobile navigation">
      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Work</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Contact</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>
  
  <main id="siteContent" class="page-content">
    
-    <!-- target="_blank" rel="noopener noreferrer" -->
+    <!--  target="_blank" rel="noopener noreferrer"  -->
    
    <header class="content-box content-intro">
      <h1 class="headline size-h2">
-        Hey, I am Lars Winter, a graphic designer from Hamburg. I conceptualize and design projects with a focus on corporate design, design systems, icon design, web design, and editorial design.
+        Hey, I am Lars Winter, a graphic designer from Hamburg. I conceptualize and design projects focused on UX/UI design, design systems, icon design, corporate design, and editorial design.
      </h1>
    </header>
    
-    <div class="content-box content-text">
+    <section class="content-box content-text">
      <p class="text">
        As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me <a href="mailto:contact@larswinter.me">via email</a> for work collaborations and other requests. You can also find me on one of those fancy social networks, like <a rel="me" href="https://mastodon.social/@larswinter">Mastodon</a>, <a href="https://www.linkedin.com/in/larswinter">LinkedIn</a> (if really necessary), <del>Instagram</del>, and <del>Twitter</del>.
      </p>
-    </div>
+    </section>
    
    <div class="content-box placeholder">
      
@@ -123,7 +142,7 @@
    
  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>

@@ -1,6 +1,8 @@
+// Menu system
+
  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');
@@ -11,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() {
@@ -21,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')) {
@@ -41,7 +45,6 @@
  }

  menuToggle.addEventListener('click', toggleMenu);
-  menuClose.addEventListener('click', closeMenu);
  menuOverlay.addEventListener('click', closeMenu);

  document.addEventListener('keydown', (event) => {
@@ -54,4 +57,104 @@
 	if (window.innerWidth >= 768 && body.classList.contains('menu-open')) {
 	  closeMenu();
 	}
-  });
+  });
+  
+  
+// accessibility toggle
+
+{  
+  const STORAGE_KEY = 'extra-css-enabled';
+  
+  function applyOverrideState(enabled) {
+	const link = document.getElementById('a11y-css');
+	const button = document.getElementById('a11y-toggle');
+	if (!link) return;
+  
+	link.disabled = !enabled;
+	button?.setAttribute('aria-pressed', String(enabled));
+  }
+  
+  const enabled = localStorage.getItem(STORAGE_KEY) === 'true';
+  applyOverrideState(enabled);
+  
+  document.getElementById('a11y-toggle')?.addEventListener('click', () => {
+	const nextState = localStorage.getItem(STORAGE_KEY) !== 'true';
+	localStorage.setItem(STORAGE_KEY, String(nextState));
+	applyOverrideState(nextState);
+  });
+}
+  
+  
+// light-dark toggle
+  
+{
+  const STORAGE_KEY = 'theme-preference';
+  const root = document.documentElement;
+  const mq = window.matchMedia('(prefers-color-scheme: dark)');
+  
+  function getSystemTheme() {
+	return mq.matches ? 'dark' : 'light';
+  }
+  
+  function getSavedTheme() {
+	try {
+	  return localStorage.getItem(STORAGE_KEY) || 'system';
+	} catch {
+	  return 'system';
+	}
+  }
+  
+  function setSavedTheme(value) {
+	try {
+	  localStorage.setItem(STORAGE_KEY, value);
+	} catch {}
+  }
+  
+  function applyTheme(theme = getSavedTheme()) {
+	root.style.colorScheme = theme === 'system' ? 'light dark' : theme;
+  }
+  
+  function getNextTheme() {
+	return getSavedTheme() === 'system'
+	  ? (getSystemTheme() === 'dark' ? 'light' : 'dark')
+	  : 'system';
+  }
+  
+  function updateButton() {
+	const btn = document.getElementById('theme-toggle');
+	if (!btn) return;
+  
+	const theme = getSavedTheme();
+	// btn.textContent =
+	//   theme === 'system'
+	// 	? `Use ${getSystemTheme() === 'dark' ? 'light' : 'dark'} theme`
+	// 	: 'Use browser/OS theme';
+  }
+  
+  function toggleTheme() {
+	setSavedTheme(getNextTheme());
+	applyTheme();
+	updateButton();
+  }
+  
+  function initThemeToggle() {
+	applyTheme();
+	updateButton();
+  
+	const btn = document.getElementById('theme-toggle');
+	if (btn) btn.addEventListener('click', toggleTheme);
+  
+	mq.addEventListener('change', () => {
+	  if (getSavedTheme() === 'system') {
+		applyTheme('system');
+		updateButton();
+	  }
+	});
+  }
+  
+  if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', initThemeToggle);
+  } else {
+	initThemeToggle();
+  }
+}
@@ -3,9 +3,10 @@

 <head>
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <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>
  <meta name="description" content="Creator of visual identities and digital interfaces">

  <meta property="og:title" content="Lars Winter">
@@ -18,19 +19,94 @@
  <link rel="icon" href="img/favicon.ico" sizes="any">
  <!-- <link rel="icon" href="img/icon.svg" type="image/svg+xml"> -->
  <link rel="apple-touch-icon" href="img/lw.png">
-
+  
  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
-  <main>
+	
+	<div id="skipLink">
+		<a href="#siteContent">Skip to content</a>
+	</div>
+
+	<header class="site-header">
+		<div class="menu-bar">
+		  <div class="menu-left">
+			<a class="logo" href="/">
+			  <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">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">
+		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
+			<ul>
+			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+				<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+				</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+			  <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+				</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"
+		  >
+			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 class="align-left">
 		
-		<a class="link-button" href="/"><span>←</span>Home</a>
-		
-		<div class="spacer-xl" aria-hidden="true"></div>
+		<!-- <div class="spacer-xl" aria-hidden="true"></div> -->
 		
 		<p>
 			<a href="#en-text">English</a>&#x2006;<a href="#de-text">Deutsch</a>
@@ -110,7 +186,7 @@
 	</footer>
    
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>

@@ -3,9 +3,10 @@

 <head>
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Lars Winter</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>Privacy – Lars Winter</title>
  <link rel="stylesheet" href="css/style.css">
+  <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">
@@ -20,17 +21,92 @@
  <link rel="apple-touch-icon" href="img/lw.png">

  <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)">
+  <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
+  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
+	
+	<div id="skipLink">
+		<a href="#siteContent">Skip to content</a>
+    </div>
+	
+	<header class="site-header">
+		<div class="menu-bar">
+		  <div class="menu-left">
+			<a class="logo" href="/">
+			  <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">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">
+		  <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
+			<ul>
+			  <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
+				<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
+				</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
+			  <li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+				  <path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
+				</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"
+		  >
+			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 class="align-left">
 		
-		<a class="link-button" href="/"><span>←</span>Home</a>
-		
-		<div class="spacer-xl" aria-hidden="true"></div>
+		<!-- <div class="spacer-xl" aria-hidden="true"></div> -->
 		
 		<p>
 			<a href="#en-text">English</a>&#x2006;<a href="#de-text">Deutsch</a>
@@ -144,7 +220,7 @@
    
  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>
Author	SHA1	Message	Date
sefaria	1db03ad4b3	center text inside .mobile-menu vertically	2026-06-30 00:28:31 +02:00
sefaria	59182e2715	reduze button scale on hover	2026-06-30 00:23:34 +02:00
sefaria	af5075afec	change mobile-menu list item height	2026-06-30 00:21:42 +02:00
sefaria	564df534bf	change menu-toggle height to logo height	2026-06-30 00:15:57 +02:00
sefaria	e189c16149	center desktop-nav-secondary at viewport width 579px	2026-06-29 23:54:24 +02:00
sefaria	66126653ee	clean up media queries	2026-06-29 23:36:49 +02:00
sefaria	80d57f5f41	change mobile-menu button styling	2026-06-29 23:27:23 +02:00
sefaria	792e08ad03	prevent scroll on menu toggle	2026-06-29 23:01:41 +02:00
sefaria	cb1c21a305	add menu-button class to mobile-menu items	2026-06-29 22:59:56 +02:00
sefaria	62c9e4b801	change overlay blur variable	2026-06-29 22:52:49 +02:00
sefaria	7576e8b9ee	add close label to menu toggle	2026-06-29 22:50:40 +02:00
sefaria	4aae167054	change mobile menu styling to figma layout	2026-06-29 22:46:01 +02:00
sefaria	a3fc18ddef	set mobile menu width and height	2026-06-29 22:19:41 +02:00
sefaria	c588ee102c	make overlay blur to adhere to light-dark	2026-06-29 17:22:58 +02:00
sefaria	94b0f34f46	change mobile menu close behaviour to menu toggle	2026-06-29 17:17:36 +02:00
sefaria	bb0220c166	change mobile menu styling	2026-06-29 17:16:58 +02:00
sefaria	3583df44ac	revert recent changes	2026-06-29 17:10:57 +02:00
sefaria	72d8e7587a	Merge branch 'origin/feature/add-menu-bar'	2026-06-29 16:56:35 +02:00
sefaria	bfb8fa3b66	change .menu-overlay inset	2026-06-29 16:53:12 +02:00
sefaria	f945b360d1	adding --header-offset variable	2026-06-29 16:52:33 +02:00
sefaria	3b1d8ad199	adding --header-offset variable	2026-06-29 16:50:59 +02:00
sefaria	b45480d073	removing .mobile-menu__header	2026-06-29 16:49:42 +02:00
sefaria	42e08bdb7e	changing mobile menu background blur	2026-06-29 16:42:17 +02:00
sefaria	1ee89a9b1e	add latest main css changes	2026-06-15 23:10:53 +02:00
sefaria	09772ff1a5	comment out a:visited style	2026-06-12 12:51:27 +02:00
sefaria	4323fd87c6	change visited style for all buttons	2026-06-12 12:46:19 +02:00
sefaria	be51d9da8c	More scroll margin for new menu bar	2026-06-12 12:40:14 +02:00
sefaria	455f9c355f	improved button hover size	2026-05-30 17:37:40 +02:00
sefaria	a4a9b28cb1	larger button scale on hover	2026-05-30 17:36:34 +02:00
sefaria	60fa21881f	add site header to all subpages	2026-05-30 17:32:51 +02:00
sefaria	e133278724	fixed button visited appereance	2026-05-28 23:54:42 +02:00
sefaria	a1d9d3b9d8	fixed typo	2026-05-28 23:35:26 +02:00
sefaria	88f3140357	background gradient for site-header	2026-05-28 22:41:00 +02:00
sefaria	0d7beb1dac	less top padding for screen width 440px	2026-05-27 19:31:25 +02:00
sefaria	28735f1163	first draft site-header gradient	2026-05-27 19:18:55 +02:00
sefaria	938b15b741	html, body css fix	2026-05-27 19:14:43 +02:00
sefaria	740198a939	correct meta theme-color value for dark theme	2026-05-27 15:37:06 +02:00
sefaria	579487db22	add viewport-fit=cover to all pages	2026-05-27 15:24:13 +02:00
sefaria	21f21aee0c	add fade to site-header background blur	2026-05-27 14:10:53 +02:00
sefaria	a1faad0b7a	fixed menu bar padding in media queries	2026-05-27 13:41:01 +02:00
sefaria	703670c932	removing old unused layout styles	2026-05-27 13:34:37 +02:00
sefaria	48f6410a76	new menu-bar styling, merge buttons and toggle right	2026-05-27 13:31:33 +02:00
sefaria	f4718451a8	set mobile menu toggle to button design	2026-05-27 13:16:40 +02:00
sefaria	ce85432804	implementing css round() for all font-sizes	2026-05-27 11:24:20 +02:00
sefaria	0f34535ba4	fix header background blur in light theme	2026-05-27 09:58:09 +02:00
sefaria	c22c747e4f	a11y: underline on hover/active links and buttons	2026-05-27 09:45:58 +02:00
sefaria	6bd94c8e19	a11y: more paragraph spacing	2026-05-27 09:39:45 +02:00
sefaria	b7b2861ed1	deleting double styles for visually-hidden	2026-05-27 09:33:01 +02:00
sefaria	069e5346f1	adding blur to site-header, fixing mobile padding	2026-05-27 09:27:39 +02:00
sefaria	710702b4ed	add menu to all pages	2026-05-27 09:15:00 +02:00
sefaria	de4698e6fd	a11y styles, background gradient for header	2026-05-27 09:04:45 +02:00
sefaria	13632637a9	functional a11y toggle and css	2026-05-26 23:46:05 +02:00
sefaria	430602caa3	js code for a11y toggle	2026-05-26 23:37:28 +02:00
sefaria	48de33f495	commenting out js in body	2026-05-26 23:33:19 +02:00
sefaria	96a3470419	adding js toggle for light-dark theme	2026-05-26 23:32:24 +02:00
sefaria	96ec270ed4	transform scale for buttons on hover	2026-05-26 23:00:57 +02:00
sefaria	0521d33193	consistend secondary button and menu styling	2026-05-26 22:45:51 +02:00
sefaria	93a5a13e3e	new button-secondary, coherent styling (variables)	2026-05-26 18:39:31 +02:00
sefaria	db5fe419ce	new primary menu styles, cleaned up variables	2026-05-26 17:38:54 +02:00
sefaria	4dcd811381	styling secondary; underline hover primary menu	2026-05-25 21:05:08 +02:00
sefaria	9365d7c6f9	adding icon secondary nav with buttons	2026-05-25 20:22:02 +02:00
sefaria	be60619353	changing nav shadow from button to box	2026-05-25 00:30:02 +02:00
sefaria	3b5d826ce0	creating about page for menu testing	2026-05-25 00:27:40 +02:00
sefaria	992233f4cb	Fixing desktop menu appereance	2026-05-25 00:23:45 +02:00
sefaria	9a92ed4489	menu styling and active page state	2026-05-24 00:32:41 +02:00
sefaria	4e287c0e85	change menu styling	2026-05-23 15:35:42 +02:00
sefaria	a49bc03fff	set menu width to main width, align left	2026-05-23 00:58:41 +02:00
sefaria	164fae3263	fixed button sizing	2026-05-23 00:30:23 +02:00
sefaria	013e125f37	more menu styling	2026-05-23 00:17:23 +02:00
sefaria	362fa4ef58	create left aligned menu styling	2026-05-23 00:17:02 +02:00
sefaria	2b131f2b1f	Adding menu css, styling logo	2026-05-22 22:00:08 +02:00
sefaria	d799b3ce1c	Merge branch 'main' into feature/add-menu-bar # Conflicts: # 404.html	2026-05-22 20:21:59 +02:00
sefaria	42324ff42c	redesigned 404 page	2026-05-19 15:57:48 +02:00
sefaria	5b7cdf9e84	corrected copy	2026-05-19 10:21:55 +02:00
sefaria	be9491f1e8	updated og image assets	2026-05-16 15:16:52 +02:00
sefaria	276b8eb510	Merge branch 'main' into feature/add-menu-bar # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.	2026-05-14 18:28:15 +02:00
sefaria	ec54a1f3a2	add skiplink to all sites	2026-05-14 18:25:26 +02:00
sefaria	524afd03ea	adding release tag	2026-05-14 15:42:13 +02:00
sefaria	cc6fa17247	shadow depends on light/dark, media query added	2026-05-14 15:29:04 +02:00
sefaria	4737b78b8a	change darkest black to #121212	2026-05-14 13:39:56 +02:00
sefaria	aa1f270c59	change border radius button	2026-05-13 15:59:19 +02:00
sefaria	2a590a0310	Updated border radius button	2026-05-13 15:55:50 +02:00
sefaria	90a0f39790	Adding skipLink for better screen reader mode	2026-05-13 15:48:54 +02:00
sefaria	43d23aacab	change div to section	2026-05-13 12:20:53 +02:00
sefaria	8dd4e034ee	change div to section	2026-05-13 12:20:08 +02:00
sefaria	5d888daa1d	Changing license type adding license to README	2026-05-08 11:06:26 +02:00
sefaria	13ccaa8658	Changing license type adding license to README	2026-05-08 11:05:04 +02:00