From f23e6a335242005d5bc71ac0ba152d18179ebe8d Mon Sep 17 00:00:00 2001
From: krvpb024 <krvpb024@protonmail.com>
Date: Wed, 24 Jan 2024 15:00:20 +0800
Subject: [PATCH] add skip to content link

---
 .../template/templates/common/layout.html     |  6 +++++-
 internal/ui/static/css/common.css             | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/internal/template/templates/common/layout.html b/internal/template/templates/common/layout.html
index 3076ec18..aa75ae5a 100644
--- a/internal/template/templates/common/layout.html
+++ b/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">
diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index e89f2f4c..f4e5d5b7 100644
--- a/internal/ui/static/css/common.css
+++ b/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;