From 836136b98c03328cbdc8d049d892d11803147f08 Mon Sep 17 00:00:00 2001
From: TheThomaas <thethomaas@protonmail.ch>
Date: Fri, 1 Sep 2023 19:49:33 +0200
Subject: [PATCH] Correct focus style and skip link

---
 src/_includes/partials/skip-link.html |  2 +-
 src/scss/components/_focus.scss       |  2 +-
 src/scss/components/_skip-link.scss   | 20 ++++++++++++++++++++
 src/scss/critical.scss                |  1 +
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/scss/components/_skip-link.scss

diff --git a/src/_includes/partials/skip-link.html b/src/_includes/partials/skip-link.html
index 4d7b7ce..31d1b42 100644
--- a/src/_includes/partials/skip-link.html
+++ b/src/_includes/partials/skip-link.html
@@ -1 +1 @@
-<a href="#main-content">Main content</a>
\ No newline at end of file
+<a href="#main-content" class="btn">Main content</a>
\ No newline at end of file
diff --git a/src/scss/components/_focus.scss b/src/scss/components/_focus.scss
index c795940..1101242 100644
--- a/src/scss/components/_focus.scss
+++ b/src/scss/components/_focus.scss
@@ -4,6 +4,6 @@
   outline-width: 2px;
 }
 
-*:focus, *:focus-visible {
+*:focus:focus-visible {
   outline-style: solid;
 }
\ No newline at end of file
diff --git a/src/scss/components/_skip-link.scss b/src/scss/components/_skip-link.scss
new file mode 100644
index 0000000..6af03cb
--- /dev/null
+++ b/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;
+    }
+    
+  }
\ No newline at end of file
diff --git a/src/scss/critical.scss b/src/scss/critical.scss
index 4ca4e29..bb47ba2 100644
--- a/src/scss/critical.scss
+++ b/src/scss/critical.scss
@@ -4,6 +4,7 @@
 @use './components/utilities';
 @use './components/focus';
 @use './components/button';
+@use './components/skip-link';