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!

2 files changed, 19 insertions, 3 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;
+}
diff --git a/kittybox-rs/templates/src/templates.rs b/kittybox-rs/templates/src/templates.rs
index ba5b684..ba52af7 100644
--- a/kittybox-rs/templates/src/templates.rs
+++ b/kittybox-rs/templates/src/templates.rs
@@ -31,6 +31,7 @@ markup::define! {
                 }*/
             }
             body {
+                a[href="#main_content", id="skip-to-content"] { "Skip to content" }
                 // TODO Somehow compress headerbar into a menu when the screen space is tight
                 nav #headerbar {
                     ul {
@@ -49,7 +50,7 @@ markup::define! {
                         }
                     }
                 }
-                main {
+                main #main_content {
                     @markup::raw(content)
                 }
                 footer {