From ffedcf883616b42cca2de43ed7e04c0f6a6986e4 Mon Sep 17 00:00:00 2001
From: Noah Hall <noah.t.hall@gmail.com>
Date: Mon, 31 Aug 2020 22:24:07 -0400
Subject: [PATCH] remove header text and relocate site nav for better a11y

---
 _includes/layouts/layout.njk | 12 +----------
 _includes/sidebar.njk        | 10 +++++++--
 scss/style.scss              | 39 +-----------------------------------
 3 files changed, 10 insertions(+), 51 deletions(-)
diff --git a/_includes/layouts/layout.njk b/_includes/layouts/layout.njk
index 682cf99..8d37a2c 100644
--- a/_includes/layouts/layout.njk
+++ b/_includes/layouts/layout.njk
@@ -23,17 +23,7 @@
     <link rel="pingback" href="https://webmention.io/www.nthall.com/xmlrpc" />
   </head>
   <body>
-    <header>
-      <div class="title-wrap">
-        <h1 class="home"><a href="{{ '/' | url }}">Noah Hall</a></h1>
-
-        <ul id="nav" class="menu">
-        {% for entry in collections.all | eleventyNavigation %}
-          <li class="menu-item{% if entry.url == page.url %} current{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li>
-        {%- endfor %}
-        </ul>
-      </div>
-    </header>
+    <div class="header"></div>
     <div class="container">
       <main {% if templateClass %} class="{{ templateClass }}"{% endif %}>
         {{ content | safe }}
diff --git a/_includes/sidebar.njk b/_includes/sidebar.njk
index 449083e..86dcfd9 100644
--- a/_includes/sidebar.njk
+++ b/_includes/sidebar.njk
@@ -1,10 +1,16 @@
 <div id="sidebar">
-  <div class="h-card">
-    <h4><a class="p-name u-url" rel="me" href="https://www.nthall.com/">Noah Hall</a></h4>
+  <div class="h-card" role="banner">
+    <h3><a class="p-name u-url" rel="me" href="https://www.nthall.com/">Noah Hall</a></h3>
     <figure>
       <img class="u-photo" src="/img/thumbs/noah-thumb.jpg" title="it's me, hi" alt="picture of me." />
       <figcaption class='p-gender-identity'>he/him/his</figcaption>
     </figure>
+    <ul role="navigation" id="nav" class="menu">
+      <h4>Site Nav</h4>
+      {% for entry in collections.all | eleventyNavigation %}
+        <li class="menu-item{% if entry.url == page.url %} current{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li>
+      {%- endfor %}
+    </ul>
     <a href="/about/">About this site</a>
     <ul>
       <h5>Contact me:</h5>
diff --git a/scss/style.scss b/scss/style.scss
index 0e2040d..6b0f0e0 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -217,48 +217,11 @@ main {
   }
 }
 
-header {
+.header {
   height: 12em;
   background-image: url('/img/swallowtail.jpg');
   background-size: cover;
   background-position: center;
-  padding-top: 3em;
-
-  .title-wrap {
-    padding-top: 3em;
-    @media (prefers-color-scheme: light) {
-      background-color: rgba($base3, .85);
-    }
-    @media (prefers-color-scheme: dark) {
-      background-color: rgba($base03, .85);
-    }
-    width: 35%;
-    margin-left: 6em;
-    padding: 2em 1.5em;
-  }
-
-  h1 > a {
-    font-size: 1.2em;
-    text-decoration: none;
-  }
-  h2 {
-    font-size: 1em;
-  }
-
-  #nav {
-    margin: 0;
-
-    ul li {
-      float: left;
-      display: inline;
-      list-style-type: none;
-
-      &:after {
-        clear: both;
-      }
-    }
-  }
-
 }
 
 footer {
