Redesign forside: tematisk gruppering med 2-kolonne grid
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:
parent
2eef9d9f31
commit
bf48ed568e
1 changed files with 104 additions and 55 deletions
|
|
@ -80,23 +80,42 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
max-width: 640px;
|
max-width: 720px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 3rem 1.25rem 4rem;
|
padding: 2.5rem 1.25rem 4rem;
|
||||||
flex: 1;
|
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;
|
display: grid;
|
||||||
gap: 1rem;
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.topic-grid { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-card {
|
.topic-card {
|
||||||
display: block;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 1.5rem 1.75rem;
|
padding: 1.25rem 1.4rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
transition: border-color 0.15s, box-shadow 0.15s;
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
|
@ -107,23 +126,37 @@
|
||||||
}
|
}
|
||||||
.topic-card h2 {
|
.topic-card h2 {
|
||||||
font-family: 'Fraunces', serif;
|
font-family: 'Fraunces', serif;
|
||||||
font-size: 1.2rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.4rem;
|
margin-bottom: 0.35rem;
|
||||||
}
|
}
|
||||||
.topic-card p {
|
.topic-card p {
|
||||||
font-size: 0.95rem;
|
font-size: 0.88rem;
|
||||||
color: var(--ink2);
|
color: var(--ink2);
|
||||||
line-height: 1.6;
|
line-height: 1.55;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
.topic-card .arrow {
|
.topic-card .arrow {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
font-size: 0.85rem;
|
font-size: 0.8rem;
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.6rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
letter-spacing: 0.02em;
|
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 {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -149,51 +182,67 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="topics">
|
|
||||||
|
|
||||||
<a href="lonn/" class="topic-card">
|
<section class="topic-group">
|
||||||
<h2>Lønnsforskjellen vokser</h2>
|
<h2 class="group-heading">Lønn & arbeid</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>
|
<div class="topic-grid">
|
||||||
<span class="arrow">Se kalkulatoren →</span>
|
<a href="lonn/" class="topic-card">
|
||||||
</a>
|
<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 →</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 →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<a href="sparing/" class="topic-card">
|
<section class="topic-group">
|
||||||
<h2>Rentes rente forsterker</h2>
|
<h2 class="group-heading">Bolig</h2>
|
||||||
<p>Likt sparebeløp, ulik avkastning. Noen få prosentpoeng i forskjell skaper enorme gap over tid — takket være rentes rente-effekten.</p>
|
<div class="topic-grid">
|
||||||
<span class="arrow">Se kalkulatoren →</span>
|
<a href="bolig/" class="topic-card">
|
||||||
</a>
|
<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 →</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 →</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 →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<a href="bolig/" class="topic-card">
|
<section class="topic-group">
|
||||||
<h2>Boligforskjellen forsterkes</h2>
|
<h2 class="group-heading">Sparing & arv</h2>
|
||||||
<p>To boliger med ulik pris stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
|
<div class="topic-grid">
|
||||||
<span class="arrow">Se kalkulatoren →</span>
|
<a href="sparing/" class="topic-card">
|
||||||
</a>
|
<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 →</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 →</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 →</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 →</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 →</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 →</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue