From 20b5fdb997392b2229fe31476bf53d017cc2a14c Mon Sep 17 00:00:00 2001
From: "Z. Charles Dziura" <zachary@dziura.email>
Date: Tue, 22 Apr 2025 23:15:46 -0400
Subject: [PATCH] Add navigation and relevent styling

---
 src/_includes/header.njk | 11 +++++++++--
 src/index.njk            |  4 +++-
 src/styles.css           | 20 ++++++++++++++++++++
 src/styles/variables.css |  1 +
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/_includes/header.njk b/src/_includes/header.njk
index ca033e1..c5756d8 100644
--- a/src/_includes/header.njk
+++ b/src/_includes/header.njk
@@ -1,5 +1,12 @@
+{% macro header(page) %}
 <header>
-	<hgroup class="title">
-		<h1>This Weblog Belongs to<br>Z. Charles Dziura</h1>
+    <hgroup class="title">
+        <h1>This Weblog Belongs to<br>Z. Charles Dziura</h1>
 	</hgroup>
+	<nav>
+		<a href="/" {% if page == 'home' -%}class="current"{%- endif -%}>Home</a>
+		<a href="#" {% if page == 'essays' -%}class="current"{%- endif -%}>Essays</a>
+		<a href="#" {% if page == 'thoughts' -%}class="current"{%- endif -%}>Thoughts</a>
+	</nav>
 </header>
+{% endmacro %}
diff --git a/src/index.njk b/src/index.njk
index a9f3938..8e588e0 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -5,7 +5,9 @@
 {%- endblock -%}
 
 {%- block body -%}
-{%- include "header.njk" -%}
+{%- import "header.njk" as header -%}
+
+{{ header.header(page='home') }}
 
 <main>
 {%- for post in collections.all -%}
diff --git a/src/styles.css b/src/styles.css
index 8e9ac75..2d26a00 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -36,6 +36,26 @@ body > header > .title > h1 {
 	margin: 0;
 }
 
+body > header > nav {
+	display: flex;
+	flex-direction: column;
+	font-size: var(--font-nav);
+}
+
+body > header > nav > a {
+	padding: var(--size-xs) var(--size-xl);
+	text-decoration: none;
+}
+
+body > header > nav > a.current {
+	background-color: var(--color-bg);
+	color: var(--color-on-bg);
+}
+
+body > header > nav > a:first-child.current {
+	border-top: 1px solid var(--color-on-bg);
+}
+
 main {
 	align-items: center;
 	display: flex;
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 31ad77b..5fe7877 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -15,6 +15,7 @@
 	--font-title: 2.4em;
 	--font-body: 1.6em;
 	--font-post-header: 0.8em;
+	--font-nav: 1.6em;
 
 	--gap-sm: 16px;
 	--gap-md: 32px;