Add navigation and relevent styling

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 %}

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 -%}

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;

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;