WIP: header component and index structure

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>

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>

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>