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

Tilgjengelighet: Uutilsynet-krav (1.4.11, 2.4.5, 2.4.6)

Browse source 
- Øk slider-track kontrast til 0.35 for 3:1 ratio (1.4.11)
- Endre chart-titler fra div til h3 for riktig overskriftshierarki (2.4.6)
- Endre topic-card overskrifter fra h2 til h3 under gruppe-h2 (2.4.6)
- Legg til brødsmulesti på alle undersider (2.4.5)
- Legg til sitemap-nav i footer på forsiden (2.4.5)

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

7
public/arv/index.html
View file

@ -24,6 +24,7 @@
</head> </head>
<body> <body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a> <a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Arvens forsprang</nav>
<header> <header>
<p class="eyebrow">Lik innsats. Ulikt utgangspunkt.</p> <p class="eyebrow">Lik innsats. Ulikt utgangspunkt.</p>
@ -100,7 +101,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Formue over tid</div> <h3 class="chart-title">Formue over tid</h3>
<div class="chart-desc">A sparer fra null, B starter med arv — begge sparer likt</div> <div class="chart-desc">A sparer fra null, B starter med arv — begge sparer likt</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -115,7 +116,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Absolutt forskjell</div> <h3 class="chart-title">Absolutt forskjell</h3>
<div class="chart-desc">Gapet = arven med rentes rente — vokser alltid</div> <div class="chart-desc">Gapet = arven med rentes rente — vokser alltid</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -131,7 +132,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Arvens andel av Bs formue</div> <h3 class="chart-title">Arvens andel av Bs formue</h3>
<div class="chart-desc">Andelen synker over tid, men det absolutte beløpet vokser alltid</div> <div class="chart-desc">Andelen synker over tid, men det absolutte beløpet vokser alltid</div>
</div> </div>
<div class="legend"> <div class="legend">

7
public/bolig/index.html
View file

@ -24,6 +24,7 @@
</head> </head>
<body> <body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a> <a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Boligforskjellen forsterkes</nav>
<header> <header>
<p class="eyebrow">Samme prisvekst. Ikke det samme resultatet.</p> <p class="eyebrow">Samme prisvekst. Ikke det samme resultatet.</p>
@ -100,7 +101,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Boligverdi over tid</div> <h3 class="chart-title">Boligverdi over tid</h3>
<div class="chart-desc">Begge boliger stiger med samme prosentsats</div> <div class="chart-desc">Begge boliger stiger med samme prosentsats</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -115,7 +116,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Absolutt verdidifferanse</div> <h3 class="chart-title">Absolutt verdidifferanse</h3>
<div class="chart-desc">Kronedifferansen mellom boligene — vokser hvert år</div> <div class="chart-desc">Kronedifferansen mellom boligene — vokser hvert år</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -131,7 +132,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Egenkapitalvekst</div> <h3 class="chart-title">Egenkapitalvekst</h3>
<div class="chart-desc">Belåningen forsterker forskjellen — egenkapitalgapet vokser raskere enn verdigapet</div> <div class="chart-desc">Belåningen forsterker forskjellen — egenkapitalgapet vokser raskere enn verdigapet</div>
</div> </div>
<div class="legend"> <div class="legend">

7
public/boligeierskap/index.html
View file

@ -94,6 +94,7 @@
</head> </head>
<body> <body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a> <a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Hvem eier boligen din?</nav>
<header> <header>
<p class="eyebrow">SSB-data 2015–2024</p> <p class="eyebrow">SSB-data 2015–2024</p>
@ -140,7 +141,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Tre virkeligheter</div> <h3 class="chart-title">Tre virkeligheter</h3>
<div class="chart-desc">Norske husholdninger fordelt etter reelt eierskap, 2024</div> <div class="chart-desc">Norske husholdninger fordelt etter reelt eierskap, 2024</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -162,7 +163,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Gjelden vokser</div> <h3 class="chart-title">Gjelden vokser</h3>
<div class="chart-desc">Fordeling av boliglånsstørrelse blant eiere, 2015–2024</div> <div class="chart-desc">Fordeling av boliglånsstørrelse blant eiere, 2015–2024</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -185,7 +186,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Alder avgjør</div> <h3 class="chart-title">Alder avgjør</h3>
<div class="chart-desc">Eierskap etter husholdningstype, 2024</div> <div class="chart-desc">Eierskap etter husholdningstype, 2024</div>
</div> </div>
<div class="legend"> <div class="legend">

7
public/boutgifter/index.html
View file

