feat(a11y): Add a "Skip to main content" link

Author: jackdomleo7

app/app.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="page">
+    <a href="#maincontent" class="sr-only sr-only--focusable skip-link">Skip to main content</a>
     <Navigation />
-    <main>
+    <main id="maincontent">
       <NuxtLayout />
     </main>
     <SiteFooter />
@@ -38,4 +39,18 @@ useHead({
     }
   }
 }
+
+.skip-link {
+  display: block;
+  position: fixed !important;
+  top: 1rem;
+  left: 1rem;
+  z-index: 9999;
+  padding: 0.5rem 1rem !important;
+  background-color: var(--color-fg1);
+  color: var(--color-accent);
+  border-radius: 0.25rem;
+  font-weight: 700;
+  text-decoration: none;
+}
 </style>