a11y: add skipnav link

assets/style.css

@@ -145,3 +145,18 @@ h3.blog-filter {
   cursor: not-allowed;
   opacity: 0.7;
 }
+
+/*  "skip to main content"  link */
+.skiplink {
+  position: absolute;
+  top: 5;
+  transform: translateY(-600%);
+  transition: transform 0.5s;
+  background-color: #121212;
+  font-size: larger;
+  padding: 6px;
+}
+
+.skiplink:focus {
+  transform: translateY(0%);
+}

layouts/_default/baseof.html

@@ -36,7 +36,7 @@
   <header>
     {{- partial "header.html" . -}}
   </header>
-  <main>
+  <main id="maincontent">
     {{- block "main" . }}{{- end }}
   </main>
   <footer>

layouts/partials/header.html

@@ -1,2 +1,4 @@
+<a class="skiplink" href="#maincontent">Skip to Main Content</a>
+
 <a href="{{ relURL .Site.Home.Permalink }}" class="title"><h1>{{ .Site.Title }}</h1></a>
 <nav>{{- partial "nav.html" . -}}</nav>