Merge pull request #5 from 2kool4idkwhat/main

a11y: add a "skip to main content" link
clente · Sep 29, 2023 · 6f2e7d0 · 6f2e7d0
2 parents 21c4876 + afebeba
commit 6f2e7d0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/assets/style.css b/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%);
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -36,7 +36,7 @@
   <header>
     {{- partial "header.html" . -}}
   </header>
-  <main>
+  <main id="maincontent">
     {{- block "main" . }}{{- end }}
   </main>
   <footer>

diff --git a/layouts/partials/header.html b/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>