Add a me link to the nav bar.

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 {

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>