olemd/forskjeller.naiv.no
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Forbedre tilgjengelighet (WCAG 2.2 AA) på alle sider

Browse source 
- Øk kontrast på slider-labels fra 0.45 til 0.6 opasitet (1.4.3)
- Legg til :focus-visible-stiler på slidere, kort og lenker (2.4.7)
- Legg til skip-link «Hopp til hovedinnhold» på alle sider (2.4.1)
- Knytt form-labels til inputs med for-attributt (1.3.1)
- Legg til role="img" og aria-label på alle chart-canvas (4.1.2)
- Legg til aria-live="polite" på slider-verdivisninger (4.1.3)
- Merk dekorative elementer med aria-hidden="true" (1.3.1)
- Legg til @media (prefers-reduced-motion: reduce) (2.3.3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-25 20:53:44 +01:00
commit c6b70e1e5d
9 changed files with 147 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

29
public/arv/index.html
View file

@ -23,50 +23,51 @@
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">Lik innsats. Ulikt utgangspunkt.</p>
<h1>Arvens<br><em>forsprang</em></h1>
<p class="lead">Person A starter fra null. Person B arver en sum. Begge sparer likt — men gapet lukkes aldri. Se hvordan arv forsterkes over tid.</p>
<div class="stamp">Fødselslotteriet</div>
<div class="stamp" aria-hidden="true">Fødselslotteriet</div>
</header>
<div class="small-diff-banner">
<span class="sd-icon">↗</span>
<span class="sd-icon" aria-hidden="true">↗</span>
<span>Pass på å velge rike foreldre. En arv på <strong id="banner-arv">500 000 kr</strong> vokser til over <strong id="banner-gap">—</strong> på <strong id="banner-aar">30</strong> år — uten at B løfter en finger.</span>
</div>
<main>
<main id="main">
<div class="controls-card">
<h2>Sjekk selv</h2>
<div class="controls-grid">
<div class="control-group">
<label>Arvebeløp (B mottar)</label>
<label for="inheritance">Arvebeløp (B mottar)</label>
<div class="val-row">
<input type="range" id="inheritance" min="100000" max="3000000" step="50000" value="500000">
<span class="val-display" id="inheritance-out">500 000 kr</span>
<span class="val-display" aria-live="polite" id="inheritance-out">500 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Månedlig sparing (begge)</label>
<label for="monthly">Månedlig sparing (begge)</label>
<div class="val-row">
<input type="range" id="monthly" min="1000" max="20000" step="500" value="3000">
<span class="val-display" id="monthly-out">3 000 kr</span>
<span class="val-display" aria-live="polite" id="monthly-out">3 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Årlig avkastning (%)</label>
<label for="rate">Årlig avkastning (%)</label>
<div class="val-row">
<input type="range" id="rate" min="1" max="12" step="0.5" value="7">
<span class="val-display" id="rate-out">7,0 %</span>
<span class="val-display" aria-live="polite" id="rate-out">7,0 %</span>
</div>
</div>
<div class="control-group">
<label>Antall år</label>
<label for="yrs">Antall år</label>
<div class="val-row">
<input type="range" id="yrs" min="5" max="40" step="1" value="30">
<span class="val-display" id="yrs-out">30 år</span>
<span class="val-display" aria-live="polite" id="yrs-out">30 år</span>
</div>
</div>
</div>
@ -107,7 +108,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Person B</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Formue over tid"></canvas></div>
</div>
<!-- Diagram 2: Absolutt forskjell -->
@ -121,7 +122,7 @@
<span><span class="swatch" style="background:#4a3a8a;"></span>Gap (arv × (1+r)ⁿ)</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart2" role="img" aria-label="Diagram: Absolutt forskjell"></canvas></div>
</div>
<div class="insight" id="insight"></div>
@ -137,7 +138,7 @@
<span><span class="swatch" style="background:#b5620a;"></span>Arv-andel (%)</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart3"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart3" role="img" aria-label="Diagram: Arvens andel av Bs formue"></canvas></div>
</div>
<!-- Forklaring -->

29
public/bolig/index.html
View file

@ -23,50 +23,51 @@
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">Samme prisvekst. Ikke det samme resultatet.</p>
<h1>Boligforskjellen<br><em>forsterkes</em></h1>
<p class="lead">To boliger med ulik pris stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
<div class="stamp">Boligfesten</div>
<div class="stamp" aria-hidden="true">Boligfesten</div>
</header>
<div class="small-diff-banner">
<span class="sd-icon">↗</span>
<span class="sd-icon" aria-hidden="true">↗</span>
<span>Med <strong id="banner-diff">1 million</strong> i prisforskjell og <strong id="banner-vekst">4</strong> % årlig vekst: egenkapitalgapet vokser til over <strong id="banner-gap">—</strong> på <strong id="banner-aar">15</strong> år.</span>
</div>
<main>
<main id="main">
<div class="controls-card">
<h2>Sjekk selv</h2>
<div class="controls-grid">
<div class="control-group">
<label>Boligpris A</label>
<label for="priceA">Boligpris A</label>
<div class="val-row">
<input type="range" id="priceA" min="2000000" max="8000000" step="100000" value="3000000">
<span class="val-display" id="priceA-out">3 000 000 kr</span>
<span class="val-display" aria-live="polite" id="priceA-out">3 000 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Boligpris B</label>
<label for="priceB">Boligpris B</label>
<div class="val-row">
<input type="range" id="priceB" min="2000000" max="8000000" step="100000" value="4000000">
<span class="val-display" id="priceB-out">4 000 000 kr</span>
<span class="val-display" aria-live="polite" id="priceB-out">4 000 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Årlig prisvekst (% — lik for begge)</label>
<label for="growth">Årlig prisvekst (% — lik for begge)</label>
<div class="val-row">
<input type="range" id="growth" min="1" max="10" step="0.5" value="4">
<span class="val-display" id="growth-out">4,0 %</span>
<span class="val-display" aria-live="polite" id="growth-out">4,0 %</span>
</div>
</div>
<div class="control-group">
<label>Antall år</label>
<label for="yrs">Antall år</label>
<div class="val-row">
<input type="range" id="yrs" min="5" max="30" step="1" value="15">
<span class="val-display" id="yrs-out">15 år</span>
<span class="val-display" aria-live="polite" id="yrs-out">15 år</span>
</div>
</div>
</div>
@ -107,7 +108,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Bolig B</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Boligverdi over tid"></canvas></div>
</div>
<!-- Diagram 2: Absolutt verdidifferanse -->
@ -121,7 +122,7 @@
<span><span class="swatch" style="background:#4a3a8a;"></span>Verdidifferanse</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart2" role="img" aria-label="Diagram: Absolutt verdidifferanse"></canvas></div>
</div>
<div class="insight" id="insight"></div>
@ -139,7 +140,7 @@
<span><span class="swatch" style="background:#4a3a8a;"></span>EK-gap</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart3"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart3" role="img" aria-label="Diagram: Egenkapitalvekst"></canvas></div>
</div>
<!-- Forklaring -->

11
public/boligeierskap/index.html
View file

@ -93,12 +93,13 @@
</style>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">SSB-data 2015–2024</p>
<h1>Hvem eier<br><em>boligen din?</em></h1>
<p class="lead">Over halvparten av norske «boligeiere» har boliglån. I snitt eier banken 43 % av boligens verdi. Og 28 % leier.</p>
<div class="stamp">Boligdrømmen</div>
<div class="stamp" aria-hidden="true">Boligdrømmen</div>
</header>
<div class="source-strip">
@ -108,7 +109,7 @@
— Boligeierskap og boligøkonomi, husholdninger
</div>
<main>
<main id="main">
<!-- Nøkkeltall -->
<div class="key-number">
@ -148,7 +149,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Leier</span>
</div>
</div>
<div class="chart-wrap h-300"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-300"><canvas id="chart1" role="img" aria-label="Diagram: Tre virkeligheter — eier, eier med lån, leier"></canvas></div>
</div>
<div class="insight">
@ -171,7 +172,7 @@
<span><span class="swatch" style="background:#8b1a1a;"></span>Over 3 mill</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart2"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart2" role="img" aria-label="Diagram: Gjelden vokser over tid"></canvas></div>
</div>
<div class="insight">
@ -193,7 +194,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Leier</span>
</div>
</div>
<div class="chart-wrap" style="height:360px;"><canvas id="chart3"></canvas></div>
<div class="chart-wrap" style="height:360px;"><canvas id="chart3" role="img" aria-label="Diagram: Alder avgjør eierskap"></canvas></div>
</div>
<div class="insight">

11
public/boutgifter/index.html
View file

@ -100,12 +100,13 @@
</style>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">SSB-data 2015–2024</p>
<h1>Det er dyrt<br><em>å være fattig</em></h1>
<p class="lead">De fattigste betaler minst i kroner — men mest av inntekten sin. 41 % av de fattigste bruker over 40 % av inntekten på bolig. Blant de rikeste: 7 %.</p>
<div class="stamp">Boligbyrden</div>
<div class="stamp" aria-hidden="true">Boligbyrden</div>
</header>
<div class="source-strip">
@ -114,7 +115,7 @@
— Boligøkonomi og boligeierskap, husholdninger
</div>
<main>
<main id="main">
<!-- Nøkkeltall -->
<div class="key-number">
@ -154,7 +155,7 @@
<span><span class="swatch" style="background:#8b1a1a;"></span>60 %+</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Boutgifter spiser inntekten"></canvas></div>
</div>
<div class="insight">
@ -172,7 +173,7 @@
</div>
<div class="legend" id="legend2"></div>
</div>
<div class="chart-wrap h-240"><canvas id="chart2"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart2" role="img" aria-label="Diagram: Byrden vokser over tid"></canvas></div>
</div>
<div class="insight">
@ -194,7 +195,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Leier</span>
</div>
</div>
<div class="chart-wrap h-300"><canvas id="chart3"></canvas></div>
<div class="chart-wrap h-300"><canvas id="chart3" role="img" aria-label="Diagram: Penger kjøper eierskap"></canvas></div>
</div>
<div class="insight">

33
public/index.html
View file

@ -120,10 +120,15 @@
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
}
.topic-card:hover {
.topic-card:hover,
.topic-card:focus-visible {
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(192,57,43,0.08);
}
.topic-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.topic-card h2 {
font-family: 'Fraunces', serif;
font-size: 1.1rem;
@ -166,6 +171,29 @@
border-top: 1px solid var(--border);
}
footer a { color: var(--ink3); }
footer a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--ink);
color: var(--bg);
padding: 0.75rem 1.25rem;
border-radius: 0 0 4px 4px;
font-size: 0.9rem;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
</style>
<!-- Privacy-friendly analytics by Plausible -->
<script async src="/js/script.js"></script>
@ -175,6 +203,7 @@
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">forskjeller.naiv.no</p>
@ -182,7 +211,7 @@
<p class="lead">Interaktive visualiseringer som viser hvordan tilsynelatende små forskjeller vokser over tid.</p>
</header>
<main>
<main id="main">
<section class="topic-group">
<h2 class="group-heading">Lønn &amp; arbeid</h2>

