From 552bb8d624017a4d810e33280e3ae84ab87eed5c Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Mon, 21 Aug 2023 20:41:54 +0100
Subject: Adds skip link

---
 public/css/modules/index.css           |  3 ++-
 public/css/modules/skip-to-content.css | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 public/css/modules/skip-to-content.css

(limited to 'public/css/modules')

diff --git a/public/css/modules/index.css b/public/css/modules/index.css
index 2439546..9194307 100644
--- a/public/css/modules/index.css
+++ b/public/css/modules/index.css
@@ -8,4 +8,5 @@
 @import './link-gallery.css';
 @import './nav.css';
 @import './nav.md.css' (min-width: 48rem);
-@import './nav.lg.css' (min-width: 64rem);
\ No newline at end of file
+@import './nav.lg.css' (min-width: 64rem);
+@import './skip-to-content.css';
\ No newline at end of file
diff --git a/public/css/modules/skip-to-content.css b/public/css/modules/skip-to-content.css
new file mode 100644
index 0000000..d8650d7
--- /dev/null
+++ b/public/css/modules/skip-to-content.css
@@ -0,0 +1,13 @@
+.skip-to-content {
+  position: absolute;
+  left: var(--grid-padding-start);
+  top: -10rem;
+  opacity: 0;
+  transition: top 300ms, opacity 300ms;
+}
+
+.skip-to-content:is(:focus, :focus-visible, :focus-within) {
+  top: var(--margin-block-md);
+  opacity: 1;
+  transition: top 100ms;
+}
\ No newline at end of file
-- 
cgit v1.2.3