From bf48ed568e172a1ecd08ac36e9bd800f2d6e0bf2 Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Mon, 16 Mar 2026 20:07:48 +0100
Subject: [PATCH] Redesign forside: tematisk gruppering med 2-kolonne grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 public/index.html | 155 ++++++++++++++++++++++++++++++----------------
 1 file changed, 102 insertions(+), 53 deletions(-)

diff --git a/public/index.html b/public/index.html
index bceb3dc..bf356e0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>