@ -101,6 +101,7 @@
</head> </head>
<body> <body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a> <a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Det er dyrt å være fattig</nav>
<header> <header>
<p class="eyebrow">SSB-data 2015–2024</p> <p class="eyebrow">SSB-data 2015–2024</p>
@ -143,7 +144,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Boutgifter spiser inntekten</div> <h3 class="chart-title">Boutgifter spiser inntekten</h3>
<div class="chart-desc">Boutgifter som andel av inntekt, etter inntektskvartil, 2024</div> <div class="chart-desc">Boutgifter som andel av inntekt, etter inntektskvartil, 2024</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -168,7 +169,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Byrden vokser</div> <h3 class="chart-title">Byrden vokser</h3>
<div class="chart-desc">Andel med boutgifter &gt;40 % av inntekt, per kvartil, 2015–2024</div> <div class="chart-desc">Andel med boutgifter &gt;40 % av inntekt, per kvartil, 2015–2024</div>
</div> </div>
<div class="legend" id="legend2"></div> <div class="legend" id="legend2"></div>
@ -186,7 +187,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Penger kjøper eierskap</div> <h3 class="chart-title">Penger kjøper eierskap</h3>
<div class="chart-desc">Boligeierskap etter inntektsgruppe og utsatte grupper, 2024</div> <div class="chart-desc">Boligeierskap etter inntektsgruppe og utsatte grupper, 2024</div>
</div> </div>
<div class="legend"> <div class="legend">

31
public/index.html
View file

