From a1e8e67b0c522f8d2388cf533bd7d000e0a08f10 Mon Sep 17 00:00:00 2001
From: Dennis <me@dnsc.io>
Date: Thu, 19 Feb 2026 18:54:03 +0100
Subject: [PATCH] WIP: header component and index structure

---
 src/components/Header.astro | 53 +++++++++++++++++++++++++++++++++++--
 src/layouts/Layout.astro    |  7 +++++
 src/pages/index.astro       |  6 +++--
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 9ebf994..39230b0 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,19 +1,68 @@
 ---
-
+const { pathname } = Astro.url;
+const currentPath =
+  pathname.endsWith("/") && pathname.length > 1
+    ? pathname.slice(0, -1)
+    : pathname;
+const navItems = [
+  { href: "/", label: "About" },
+  { href: "/now", label: "Now" },
+  { href: "/writing", label: "Writing" },
+];
 ---
 
 <header>
   <h1>dnsc</h1>
+  <ul>
+    {
+      navItems.map(({ href, label }) => (
+        <li>
+          <a href={href} class={currentPath === href ? "active" : ""}>
+            {label}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </header>
 
 <style>
   header {
     display: flex;
     justify-content: center;
-    padding: 1rem;
+    padding: 0.5rem;
+    flex-wrap: wrap;
+    max-width: var(--container-lg);
   }
 
   h1 {
     font-family: var(--font-fancy);
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type: none;
+    justify-content: center;
+    padding-left: 0;
+    margin-bottom: 0.6rem;
+  }
+
+  ul > li {
+    margin-left: 0.6rem;
+    margin-right: 0.6rem;
+  }
+
+  a,
+  a:visited {
+    color: var(--foreground);
+  }
+
+  a.active {
+    font-weight: bold;
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index edb876d..4fcd45e 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -40,7 +40,14 @@ const { title } = Astro.props;
   }
 
   :root {
+    /* Oat UI */
     --background: #ffffff;
+    --primary: #133d56;
+
+    /* Custom */
     --font-fancy: "Desyrel", serif;
+    --container-lg: 1200px;
+    --container-md: 600px;
+    --container-sm: 480px;
   }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5062eff..ef71118 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,10 +5,12 @@ import Header from "../components/Header.astro";
 
 <Layout title="Home">
   <Header />
+  <img src="https://placehold.co/1200x300" />
 </Layout>
 
 <style>
-  h1 {
-    font-family: var(--font-fancy);
+  img {
+    width: 100%;
+    max-width: var(--container-lg);
   }
 </style>