31
public/lonn/index.html
View file

@ -23,50 +23,51 @@
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">Samme prosent. Ikke det samme resultatet.</p>
<h1>Lønnsforskjellen<br><em>vokser</em></h1>
<p class="lead">Prosentvise lønnstillegg ser rettferdige ut — men de gjør de rike rikere, hvert eneste år. Se hva som skjer over tid.</p>
<div class="stamp">Spis de rike</div>
<div class="stamp" aria-hidden="true">Spis de rike</div>
</header>
<div class="small-diff-banner">
<span class="sd-icon">↗</span>
<span class="sd-icon" aria-hidden="true">↗</span>
<span>Selv en liten forskjell på <strong id="banner-diff">50 000 kr</strong> i startlønn blir til over <strong id="banner-gap">—</strong> i løpet av en karriere — med identisk prosentvekst.</span>
</div>
<main>
<main id="main">
<div class="controls-card">
<h2>Sjekk selv</h2>
<div class="controls-grid">
<div class="control-group">
<label>Lønn A — lav startlønn</label>
<label for="salA">Lønn A — lav startlønn</label>
<div class="val-row">
<input type="range" id="salA" min="300000" max="1200000" step="10000" value="500000">
<span class="val-display" id="salA-out">500 000 kr</span>
<span class="val-display" aria-live="polite" id="salA-out">500 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Lønn B — høy startlønn</label>
<label for="salB">Lønn B — høy startlønn</label>
<div class="val-row">
<input type="range" id="salB" min="300000" max="2000000" step="10000" value="550000">
<span class="val-display" id="salB-out">550 000 kr</span>
<span class="val-display" aria-live="polite" id="salB-out">550 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Årslig lønnsvekst (% — lik for begge)</label>
<label for="pct">Årslig lønnsvekst (% — lik for begge)</label>
<div class="val-row">
<input type="range" id="pct" min="1" max="10" step="0.5" value="3.5">
<span class="val-display" id="pct-out">3,5 %</span>
<span class="val-display" aria-live="polite" id="pct-out">3,5 %</span>
</div>
</div>
<div class="control-group">
<label>Antall år</label>
<label for="yrs">Antall år</label>
<div class="val-row">
<input type="range" id="yrs" min="5" max="40" step="1" value="20">
<span class="val-display" id="yrs-out">20 år</span>
<span class="val-display" aria-live="polite" id="yrs-out">20 år</span>
</div>
</div>
</div>
@ -110,7 +111,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Lønn B</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Årslønn over tid"></canvas></div>
</div>
<!-- Diagram 2: Årlig gap -->
@ -124,7 +125,7 @@
<span><span class="swatch" style="background:#4a3a8a;"></span>Gap (år)</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart2" role="img" aria-label="Diagram: Absolutt lønnsforskjell per år"></canvas></div>
</div>
<div class="insight" id="insight-monthly"></div>
@ -140,7 +141,7 @@
<span><span class="swatch" style="background:#2c6e49;"></span>Gap (måned)</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart3"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart3" role="img" aria-label="Diagram: Lønnsforskjell per måned"></canvas></div>
</div>
<!-- Diagram 4: Akkumulert -->
@ -156,7 +157,7 @@
<span><span class="swatch" style="background:#b5620a;"></span>Akkum. gap</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart4"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart4" role="img" aria-label="Diagram: Akkumulert total lønn utbetalt"></canvas></div>
</div>
<!-- Forklaring -->

