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) %}
-
- This Weblog Belongs to
Z. Charles Dziura
+
+ This Weblog Belongs to
Z. Charles Dziura
+
+{% 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') }}
{%- 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;