Skip to content

Commit ffcdfc9

Browse files
SamuelMarksSamuelMarks
committed
feat: improve a11y and progressive enhancement (No-JS)
1 parent d627f81 commit ffcdfc9

4 files changed

Lines changed: 103 additions & 7 deletions

File tree

‎ecosystem.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
1313
</head>
1414
<body>
15+
<a href="#main-content" class="skip-link sr-only focusable">Skip to main content</a>
1516
<header class="header">
1617
<div class="container">
1718
<a href="index.html" class="text-inherit no-underline"><h1 class="logo">Offscale</h1></a>
@@ -32,7 +33,7 @@
3233
</div>
3334
</header>
3435

35-
<main>
36+
<main id="main-content">
3637
<section class="hero">
3738
<div class="container">
3839
<h2 class="hero-title" aria-label="Rapid Application Development, Deployment, Documentation, Devices, Deep-learning, Dependability">

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
</head>
1515
<body>
16+
<a href="#main-content" class="skip-link sr-only focusable">Skip to main content</a>
1617
<header class="header">
1718
<div class="container">
1819
<a href="index.html" class="text-inherit no-underline"><h1 class="logo">Offscale</h1></a>
@@ -33,7 +34,7 @@
3334
</div>
3435
</header>
3536

36-
<main>
37+
<main id="main-content">
3738
<section class="hero hero-pipeline">
3839
<div class="container">
3940
<h2 class="hero-title">

