remove header text and relocate site nav for better a11y

2 years ago · ffedcf8836
--- 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 }}
--- 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>
--- 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 {