add skip to content link

internal/template/templates/common/layout.html

@@ -60,6 +60,10 @@
     {{ if .user }}{{ if not .user.KeyboardShortcuts }}data-disable-keyboard-shortcuts="true"{{ end }}{{ end }}>
 
     {{ if .user }}
+
+    <a class="skip-to-content-link" href="#main">
+      Skip to content
+    </a>
     <header class="header">
         <nav>
             <div class="logo">
@@ -118,7 +122,7 @@
     {{ if .flashErrorMessage }}
         <div class="flash-error-message alert alert-error">{{ .flashErrorMessage }}</div>
     {{ end }}
-    <main>
+    <main id="main">
         {{template "content" .}}
     </main>
     <template id="keyboard-shortcuts">

internal/ui/static/css/common.css

@@ -64,6 +64,25 @@ a:hover {
   white-space: nowrap !important;
 }
 
+.skip-to-content-link {
+  --padding-size: 8px;
+  --border-size: 1px;
+
+  background-color: var(--category-background-color);
+  color: var(--category-color);
+  border: var(--border-size) solid var(--category-border-color);
+  border-radius: 5px;
+  inset-inline-start: 50%;
+  padding: var(--padding-size);
+  position: absolute;
+  transition: translate 0.3s;
+  translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
+}
+
+.skip-to-content-link:focus {
+  translate: -50% 0;
+}
+
 /* Header and main menu */
 .header {
     margin-top: 10px;