Allow skipping to main content in keyboard-based site navigation

core/src/build/assets/site.css

@@ -856,6 +856,22 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
 .selector_options button:not(.active) svg { display: none; }
 .selector_options button:not(:first-child) { padding-top: .5rem; }
 .selector_options button:not(:last-child) { padding-bottom: .5rem; }
+.skip_to_content {
+    background: var(--fg-3);
+    border-radius: .3rem;
+    color: var(--bg-1) !important;
+    left: 50%;
+    padding: .5rem 1rem;
+    position: fixed;
+    top: 4rem;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    z-index: 1;
+}
+.skip_to_content:not(:focus-visible) {
+    opacity: 0;
+    pointer-events: none;
+}
 svg {
     fill: currentColor;
     display: block;

core/src/build/layout.rs

@@ -210,6 +210,7 @@ impl Layout {
         let t_open_browse_panel = translations.open_browse_panel;
         let t_play_pause_video = translations.play_pause_video;
         let t_shortcuts = translations.shortcuts;
+        let t_skip_to_main_content = translations.skip_to_main_content;
         let t_space = translations.space;
         let t_video_player = translations.video_player;
         let body = formatdoc!(r##"
@@ -217,6 +218,7 @@ impl Layout {
                 <script>
                     window.hyper8 = {{ rootPrefix: '{root_prefix}', sitePath: '{site_path}' }};
                 </script>
+                <a class="skip_to_content" href="#content">{t_skip_to_main_content}</a>
                 <div class="layout">
                     <header>
                         <a href="{root_url}">
@@ -227,7 +229,7 @@ impl Layout {
                         {theme_toggle}
                     </header>
                     <div class="growing">
-                        <div class="center">
+                        <div class="center" id="content">
                             {body}
                         </div>
                     </div>

translations/src/de.rs

@@ -283,6 +283,7 @@ impl Translations {
         site_setup: "Seite einrichten",
         site_setup_change_note: "Du kannst später jederzeit zwischen Collection, Playlist und Video wechseln, wähle einfach was jetzt gerade am meisten Sinn macht.",
         site_setup_text: r#"Deine Seite ist aktuell leer. Du kannst sie initialisieren indem du eine der Optionen unten wählst oder indem du manuell Inhalte im Seitenverzeichnis platzierst - folge dafür der <a href="{docs_link}" target="_blank">Dokumentation</a>."#,
+        skip_to_main_content: "Zum Hauptinhalt springen",
         sort_number: "Sortiernummer",
         sort_number_ascending: "Sortiernummer Aufsteigend (1, 2, 3)",
         sort_number_descending: "Sortiernummer Absteigend (3, 2, 1)",

translations/src/en.rs

@@ -283,6 +283,7 @@ impl Translations {
         site_setup: "Site Setup",
         site_setup_change_note: "Note that you can change between collection, playlist and video at any later point, just pick what makes most sense for you now.",
         site_setup_text: r#"Your site is currently empty. You can initialize it by picking one of the options below or by manually placing content in the site directory following the <a href="{docs_link}" target="_blank">documentation</a>."#,
+        skip_to_main_content: "Skip to main content",
         sort_number: "Sort Number",
         sort_number_ascending: "Sort Number Ascending (1, 2, 3)",
         sort_number_descending: "Sort Number Descending (3, 2, 1)",

translations/src/lib.rs

@@ -280,6 +280,7 @@ pub struct Translations {
     pub site_setup: &'static str,
     pub site_setup_change_note: &'static str,
     site_setup_text: &'static str,
+    pub skip_to_main_content: &'static str,
     pub sort_number: &'static str,
     pub sort_number_ascending: &'static str,
     pub sort_number_descending: &'static str,