Jump to content link for a11y

src/rawdata/scss/_core.scss

@@ -769,3 +769,31 @@ footer {
   @include usevar(background-color, background-even-background);
   @include usevar(--fade-color, background-even-background);
 }
+
+.sr-only {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal !important;
+  transition: 0.2s all;
+}
+
+.sr-focusable {
+  @extend .sr-only;
+
+  &:focus {
+    padding: 15px 10px;
+    height: auto;
+    width: auto;
+    background: var(--content-background);
+    clip: initial;
+    clip-path: initial;
+    z-index: 99999;
+  }
+}

src/templates/src/include/header.html

@@ -1,4 +1,5 @@
 <header id="site-header" class="mb3 bb bw1 b--theme-dark">
+    <a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
     <div class="user-options flex justify-center justify-end-ns relative">
         {{ if .User }}
             {{ if .User.IsStaff }}
@@ -96,7 +97,7 @@
         </div>
     </div>
 </header>
-
+<div id="content-start"></div>
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
         const header = document.querySelector('#site-header');