functional a11y toggle and css

js code for a11y toggle
commenting out js in body
2026-05-26 23:46:05 +02:00 · 2026-05-26 23:37:28 +02:00 · 2026-05-26 23:33:19 +02:00 · 2026-05-26 23:32:24 +02:00 · 2026-05-26 23:00:57 +02:00 · 2026-05-26 22:45:51 +02:00
8 changed files with 162 additions and 31 deletions
@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Not Found</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">
@@ -40,6 +41,8 @@
 		}
  </style>
  
+  <script src="js/app.js" defer></script>
+  
 </head>

 <body>
@@ -56,6 +59,8 @@
 		</section>
 	</main>
 	
+	<!-- <script src="js/app.js" defer></script> -->
+
 </body>

 </html>
@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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">
@@ -21,6 +22,9 @@
  
  <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>
@@ -131,7 +135,7 @@
    
  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>

@@ -0,0 +1,3 @@
+body {
+	background: red;
+}
@@ -157,9 +157,9 @@
  --color-button-primary-hover: var(--color-orange-500);
  --color-button-primary-active: var(--color-orange-red-600);
  
-  --color-button-secondary: light-dark(var(--color-neutral-300), var(--color-neutral-700));
-  --color-button-secondary-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));
-  --color-button-secondary-active: light-dark(var(--color-neutral-400), var(--color-neutral-800));
+  --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));
  
  --color-text-button-primary: var(--color-neutral-900);
  --color-text-button-primary-hover: var(--color-neutral-100);
@@ -374,6 +374,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo {
  border: none;
  border-radius: var(--radius-xxl);
  text-decoration: none;
+  transition: transform 0.2s ease;
 }

 button, .button-primary, .logo {
@@ -404,10 +405,14 @@ button, .button-primary, .logo {
  fill: currentColor;
 }

+button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
+  text-decoration: none;
+  transform: scale(1.03);
+}
+
 button:hover, .button-primary:hover, .logo:hover {
  background: var(--color-button-primary-hover);
  color: var(--color-text-button-primary);
-  text-decoration: none;
 }

 .button-secondary:hover {
@@ -415,17 +420,20 @@ button:hover, .button-primary:hover, .logo: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);
+}
+
 button:active, .button-primary:active, .logo:active {
  background: var(--color-button-primary-active);
-  box-shadow: var(--shadow-button-active);
  color: var(--color-text-button-primary-active);
-  text-decoration: none;
 }

 .button-secondary:active {
  background: var(--color-button-secondary-active);
  color: var(--color-text-button-secondary-active);
-  box-shadow: var(--shadow-button-active);
 }

 button:visited, .button-primary:visited, .logo:visited {
@@ -504,7 +512,7 @@ button:visited, .button-primary:visited, .logo:visited {
  flex: 1 1 auto;
  display: flex;
  align-self: stretch;
-  background: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  background: var(--color-button-secondary);
  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-button);
 }
@@ -538,19 +546,18 @@ button:visited, .button-primary:visited, .logo:visited {
 }

 .menu-button {
-  background:none;
-  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  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: light-dark(var(--color-neutral-400), var(--color-neutral-400));
-  color: light-dark(var(--color-neutral-900), var(--color-neutral-900));
-  text-decoration: underline;
-  text-underline-offset: 0.175rem;
-  text-decoration-thickness: 0.075rem;
-  transition: 0.2s;
+  background: var(--color-button-secondary-hover);
+  color: var(--color-text-button-seconary-hover);
+  text-decoration: none;
+  transform: scale(1.03);
 }

 .menu-button:active, 
@@ -558,17 +565,15 @@ button:visited, .button-primary:visited, .logo:visited {
 .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-600), var(--color-neutral-600));
-  color: light-dark(var(--color-neutral-100), var(--color-neutral-100));
+  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: underline;
-  text-underline-offset: 0.175rem;
-  text-decoration-thickness: 0.075rem;
-  transition: 0.2s;
+  text-decoration: none;
 }

 .desktop-nav-secondary ul {
@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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">
@@ -21,6 +22,9 @@
  
  <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>
@@ -48,13 +52,13 @@
      
      <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
        <ul>
-          <li><a href="#" class="button-secondary">
+          <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></a></li>
-          <li><a href="#" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+            </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></a></li>
+            </svg><span class="visually-hidden">Change light/dark mode</span></button></li>
        </ul>
      </nav>
  
@@ -144,7 +148,7 @@
    
  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>

@@ -1,3 +1,5 @@
+// Menu system
+
  const body = document.body;
  const menuToggle = document.getElementById('menuToggle');
  const menuClose = document.getElementById('menuClose');
@@ -55,3 +57,103 @@
 	  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();
+  }
+}
@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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">
@@ -21,6 +22,9 @@

  <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>
@@ -116,7 +120,7 @@
 	</footer>
    
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js" defer></script> -->

 </body>

@@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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">
@@ -21,6 +22,9 @@

  <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>
@@ -149,7 +153,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	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