‎script.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ document.addEventListener('DOMContentLoaded', () => {
55
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
66
const currentTheme = localStorage.getItem('theme');
77

8-
if (currentTheme == 'dark') {
8+
if (currentTheme === 'dark') {
99
document.documentElement.setAttribute('data-theme', 'dark');
10-
} else if (currentTheme == 'light') {
10+
} else if (currentTheme === 'light') {
1111
document.documentElement.setAttribute('data-theme', 'light');
12-
} else if (prefersDarkScheme.matches) {
13-
document.documentElement.setAttribute('data-theme', 'dark');
1412
}
1513

1614
themeToggleBtn.addEventListener('click', () => {
1715
let theme = document.documentElement.getAttribute('data-theme');
18-
if (theme == 'dark') {
16+
let isCurrentlyDark = theme === 'dark' || (!theme && prefersDarkScheme.matches);
17+
18+
if (isCurrentlyDark) {
1919
document.documentElement.setAttribute('data-theme', 'light');
2020
localStorage.setItem('theme', 'light');
2121
themeToggleBtn.setAttribute('aria-label', 'Switch to dark mode');

‎styles.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -405,6 +405,19 @@ main {
405405

406406

407407
/* Dark Theme Variables */
408+
@media (prefers-color-scheme: dark) {
409+
:root:not([data-theme="light"]) {
410+
--background: #121212;
411+
--surface: #1e1e1e;
412+
--on-background: #e0e0e0;
413+
--on-surface: #e0e0e0;
414+
--text-primary: rgba(255, 255, 255, 0.87);
415+
--text-secondary: rgba(255, 255, 255, 0.60);
416+
--shadow-1: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.5);
417+
--border: #333;
418+
--section-alt: #161616;
419+
}
420+
}
408421
[data-theme="dark"] {
409422
--background: #121212;
410423
--surface: #1e1e1e;
@@ -417,6 +430,69 @@ main {
417430
--section-alt: #161616;
418431
}
419432

433+
@media (prefers-color-scheme: dark) {
434+
:root:not([data-theme="light"]) body {
435+
background-color: var(--background);
436+
color: var(--text-primary);
437+
}
438+
:root:not([data-theme="light"]) .comparison-table th { background-color: #2a2a2a; color: var(--text-primary); }
439+
:root:not([data-theme="light"]) .comparison-table td.highlight { background-color: #1a2a1e; }
440+
:root:not([data-theme="light"]) .comparison-table th.highlight { background-color: #1e3a24; }
441+
:root:not([data-theme="light"]) .hero-pipeline { background-color: var(--background); }
442+
:root:not([data-theme="light"]) .hero-pipeline .hero-title .static-text { color: var(--text-primary); }
443+
:root:not([data-theme="light"]) .hero-pipeline .hero-subtitle { color: var(--text-secondary); }
444+
:root:not([data-theme="light"]) .flowchart text { fill: #e0e0e0 !important; }
445+
:root:not([data-theme="light"]) .flowchart .node rect,
446+
:root:not([data-theme="light"]) .flowchart .node circle,
447+
:root:not([data-theme="light"]) .flowchart .node polygon { fill: #2c1a0c !important; }
448+
:root:not([data-theme="light"]) svg.inline-svg rect,
449+
:root:not([data-theme="light"]) svg.inline-svg circle,
450+
:root:not([data-theme="light"]) svg.inline-svg polygon,
451+
:root:not([data-theme="light"]) svg.inline-svg path.node-bkg {
452+
fill: #2c1a0c !important;
453+
stroke: #ff6a00 !important;
454+
}
455+
:root:not([data-theme="light"]) #my-svg.inline-svg text,
456+
:root:not([data-theme="light"]) #my-svg.inline-svg span,
457+
:root:not([data-theme="light"]) #my-svg.inline-svg p,
458+
:root:not([data-theme="light"]) #my-svg.inline-svg .nodeLabel p,
459+
:root:not([data-theme="light"]) #my-svg.inline-svg .mindmap-node p,
460+
:root:not([data-theme="light"]) #my-svg.inline-svg .node p,
461+
:root:not([data-theme="light"]) #my-svg.inline-svg .mindmap-node span,
462+
:root:not([data-theme="light"]) #my-svg.inline-svg .node span {
463+
fill: #e0e0e0 !important;
464+
color: #e0e0e0 !important;
465+
}
466+
:root:not([data-theme="light"]) svg.inline-svg .cluster rect {
467+
fill: #1a1a1a !important;
468+
stroke: #555 !important;
469+
}
470+
:root:not([data-theme="light"]) svg.inline-svg .edgePath .path,
471+
:root:not([data-theme="light"]) svg.inline-svg .edge-pattern-solid {
472+
stroke: #ff6a00 !important;
473+
}
474+
:root:not([data-theme="light"]) svg.inline-svg .labelBkg,
475+
:root:not([data-theme="light"]) svg.inline-svg .edgeLabel,
476+
:root:not([data-theme="light"]) svg.inline-svg .edgeLabel p,
477+
:root:not([data-theme="light"]) svg.inline-svg .edgeLabel rect {
478+
fill: #1a1a1a !important;
479+
background-color: #1a1a1a !important;
480+
}
481+
:root:not([data-theme="light"]) .footer {
482+
background-color: #121212;
483+
border-top: 1px solid #333;
484+
}
485+
:root:not([data-theme="light"]) :focus-visible {
486+
outline-color: #ff914d;
487+
}
488+
:root:not([data-theme="light"]) .table-row-alt { background-color: #242424; }
489+
:root:not([data-theme="light"]) {
490+
--primary-text: #ff914d;
491+
}
492+
:root:not([data-theme="light"]) #theme-toggle .light-icon { display: inline; }
493+
:root:not([data-theme="light"]) #theme-toggle .dark-icon { display: none; }
494+
}
495+
420496
[data-theme="dark"] body {
421497
background-color: var(--background);
422498
color: var(--text-primary);
@@ -630,6 +706,24 @@ body, .feature-card, .comparison-section, .comparison-table th, .comparison-tabl
630706
border-width: 0;
631707
}
632708

709+
.skip-link.focusable:focus-visible {
710+
clip: auto;
711+
width: auto;
712+
height: auto;
713+
margin: 0;
714+
overflow: visible;
715+
position: absolute;
716+
top: 16px;
717+
left: 16px;
718+
background-color: var(--primary);
719+
color: var(--on-primary);
720+
padding: 12px 24px;
721+
border-radius: 4px;
722+
z-index: 9999;
723+
text-decoration: none;
724+
font-weight: bold;
725+
}
726+
633727
/* Theme Toggle State Fix */
634728
#theme-toggle .light-icon { display: none; }
635729
#theme-toggle .dark-icon { display: inline; }

0 commit comments

Comments
 (0)