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 +++++++++++++ src/layouts/Article.astro | 2 +- src/layouts/Layout.astro | 1 + src/layouts/Page.astro | 2 +- 5 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 public/css/modules/skip-to-content.css 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 diff --git a/src/layouts/Article.astro b/src/layouts/Article.astro index 5e95147..253479b 100644 --- a/src/layouts/Article.astro +++ b/src/layouts/Article.astro @@ -9,7 +9,7 @@ const { title } = Astro.props; --- -
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index bb30305..a2fb963 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -27,6 +27,7 @@ const t = translate(locale); {title} | {t(site, { key: 'title' })} +