11
public/lonnsutvikling/index.html
View file

@ -95,19 +95,20 @@
</style>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">Reelle tall fra SSB, 2016–2025</p>
<h1>Dobbel<br><em>ulikhet</em></h1>
<p class="lead">De høyest lønte fikk ikke bare flere kroner — de fikk også høyere prosentvis vekst. Dobbel ulikhet i praksis.</p>
<div class="stamp">Lønnsfesten</div>
<div class="stamp" aria-hidden="true">Lønnsfesten</div>
</header>
<div class="source-strip">
Data: <a href="https://www.ssb.no/statbank/table/11418/" target="_blank" rel="noopener">SSB tabell 11418</a> — Gjennomsnittlig månedslønn, alle sektorer, begge kjønn, 2016–2025
</div>
<main>
<main id="main">
<!-- Nøkkeltall -->
<div class="key-number">
@ -146,7 +147,7 @@
</div>
<div class="legend" id="legend1"></div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Månedslønn over tid"></canvas></div>
</div>
<div class="insight">
@ -167,7 +168,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Prosentvekst</span>
</div>
</div>
<div class="chart-wrap" style="height:340px;"><canvas id="chart2"></canvas></div>
<div class="chart-wrap" style="height:340px;"><canvas id="chart2" role="img" aria-label="Diagram: Dobbel ulikhet — kronevekst vs prosentvekst"></canvas></div>
</div>
<div class="insight">
@ -185,7 +186,7 @@
</div>
<div class="legend" id="legend3"></div>
</div>
<div class="chart-wrap" style="height:280px;"><canvas id="chart3"></canvas></div>
<div class="chart-wrap" style="height:280px;"><canvas id="chart3" role="img" aria-label="Diagram: Alle hovedyrkesgrupper"></canvas></div>
</div>
<!-- Forklaring -->

