restyle: flat Cherenkov-blue design, WCAG (skip link, focus, labels), auto dark mode

2026-07-24 20:20:29 +02:00
parent 4180882065
commit 8a2bf69576
3 changed files with 147 additions and 73 deletions
@@ -16,19 +16,26 @@ const links = [
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content={description} />
+    {/* Sora via Google Fonts for the demo; self-host the woff2 for production. */}
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400..700&display=swap" rel="stylesheet" />
  </head>
  <body>
+    <a class="skip" href="#main">Przejdź do treści</a>
    <header class="site-header">
      <div class="container nav">
        <a class="brand" href="/"><span class="dot"></span> CTAO&nbsp;Portal</a>
        <span class="spacer"></span>
-        {links.map((l) => (
-          <a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
-        ))}
-        <a class="navlink" href="/admin" style="color:var(--brand-2)">✎ Edytor</a>
+        <nav aria-label="Główna nawigacja" style="display: contents">
+          {links.map((l) => (
+            <a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
+          ))}
+        </nav>
+        <a class="navlink navlink--edit" href="/admin">✎ Edytor</a>
      </div>
    </header>
-    <main>
+    <main id="main">
      <slot />
    </main>
    <footer class="footer">