From a6479f4af31c436f49cf7a95be3fcc11d928e6f1 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Thu, 12 Mar 2026 17:30:29 +0200
Subject: [PATCH] Improve style, add 2025 to menu (#23)

---
 out/index.html     | 41 ++++++++++++++++++++++++++++++++++++-----
 out/style.css      | 13 +++++++++++--
 template/style.css | 26 +++++++++++++-------------
 3 files changed, 60 insertions(+), 20 deletions(-)
diff --git a/out/index.html b/out/index.html
index 8382a9e..086108c 100644
--- a/out/index.html
+++ b/out/index.html
@@ -7,14 +7,45 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css">
     <title>Koodiklinikan palkkakysely</title>
+    <style>
+        h1 {
+            text-align: center;
+        }
+        .years {
+            list-style: none;
+            padding: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 16px;
+            justify-content: center;
+        }
+        .years li a {
+            display: block;
+            padding: 24px 48px;
+            border-radius: 8px;
+            color: #222;
+            text-decoration: none;
+            font-size: 2.2em;
+            font-weight: 600;
+        }
+        .years li a:hover {
+            filter: brightness(1.1);
+        }
+        .y2025 a { background: #4ade80; }
+        .y2024 a { background: #60a5fa; }
+        .y2023 a { background: #a78bfa; }
+        .y2022 a { background: #fb923c; }
+        .y2021 a { background: #2dd4bf; }
+    </style>
 </head>
 <body>
 <h1>Koodiklinikan palkkakysely</h1>
-<ul>
-    <li><a href="2021/">2021</a></li>
-    <li><a href="2022/">2022</a></li>
-    <li><a href="2023/">2023</a></li>
-    <li><a href="2024/">2024</a></li>
+<ul class="years">
+    <li class="y2025"><a href="2025/">2025</a></li>
+    <li class="y2024"><a href="2024/">2024</a></li>
+    <li class="y2023"><a href="2023/">2023</a></li>
+    <li class="y2022"><a href="2022/">2022</a></li>
+    <li class="y2021"><a href="2021/">2021</a></li>
 </ul>
 </body>
 </html>
diff --git a/out/style.css b/out/style.css
index 78f7862..e4943af 100644
--- a/out/style.css
+++ b/out/style.css
@@ -1,12 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&display=swap');
+
+:root {
+    --fontstack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
 body {
     max-width: 650px;
     margin: 40px auto;
     padding: 0 10px;
-    font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 18px;
+    line-height: 1.5;
+    font-family: var(--fontstack);
 }
 
 h1, h2, h3 {
-    line-height: 1.2
+    line-height: 1.2;
+    font-family: Fustat, var(--fontstack);
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/template/style.css b/template/style.css
index c6dfd36..af965f7 100644
--- a/template/style.css
+++ b/template/style.css
@@ -1,18 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Fustat:wght@200..800&display=swap");
+
+:root {
+  --fontstack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
 body {
   padding: 1em;
-  font:
-    18px/1.5 -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+
+  font-size: 18px;
+  line-height: 1.5;
+  font-family: var(--fontstack);
 }
 
 body.static-body {
@@ -44,6 +43,7 @@ h1,
 h2,
 h3 {
   line-height: 1.2;
+  font-family: Fustat, var(--fontstack);
 }
 
 a:link {