29
public/sparing/index.html
View file

@ -23,50 +23,51 @@
</script>
</head>
<body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<header>
<p class="eyebrow">Samme sparebeløp. Ikke det samme resultatet.</p>
<h1>Rentes rente<br><em>forsterker</em></h1>
<p class="lead">Noen få prosentpoeng i avkastning ser ubetydelig ut — men over tid skaper de enorme forskjeller. Se hva rentes rente gjør med sparepengene dine.</p>
<div class="stamp">Penger lager penger</div>
<div class="stamp" aria-hidden="true">Penger lager penger</div>
</header>
<div class="small-diff-banner">
<span class="sd-icon">↗</span>
<span class="sd-icon" aria-hidden="true">↗</span>
<span>Med <strong id="banner-monthly">3 000 kr/mnd</strong> i <strong id="banner-aar">25</strong> år: bare <strong id="banner-pp">3</strong> prosentpoeng mer i avkastning gir over <strong id="banner-gap">—</strong> ekstra.</span>
</div>
<main>
<main id="main">
<div class="controls-card">
<h2>Sjekk selv</h2>
<div class="controls-grid">
<div class="control-group">
<label>Månedlig sparebeløp</label>
<label for="monthly">Månedlig sparebeløp</label>
<div class="val-row">
<input type="range" id="monthly" min="1000" max="20000" step="500" value="3000">
<span class="val-display" id="monthly-out">3 000 kr</span>
<span class="val-display" aria-live="polite" id="monthly-out">3 000 kr</span>
</div>
</div>
<div class="control-group">
<label>Avkastning A (% per år)</label>
<label for="rateA">Avkastning A (% per år)</label>
<div class="val-row">
<input type="range" id="rateA" min="1" max="15" step="0.5" value="4">
<span class="val-display" id="rateA-out">4,0 %</span>
<span class="val-display" aria-live="polite" id="rateA-out">4,0 %</span>
</div>
</div>
<div class="control-group">
<label>Avkastning B (% per år)</label>
<label for="rateB">Avkastning B (% per år)</label>
<div class="val-row">
<input type="range" id="rateB" min="1" max="15" step="0.5" value="7">
<span class="val-display" id="rateB-out">7,0 %</span>
<span class="val-display" aria-live="polite" id="rateB-out">7,0 %</span>
</div>
</div>
<div class="control-group">
<label>Antall år</label>
<label for="yrs">Antall år</label>
<div class="val-row">
<input type="range" id="yrs" min="5" max="40" step="1" value="25">
<span class="val-display" id="yrs-out">25 år</span>
<span class="val-display" aria-live="polite" id="yrs-out">25 år</span>
</div>
</div>
</div>
@ -107,7 +108,7 @@
<span><span class="swatch" style="background:#c0392b;"></span>Konto B</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart1" role="img" aria-label="Diagram: Formue over tid"></canvas></div>
</div>
<!-- Diagram 2: Forskjell i formue -->
@ -121,7 +122,7 @@
<span><span class="swatch" style="background:#4a3a8a;"></span>Gap</span>
</div>
</div>
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
<div class="chart-wrap h-200"><canvas id="chart2" role="img" aria-label="Diagram: Forskjell i formue"></canvas></div>
</div>
<div class="insight" id="insight"></div>
@ -139,7 +140,7 @@
<span><span class="swatch" style="background:rgba(192,57,43,0.35);"></span>Renter B</span>
</div>
</div>
<div class="chart-wrap h-240"><canvas id="chart3"></canvas></div>
<div class="chart-wrap h-240"><canvas id="chart3" role="img" aria-label="Diagram: Avkastning vs. innbetalt"></canvas></div>
</div>
<!-- Forklaring -->

