Add a skip link to the page layout

I tried to run my website through a screen reader, and thought this
would be a nice addition.

Also it turns out my website is *mostly* accessible as it is -- yay
for semantic HTML!

1 files changed, 17 insertions, 2 deletions

diff --git a/kittybox-rs/templates/assets/style.css b/kittybox-rs/templates/assets/style.css
index b46dbf8..4cd7c09 100644
--- a/kittybox-rs/templates/assets/style.css
+++ b/kittybox-rs/templates/assets/style.css
@@ -39,8 +39,8 @@ nav#headerbar {
     border-bottom: .75rem solid var(--secondary-accent);
     padding: .3rem;
     vertical-align: center;
-    position: sticky;
-    top: 0;
+    /*position: sticky;
+    top: 0;*/
 }
 nav#headerbar a#homepage {
     font-weight: bolder;
@@ -219,3 +219,18 @@ span.like-icon-label {
 ul.h-feed {
     list-style: none;
 }
+
+body > a#skip-to-content {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    background: white;
+    padding: 16px;
+}
+body > a#skip-to-content:focus {
+    width: auto; height: auto; clip: auto;
+    z-index: 999;
+}