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: light-dark(var(--color-neutral-200), var(--color-neutral-700));
-  --color-button-secondary-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));
+  --color-button-secondary-hover: light-dark(var(--color-neutral-100), var(--color-neutral-600));
-  --color-button-secondary-active: light-dark(var(--color-neutral-400), var(--color-neutral-800));
+  --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;
+  background: none;
-  color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  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));
+  background: var(--color-button-secondary-hover);
-  color: light-dark(var(--color-neutral-900), var(--color-neutral-900));
+  color: var(--color-text-button-seconary-hover);
-  text-decoration: underline;
+  text-decoration: none;
-  text-underline-offset: 0.175rem;
+  transform: scale(1.03);
  text-decoration-thickness: 0.075rem;
  transition: 0.2s;
 }
 .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));
+  background: light-dark(var(--color-neutral-400), var(--color-neutral-800));
-  color: light-dark(var(--color-neutral-100), var(--color-neutral-100));
+  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-decoration: none;
  text-underline-offset: 0.175rem;
  text-decoration-thickness: 0.075rem;
  transition: 0.2s;
 }
 .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>
+            </svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
-          <li><a href="#" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+          <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