Correct focus style and skip link

src/_includes/partials/skip-link.html

@@ -1 +1 @@
-<a href="#main-content">Main content</a>
+<a href="#main-content" class="btn">Main content</a>

src/scss/components/_focus.scss

@@ -4,6 +4,6 @@
   outline-width: 2px;
 }
 
-*:focus, *:focus-visible {
+*:focus:focus-visible {
   outline-style: solid;
 }

src/scss/components/_skip-link.scss

@@ -0,0 +1,20 @@
+body > a {
+    $link-offset: .3rem;
+    position: absolute;
+    inset-block-start: $link-offset;
+    inset-inline-start: $link-offset;
+    z-index: 99999;
+    padding: .4rem 1rem;
+  
+    &:not(:focus) {
+      size: 1px;
+      margin: -1px;
+      padding: 0;
+      white-space: nowrap;
+      border: 0;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      overflow: hidden;
+    }
+    
+  }

src/scss/critical.scss

@@ -4,6 +4,7 @@
 @use './components/utilities';
 @use './components/focus';
 @use './components/button';
+@use './components/skip-link';