feat[close #64]: add Skip to Main Content link

public/assets/css/components/navigationBar.css

@@ -67,7 +67,7 @@
 }
 
 /*.navigationBar ul li.active {
-    background-color: var(--navbar-active-background-color); 
+    background-color: var(--navbar-active-background-color);
 }*/
 
 .navigationBar ul li.active a,
@@ -84,4 +84,4 @@
     .navigationBar {
         display: none;
     }
-}
+}

public/assets/css/components/skipLink.css

@@ -0,0 +1,16 @@
+.skip-link {
+    position: absolute;
+    transform: translateY(-200%);
+    margin-inline-start: 12px;
+    transition: transform .2s ease-in-out;
+    padding: 8px;
+    border-radius: 30px;
+    font-size: 19px;
+    cursor: pointer;
+    z-index: 3;
+    color: var(--text-color);
+}
+
+.skip-link:focus {
+    transform: translateY(0);
+}

public/assets/css/index.css

@@ -29,6 +29,7 @@
 @import url('components/siteFooter.css');
 @import url('components/splitter.css');
 @import url('components/spacer.css');
+@import url('components/skipLink.css');
 @import url('components/text.css');
 @import url('components/table.css');
 @import url('components/timeline.css');
@@ -39,4 +40,4 @@
 @import url('colors/default.css');
 @import url('colors/dark.css');
 @import url('colors/classes.css');
-@import url('print.css');
+@import url('print.css');

src/layouts/Main.vue

@@ -1,15 +1,25 @@
 <template>
+    <a href="#content" class="skip-link" target="_top" @click.prevent="scrollToContent">Skip to main content</a>
     <topbar />
-    <main>
+    <main id="content" ref="content">
         <router-view />
     </main>
     <site-footer />
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
     name: "layout-main",
+
+    methods: {
+        scrollToContent() {
+          const element = this.$refs.content as HTMLElement;
+          if (element) {
+            element.scrollIntoView({ behavior: 'smooth' });
+          }
+        },
+    },
 });
-</script>
+</script>

src/layouts/Page.vue

@@ -1,7 +1,8 @@
 <template>
     <div>
+        <a href="#content" class="skip-link" target="_top" @click.prevent="scrollToContent">Skip to main content</a>
         <topbar />
-        <main class="page">
+        <main class="page" id="content" ref="content">
             <div class="page-wrapper container">
                 <section class="page-header">
                     <div class="page-nav" v-if="parentRoute?.name">
@@ -21,7 +22,7 @@
         <site-footer />
     </div>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent } from "vue";
 
@@ -38,5 +39,13 @@ export default defineComponent({
             return parentRoute || null;
         },
     },
+    methods: {
+        scrollToContent() {
+          const element = this.$refs.content as HTMLElement;
+          if (element) {
+            element.scrollIntoView({ behavior: 'smooth' });
+          }
+        },
+    },
 });
 </script>