Initial commit: forskjeller.naiv.no

Interactive salary gap calculator (public/lonn/) showing how percentage-based raises amplify absolute salary differences over time. Includes landing page, README, and CLAUDE.md. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:09:04 +01:00 · 2026-03-13 13:09:04 +01:00 · 44c8fe26bf
commit 44c8fe26bf
6 changed files with 946 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="nb">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Forskjeller — interaktive visualiseringer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --bg: #f5f2eb;
+    --ink: #1a1714;
+    --ink2: #5a5650;
+    --ink3: #8a857e;
+    --accent: #c0392b;
+    --border: rgba(26,23,20,0.12);
+  }
+
+  body {
+    font-family: 'DM Sans', sans-serif;
+    background: var(--bg);
+    color: var(--ink);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  header {
+    background: var(--ink);
+    color: var(--bg);
+    padding: 3.5rem 2rem 3rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  header::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 40px,
+      rgba(255,255,255,0.02) 40px,
+      rgba(255,255,255,0.02) 41px
+    );
+  }
+  header .eyebrow {
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: rgba(245,242,235,0.5);
+    margin-bottom: 1rem;
+    font-weight: 400;
+  }
+  header h1 {
+    font-family: 'Fraunces', serif;
+    font-size: clamp(2.2rem, 6vw, 3.5rem);
+    font-weight: 600;
+    line-height: 1.1;
+    margin-bottom: 1rem;
+    position: relative;
+  }
+  header p.lead {
+    font-size: clamp(0.95rem, 2vw, 1.1rem);
+    color: rgba(245,242,235,0.65);
+    max-width: 520px;
+    margin: 0 auto;
+    font-weight: 300;
+    line-height: 1.7;
+  }
+
+  main {
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 3rem 1.25rem 4rem;
+    flex: 1;
+  }
+
+  .topics {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .topic-card {
+    display: block;
+    background: #fff;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 1.5rem 1.75rem;
+    text-decoration: none;
+    color: var(--ink);
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  .topic-card:hover {
+    border-color: var(--accent);
+    box-shadow: 0 2px 12px rgba(192,57,43,0.08);
+  }
+  .topic-card h2 {
+    font-family: 'Fraunces', serif;
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 0.4rem;
+  }
+  .topic-card p {
+    font-size: 0.95rem;
+    color: var(--ink2);
+    line-height: 1.6;
+  }
+  .topic-card .arrow {
+    display: inline-block;
+    color: var(--accent);
+    font-size: 0.85rem;
+    margin-top: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+
+  footer {
+    text-align: center;
+    padding: 2rem 1rem;
+    font-size: 12px;
+    color: var(--ink3);
+    border-top: 1px solid var(--border);
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <p class="eyebrow">forskjeller.naiv.no</p>
+  <h1>Forskjeller</h1>
+  <p class="lead">Interaktive visualiseringer som viser hvordan tilsynelatende små forskjeller vokser over tid.</p>
+</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>
+
+  </div>
+</main>
+
+<footer>
+  Tallene er illustrative og ikke finansiell rådgivning
+</footer>
+
+</body>
+</html>