39
public/style.css
View file

@ -27,6 +27,23 @@ body {
min-height: 100vh;
}
/* SKIP LINK */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--ink);
color: var(--bg);
padding: 0.75rem 1.25rem;
border-radius: 0 0 4px 4px;
font-size: 0.9rem;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
/* HEADER */
header {
background: var(--ink);
@ -97,7 +114,7 @@ main {
font-size: 1rem;
font-weight: 300;
font-style: italic;
color: rgba(245,242,235,0.5);
color: rgba(245,242,235,0.6);
margin-bottom: 1.5rem;
letter-spacing: 0.03em;
}
@ -115,7 +132,7 @@ main {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(245,242,235,0.45);
color: rgba(245,242,235,0.6);
margin-bottom: 0.5rem;
font-weight: 400;
}
@ -142,6 +159,11 @@ main {
transition: transform 0.1s;
}
.control-group input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.control-group input[type=range]:focus-visible {
outline: 2px solid #e8b4a0;
outline-offset: 4px;
border-radius: 2px;
}
.control-group input[type=range]::-moz-range-thumb {
width: 16px; height: 16px;
border-radius: 50%;
@ -356,6 +378,10 @@ footer {
margin-top: 3rem;
}
footer a { color: var(--ink3); }
footer a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* RESPONSIVE CHART HEIGHTS */
.h-240 { height: 240px; }
@ -368,3 +394,12 @@ footer a { color: var(--ink3); }
.controls-card { padding: 1.25rem; }
.explainer { padding: 1.25rem; }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}