@@ -1,4 +1,5 @@
 :root {
+    /* colors */
     --background: #FBFBF2;
     --f_high: #3a3738;
     --f_med: #847577;
@@ -8,4 +9,7 @@ --b_high: #676164;
     --b_med: #A6A2A2;
     --b_low: #CFD2CD;
     --b_inv: #8f5c71;
+
+    /* borders */
+    --border-radius: 4px;
 }

@@ -58,90 +58,6 @@ aside {
   border-color: var(--b_low);
 }
 
-.header {
-  display: flex;
-  flex-direction: row;
-}
-
-.header .ident {
-  display: flex;
-  flex-direction: row;
-}
-
-.header .ident .name.mobile {
-  display: none;
-  align-self: center;
-  margin-left: 1rem;
-}
-
-.header .logo {
-  height: 5rem;
-}
-
-.header .name {
-  font-weight: bold;
-  font-size: 1.2rem;
-  margin-left: 2rem;
-  color: var(--b_high);
-}
-
-.header .links {
-  user-select: none;
-  width: 100%;
-}
-
-.header ul {
-  padding: 0;
-  margin-left: 2rem;
-  margin-top: 0.5rem;
-}
-
-.header li {
-  font-size: 1rem;
-  list-style: none;
-  margin-top: 0.25rem;
-}
-
-.header li a {
-  padding: 0.1rem 0.25rem;
-  text-decoration: none;
-  color: var(--f_high);
-}
-
-.header li a:hover {
-  color: var(--background);
-  background: var(--b_high);
-  cursor: pointer;
-}
-
-.header li.selected a {
-  color: var(--background);
-  background: var(--b_inv);
-}
-
-.header .columns {
-  display: flex;
-  flex-direction: row;
-}
-
 @media screen and (max-width: 600px) {
-  .header {
-    flex-direction: column;
-  }
 
-  .header .ident .name.mobile {
-    display: block;
-  }
-
-  .header .logo {
-    height: 3rem;
-  }
-
-  .header .links .name {
-    display: none;
-  }
-
-  .header .links .columns>ul:first-child {
-    margin-left: 0;
-  }
 }

@@ -4,8 +4,6 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>About</h1>
-<hr>
 <h2>Me</h2>
 <blockquote>"A someone who sometimes makes something"</blockquote>
 <p>

@@ -4,7 +4,7 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -139,6 +139,7 @@ box-shadow: 4px 4px var(--b_low);
         text-decoration: none;
         font-family: monospace;
         font-size: 1rem;
+        border-radius: var(--border-radius);
     }
 
     nav li > a:hover {

@@ -4,7 +4,6 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
 <img style="width: 80ch;" src="/assets/img/keyboard.jpg"/>
 
 <p>

@@ -4,9 +4,6 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
-<hr>
-
 <h2>About this site</h2>
 <p>
     This site is a place for anything that I want to put online about myself: it's a gallery, a playground, and a journal. This site is built using a bespoke static site generator I created specifically for this site.

@@ -4,7 +4,7 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -4,7 +4,7 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -4,7 +4,7 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -4,7 +4,7 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -50,8 +50,6 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>Style</h1>
-<hr>
 <h2>Palette</h2>
 <p>Based on the <a href="https://github.com/hundredrabbits/Themes/blob/master/themes/marble.svg">"marble" theme</a> from the Hundred Rabbits <a href="https://github.com/hundredrabbits/Themes/tree/master">Themes</a> project, which has a number of great minimal themes (8 colors + background).</p>
 <p>The <code>inv</code> colors were changed to be less monochrome and add some contrast.</p>

@@ -4,7 +4,7 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -5,7 +5,7 @@ <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>{{.Title}}</title>
-        <link rel="stylesheet" href="/assets/css/colors.css">
+        <link rel="stylesheet" href="/assets/css/variables.css">
         {{ template "head" . }}
     </head>
     <body>

@@ -1,22 +1,23 @@
 {{ define "header" }}
-<div class="header">
-  <div class="ident">
-    <a href="/">
-      <img class="logo" src="/assets/svg/logo-light.svg">
-    </a>
-  </div>
-  <div class="links">
-    <div class="columns">
-      {{ range .HeaderLinks }}
-      <ul>
-        {{ range . }}
-        <li {{ if .Active }} class="selected" {{ end }}>
-          <a href="{{.Name}}">{{ .Name }}</a>
-        </li>
-        {{ end }}
-      </ul>
-      {{ end }}
-    </div>
-  </div>
+<style>
+.logo {
+  width: 4rem;
+  margin: 1rem auto;
+  display: block;
+}
+.breadcrumbs {
+  box-shadow: 4px 4px var(--b_low);
+  border: 1px solid var(--b_low);
+  padding: 0.5rem;
+  border-radius: var(--border-radius);
+  font-size: 1rem;
+  font-family: monospace;
+}
+</style>
+<div>
+  <img class="logo" src="/assets/svg/logo-light.svg">
+  <nav class="breadcrumbs">
+    <a href="/">home</a> / <a href="/about">about</a> / <a href="/meta">meta</a> / <span style="font-weight: bold;">style</span>
+  </nav>
 </div>
 {{ end }}

@@ -4,7 +4,7 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<h1>{{.Title}}</h1>
+
 {{ end }}
 
 {{ define "scripts" }}