@ -129,7 +129,7 @@
outline: 2px solid var(--accent); outline: 2px solid var(--accent);
outline-offset: 2px; outline-offset: 2px;
} }
.topic-card h2 { .topic-card h3 {
font-family: 'Fraunces', serif; font-family: 'Fraunces', serif;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
@ -170,6 +170,10 @@
color: var(--ink3); color: var(--ink3);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
footer nav {
margin-bottom: 0.75rem;
line-height: 2;
}
footer a { color: var(--ink3); } footer a { color: var(--ink3); }
footer a:focus-visible { footer a:focus-visible {
outline: 2px solid var(--accent); outline: 2px solid var(--accent);
@ -218,13 +222,13 @@
<div class="topic-grid"> <div class="topic-grid">
<a href="lonn/" class="topic-card"> <a href="lonn/" class="topic-card">
<span class="tag">Kalkulator</span> <span class="tag">Kalkulator</span>
<h2>Lønnsforskjellen vokser</h2> <h3>Lønnsforskjellen vokser</h3>
<p>Prosentvise tillegg ser rettferdige ut, men en liten forskjell i startlønn blir til hundretusener over en karriere.</p> <p>Prosentvise tillegg ser rettferdige ut, men en liten forskjell i startlønn blir til hundretusener over en karriere.</p>
<span class="arrow">Se kalkulatoren &rarr;</span> <span class="arrow">Se kalkulatoren &rarr;</span>
</a> </a>
<a href="lonnsutvikling/" class="topic-card"> <a href="lonnsutvikling/" class="topic-card">
<span class="tag">SSB-data</span> <span class="tag">SSB-data</span>
<h2>Dobbel ulikhet i lønn</h2> <h3>Dobbel ulikhet i lønn</h3>
<p>Direktørene fikk 3× flere kroner i lønnsvekst enn renholdere — og høyere prosentvekst. SSB-tall 2016–2025.</p> <p>Direktørene fikk 3× flere kroner i lønnsvekst enn renholdere — og høyere prosentvekst. SSB-tall 2016–2025.</p>
<span class="arrow">Se visualiseringen &rarr;</span> <span class="arrow">Se visualiseringen &rarr;</span>
</a> </a>
@ -236,19 +240,19 @@
<div class="topic-grid"> <div class="topic-grid">
<a href="bolig/" class="topic-card"> <a href="bolig/" class="topic-card">
<span class="tag">Kalkulator</span> <span class="tag">Kalkulator</span>
<h2>Boligforskjellen forsterkes</h2> <h3>Boligforskjellen forsterkes</h3>
<p>To boliger stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p> <p>To boliger stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
<span class="arrow">Se kalkulatoren &rarr;</span> <span class="arrow">Se kalkulatoren &rarr;</span>
</a> </a>
<a href="boligeierskap/" class="topic-card"> <a href="boligeierskap/" class="topic-card">
<span class="tag">SSB-data</span> <span class="tag">SSB-data</span>
<h2>Hvem eier boligen din?</h2> <h3>Hvem eier boligen din?</h3>
<p>Bare 1 av 3 eier fritt. 38 % deler med banken, 28 % leier. Unge aleneboende? 2 av 3 leier.</p> <p>Bare 1 av 3 eier fritt. 38 % deler med banken, 28 % leier. Unge aleneboende? 2 av 3 leier.</p>
<span class="arrow">Se visualiseringen &rarr;</span> <span class="arrow">Se visualiseringen &rarr;</span>
</a> </a>
<a href="boutgifter/" class="topic-card"> <a href="boutgifter/" class="topic-card">
<span class="tag">SSB-data</span> <span class="tag">SSB-data</span>
<h2>Det er dyrt å være fattig</h2> <h3>Det er dyrt å være fattig</h3>
<p>41 % av de fattigste bruker over 40 % av inntekten på bolig. Blant de rikeste: 7 %. SSB-data 2015–2024.</p> <p>41 % av de fattigste bruker over 40 % av inntekten på bolig. Blant de rikeste: 7 %. SSB-data 2015–2024.</p>
<span class="arrow">Se visualiseringen &rarr;</span> <span class="arrow">Se visualiseringen &rarr;</span>
</a> </a>
@ -260,13 +264,13 @@
<div class="topic-grid"> <div class="topic-grid">
<a href="sparing/" class="topic-card"> <a href="sparing/" class="topic-card">
<span class="tag">Kalkulator</span> <span class="tag">Kalkulator</span>
<h2>Rentes rente forsterker</h2> <h3>Rentes rente forsterker</h3>
<p>Likt sparebeløp, ulik avkastning. Noen få prosentpoeng i forskjell skaper enorme gap over tid.</p> <p>Likt sparebeløp, ulik avkastning. Noen få prosentpoeng i forskjell skaper enorme gap over tid.</p>
<span class="arrow">Se kalkulatoren &rarr;</span> <span class="arrow">Se kalkulatoren &rarr;</span>
</a> </a>
<a href="arv/" class="topic-card"> <a href="arv/" class="topic-card">
<span class="tag">Kalkulator</span> <span class="tag">Kalkulator</span>
<h2>Arvens forsprang</h2> <h3>Arvens forsprang</h3>
<p>Person A starter fra null, person B arver. Begge sparer likt — men gapet lukkes aldri.</p> <p>Person A starter fra null, person B arver. Begge sparer likt — men gapet lukkes aldri.</p>
<span class="arrow">Se kalkulatoren &rarr;</span> <span class="arrow">Se kalkulatoren &rarr;</span>
</a> </a>
@ -276,7 +280,16 @@
</main> </main>
<footer> <footer>
Tallene er illustrative og ikke finansiell rådgivning · <a href="https://kode.naiv.no/olemd/forskjeller.naiv.no">Kildekode</a> <nav aria-label="Alle sider">
<a href="lonn/">Lønnsforskjellen</a> ·
<a href="lonnsutvikling/">Lønnsutvikling</a> ·
<a href="bolig/">Boligforskjellen</a> ·
<a href="boligeierskap/">Boligeierskap</a> ·
<a href="boutgifter/">Boutgifter</a> ·
<a href="sparing/">Sparing</a> ·
<a href="arv/">Arv</a>
</nav>
<p>Tallene er illustrative og ikke finansiell rådgivning · <a href="https://kode.naiv.no/olemd/forskjeller.naiv.no">Kildekode</a></p>
</footer> </footer>
</body> </body>

9
public/lonn/index.html
View file

@ -24,6 +24,7 @@
</head> </head>
<body> <body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a> <a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Lønnsforskjellen vokser</nav>
<header> <header>
<p class="eyebrow">Samme prosent. Ikke det samme resultatet.</p> <p class="eyebrow">Samme prosent. Ikke det samme resultatet.</p>
@ -103,7 +104,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Årslønn over tid</div> <h3 class="chart-title">Årslønn over tid</h3>
<div class="chart-desc">Begge lønninger vokser med samme prosentsats</div> <div class="chart-desc">Begge lønninger vokser med samme prosentsats</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -118,7 +119,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Absolutt lønnsforskjell per år</div> <h3 class="chart-title">Absolutt lønnsforskjell per år</h3>
<div class="chart-desc">Kroneforskjellen i årslønn — vokser hvert år</div> <div class="chart-desc">Kroneforskjellen i årslønn — vokser hvert år</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -134,7 +135,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Lønnsforskjell per måned</div> <h3 class="chart-title">Lønnsforskjell per måned</h3>
<div class="chart-desc">Hva B mottar ekstra på kontoen — hver måned</div> <div class="chart-desc">Hva B mottar ekstra på kontoen — hver måned</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -148,7 +149,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Akkumulert total lønn utbetalt</div> <h3 class="chart-title">Akkumulert total lønn utbetalt</h3>
<div class="chart-desc">Summen av alle utbetalinger gjennom hele perioden</div> <div class="chart-desc">Summen av alle utbetalinger gjennom hele perioden</div>
</div> </div>
<div class="legend"> <div class="legend">

7
public/lonnsutvikling/index.html
View file

@ -96,6 +96,7 @@
</head> </head>
<body> <body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a> <a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Dobbel ulikhet</nav>
<header> <header>
<p class="eyebrow">Reelle tall fra SSB, 2016–2025</p> <p class="eyebrow">Reelle tall fra SSB, 2016–2025</p>
@ -142,7 +143,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Månedslønn over tid</div> <h3 class="chart-title">Månedslønn over tid</h3>
<div class="chart-desc">Gjennomsnittlig månedslønn for utvalgte yrker, 2016–2025</div> <div class="chart-desc">Gjennomsnittlig månedslønn for utvalgte yrker, 2016–2025</div>
</div> </div>
<div class="legend" id="legend1"></div> <div class="legend" id="legend1"></div>
@ -160,7 +161,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Dobbel ulikhet</div> <h3 class="chart-title">Dobbel ulikhet</h3>
<div class="chart-desc">Høytlønte fikk både flere kroner og høyere prosent</div> <div class="chart-desc">Høytlønte fikk både flere kroner og høyere prosent</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -181,7 +182,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Alle hovedyrkesgrupper</div> <h3 class="chart-title">Alle hovedyrkesgrupper</h3>
<div class="chart-desc">Gjennomsnittlig månedslønn etter STYRK-yrkesgruppe, 2016–2025</div> <div class="chart-desc">Gjennomsnittlig månedslønn etter STYRK-yrkesgruppe, 2016–2025</div>
</div> </div>
<div class="legend" id="legend3"></div> <div class="legend" id="legend3"></div>

7
public/sparing/index.html
View file

@ -24,6 +24,7 @@
</head> </head>
<body> <body>
<a href="#main" class="skip-link">Hopp til hovedinnhold</a> <a href="#main" class="skip-link">Hopp til hovedinnhold</a>
<nav class="breadcrumb" aria-label="Brødsmuler"><a href="../">Forskjeller</a> / Rentes rente forsterker</nav>
<header> <header>
<p class="eyebrow">Samme sparebeløp. Ikke det samme resultatet.</p> <p class="eyebrow">Samme sparebeløp. Ikke det samme resultatet.</p>
@ -100,7 +101,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Formue over tid</div> <h3 class="chart-title">Formue over tid</h3>
<div class="chart-desc">Samme sparebeløp, ulik avkastning</div> <div class="chart-desc">Samme sparebeløp, ulik avkastning</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -115,7 +116,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Forskjell i formue</div> <h3 class="chart-title">Forskjell i formue</h3>
<div class="chart-desc">Hvor mye mer B har enn A — vokser eksponentielt</div> <div class="chart-desc">Hvor mye mer B har enn A — vokser eksponentielt</div>
</div> </div>
<div class="legend"> <div class="legend">
@ -131,7 +132,7 @@
<div class="chart-section"> <div class="chart-section">
<div class="chart-header"> <div class="chart-header">
<div> <div>
<div class="chart-title">Avkastning vs. innbetalt</div> <h3 class="chart-title">Avkastning vs. innbetalt</h3>
<div class="chart-desc">Viser hvor mye som er innskudd og hvor mye som er renter</div> <div class="chart-desc">Viser hvor mye som er innskudd og hvor mye som er renter</div>
</div> </div>
<div class="legend"> <div class="legend">

15
public/style.css
View file

@ -44,6 +44,19 @@ body {
top: 0; top: 0;
} }
/* BREADCRUMB */
.breadcrumb {
background: var(--bg2);
padding: 0.5rem 2rem;
font-size: 12px;
color: var(--ink3);
}
.breadcrumb a { color: var(--ink3); }
.breadcrumb a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* HEADER */ /* HEADER */
header { header {
background: var(--ink); background: var(--ink);
@ -145,7 +158,7 @@ main {
flex: 1; flex: 1;
-webkit-appearance: none; -webkit-appearance: none;
height: 3px; height: 3px;
background: rgba(245,242,235,0.15); background: rgba(245,242,235,0.35);
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;