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

Redesign forside: tematisk gruppering med 2-kolonne grid

Browse source 
Grupperer visualiseringene i tre temaer:
- Lønn & arbeid (kalkulator + SSB-visualisering)
- Bolig (kalkulator + 2 SSB-visualiseringer)
- Sparing & arv (2 kalkulatorer)

Legger til «Kalkulator»/«SSB-data»-tagger, mer kompakt layout
med 2-kolonne grid, og kategori-overskrifter for bedre oversikt.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-16 20:07:48 +01:00
commit bf48ed568e
1 changed files with 104 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

155
public/index.html
View file

@ -80,23 +80,42 @@
}
main {
max-width: 640px;
max-width: 720px;
margin: 0 auto;
padding: 3rem 1.25rem 4rem;
padding: 2.5rem 1.25rem 4rem;
flex: 1;
}
.topics {
.topic-group {
margin-bottom: 2.25rem;
}
.group-heading {
font-family: 'Fraunces', serif;
font-size: 0.8rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink3);
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.topic-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
@media (max-width: 560px) {
.topic-grid { grid-template-columns: 1fr; }
}
.topic-card {
display: block;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem 1.75rem;
padding: 1.25rem 1.4rem;
text-decoration: none;
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
@ -107,23 +126,37 @@
}
.topic-card h2 {
font-family: 'Fraunces', serif;
font-size: 1.2rem;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.4rem;
margin-bottom: 0.35rem;
}
.topic-card p {
font-size: 0.95rem;
font-size: 0.88rem;
color: var(--ink2);
line-height: 1.6;
line-height: 1.55;
flex: 1;
}
.topic-card .arrow {
display: inline-block;
color: var(--accent);
font-size: 0.85rem;
margin-top: 0.75rem;
font-size: 0.8rem;
margin-top: 0.6rem;
font-weight: 500;
letter-spacing: 0.02em;
}
.topic-card .tag {
display: inline-block;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink3);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0.15rem 0.4rem;
margin-bottom: 0.5rem;
align-self: flex-start;
}
footer {
text-align: center;
@ -149,51 +182,67 @@
</header>
<main>
<div class="topics">
<a href="lonn/" class="topic-card">
<h2>Lønnsforskjellen vokser</h2>
<p>Prosentvise lønnstillegg ser rettferdige ut, men gjør de rike rikere. Se hvordan en liten forskjell i startlønn blir til hundretusener over en karriere.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<section class="topic-group">
<h2 class="group-heading">Lønn &amp; arbeid</h2>
<div class="topic-grid">
<a href="lonn/" class="topic-card">
<span class="tag">Kalkulator</span>
<h2>Lønnsforskjellen vokser</h2>
<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>
</a>
<a href="lonnsutvikling/" class="topic-card">
<span class="tag">SSB-data</span>
<h2>Dobbel ulikhet i lønn</h2>
<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>
</a>
</div>
</section>
<a href="sparing/" class="topic-card">
<h2>Rentes rente forsterker</h2>
<p>Likt sparebeløp, ulik avkastning. Noen få prosentpoeng i forskjell skaper enorme gap over tid — takket være rentes rente-effekten.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<section class="topic-group">
<h2 class="group-heading">Bolig</h2>
<div class="topic-grid">
<a href="bolig/" class="topic-card">
<span class="tag">Kalkulator</span>
<h2>Boligforskjellen forsterkes</h2>
<p>To boliger stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<a href="boligeierskap/" class="topic-card">
<span class="tag">SSB-data</span>
<h2>Hvem eier boligen din?</h2>
<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>
</a>
<a href="boutgifter/" class="topic-card">
<span class="tag">SSB-data</span>
<h2>Det er dyrt å være fattig</h2>
<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>
</a>
</div>
</section>
<a href="bolig/" class="topic-card">
<h2>Boligforskjellen forsterkes</h2>
<p>To boliger med ulik pris stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<section class="topic-group">
<h2 class="group-heading">Sparing &amp; arv</h2>
<div class="topic-grid">
<a href="sparing/" class="topic-card">
<span class="tag">Kalkulator</span>
<h2>Rentes rente forsterker</h2>
<p>Likt sparebeløp, ulik avkastning. Noen få prosentpoeng i forskjell skaper enorme gap over tid.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<a href="arv/" class="topic-card">
<span class="tag">Kalkulator</span>
<h2>Arvens forsprang</h2>
<p>Person A starter fra null, person B arver. Begge sparer likt — men gapet lukkes aldri.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
</div>
</section>
<a href="arv/" class="topic-card">
<h2>Arvens forsprang</h2>
<p>Person A starter fra null, person B arver en sum. Begge sparer likt — men gapet lukkes aldri. Arvet formue vokser eksponentielt uavhengig av innsats.</p>
<span class="arrow">Se kalkulatoren &rarr;</span>
</a>
<a href="lonnsutvikling/" class="topic-card">
<h2>Dobbel ulikhet i lønn</h2>
<p>Direktørene fikk 3× flere kroner i lønnsvekst enn renholdere — og høyere prosentvekst. Dobbel ulikhet i praksis. Reelle SSB-tall, 2016–2025.</p>
<span class="arrow">Se visualiseringen &rarr;</span>
</a>
<a href="boligeierskap/" class="topic-card">
<h2>Hvem eier boligen din?</h2>
<p>Bare 1 av 3 eier boligen fritt. 38 % deler eierskapet med banken, og 28 % leier. Unge aleneboende? 2 av 3 leier. Reelle SSB-tall.</p>
<span class="arrow">Se visualiseringen &rarr;</span>
</a>
<a href="boutgifter/" class="topic-card">
<h2>Det er dyrt å være fattig</h2>
<p>41 % av de fattigste bruker over 40 % av inntekten på bolig. Blant de rikeste: 7 %. Rike betaler mer i kroner, men det merkes knapt. SSB-data 2015–2024.</p>
<span class="arrow">Se visualiseringen &rarr;</span>
</a>
</div>
</main>
<footer>