M assets/css/style.css → assets/css/style.css

@@ -29,6 +29,10 @@ a {
   color: var(--f_med);
 }
 
+a:focus {
+  outline: solid 2px var(--f_inv)
+}
+
 pre, code {
   color: var(--f_med);
   border: 1px solid var(--b_low);

M pages/index.html → pages/index.html

@@ -95,11 +95,13 @@ font-size: 1rem;
         border-radius: var(--border-radius);
     }
 
-    nav li > a:hover {
+    nav li > a:hover,
+    nav li > a:focus {
         background: var(--b_high);
         color: var(--background);
         border-color: var(--background);
         box-shadow: 4px 4px var(--b_high);
+        outline: none;
     }
 
     @media screen and (max-width: 600px) {
@@ -127,15 +129,11 @@ <div class="content">
     <img class="logo" src="/assets/svg/logo-light.svg">
     <nav>
         <ul>
-            <li>
-                <a href="/creative">creative</a>
-            </li>
-            <li>
-                <a href="/projects">projects</a>
-            </li>
+            {{ range .Children }}
             <li>
-                <a href="/about">about</a>
+                <a href="{{ .Path }}">{{ .Title }}</a>
             </li>
+            {{ end }}
             <!-- <li>
                 <a href="/now">now</a>
             </li>

M templates/header.html → templates/header.html

@@ -31,10 +31,12 @@ .breadcrumbs > ul > li > a {
   padding: 0.2rem;
   color: var(--f_med);
 }
-.breadcrumbs > ul > li > a:hover {
+.breadcrumbs > ul > li > a:hover,
+.breadcrumbs > ul > li > a:focus {
   color: var(--background);
   background: var(--b_high);  
   border-radius: var(--border-radius);
+  outline: none;
 }
 .breadcrumbs > ul > li > span {
   padding: 0.2rem;