From 4403980e2eb663512787bd3d268fe58107fa3cc1 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sat, 22 Feb 2025 22:09:14 -0500
Subject: [PATCH] Add a me link to the nav bar.

---
 default_environment/stylesheet/main.css       | 41 +++++++++++++++++++
 .../templates/html/page_header.dust           |  3 ++
 2 files changed, 44 insertions(+)

diff --git a/default_environment/stylesheet/main.css b/default_environment/stylesheet/main.css
index 77e69ec..d8c5b26 100644
--- a/default_environment/stylesheet/main.css
+++ b/default_environment/stylesheet/main.css
@@ -22,6 +22,11 @@
   --table-border-color: #6a687a;
   --table-odd-background-color: #0a0a0a;
   --table-even-background-color: #141414;
+
+  --header-nav-regular-font-color: var(--site-text-color);
+  --header-nav-regular-background-color: var(--site-background-color);
+  --header-nav-hover-font-color: var(--site-background-color);
+  --header-nav-hover-background-color: var(--site-text-color);
 }
 
 @media (prefers-color-scheme: light) {
@@ -45,6 +50,11 @@
     --table-border-color: #959785;
     --table-odd-background-color: #f5f5f5;
     --table-even-background-color: #ebebeb;
+
+    --header-nav-regular-font-color: var(--site-text-color);
+    --header-nav-regular-background-color: var(--site-background-color);
+    --header-nav-hover-font-color: var(--site-background-color);
+    --header-nav-hover-background-color: var(--site-text-color);
   }
 }
 
@@ -72,11 +82,16 @@ body {
 }
 
 .page_header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
   width: 100%;
   max-width: var(--main-max-width);
   border-bottom: 0.1rem solid var(--header-divider-color);
 
   .home_link {
+    display: block;
     font-size: 2rem;
     font-weight: 600;
     text-decoration: none;
@@ -86,6 +101,32 @@ body {
       color: var(--site-text-color);
     }
   }
+
+  .header_nav_bar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: end;
+    align-items: stretch;
+    column-gap: 1rem;
+
+    .nav_link {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      color: var(--header-nav-regular-font-color);
+      background: var(--header-nav-regular-background-color);
+      padding: 0 0.5rem;
+      transition-property: background, color;
+      transition-duration: 0.2s;
+      transition-timing-function: ease-out;
+
+      &:hover {
+        color: var(--header-nav-hover-font-color);
+        background: var(--header-nav-hover-background-color);
+      }
+    }
+  }
 }
 
 .main_content {
diff --git a/default_environment/templates/html/page_header.dust b/default_environment/templates/html/page_header.dust
index d14af84..dd8f9d3 100644
--- a/default_environment/templates/html/page_header.dust
+++ b/default_environment/templates/html/page_header.dust
@@ -1,4 +1,7 @@
 <header class="page_header">
   <a class="home_link" href="{.home_link}">{.website_title}</a>
   {! TODO: Additional links? Probably using the nav semantic element. !}
+  <nav class="header_nav_bar">
+    <a class="nav_link" href="{.me_link}"><div>About Me</div></a>
+  </nav>
 </header>