diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-21 20:41:54 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-21 20:41:54 +0100 |
| commit | 552bb8d624017a4d810e33280e3ae84ab87eed5c (patch) | |
| tree | 34f1947f9ee6913b71d1233bb2e89096132bfaba | |
| parent | a17d8c4b6f7ed96d52d0c9155c809786a2e66c7a (diff) | |
Adds skip link
| -rw-r--r-- | public/css/modules/index.css | 3 | ||||
| -rw-r--r-- | public/css/modules/skip-to-content.css | 13 | ||||
| -rw-r--r-- | src/layouts/Article.astro | 2 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 1 | ||||
| -rw-r--r-- | src/layouts/Page.astro | 2 |
5 files changed, 18 insertions, 3 deletions
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; --- <Layout title={title}> - <article> + <article id="main"> <slot /> </article> </Layout> 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>{title} | {t(site, { key: 'title' })}</title> </head> <body id="top"> + <a class="btn skip-to-content" href="#main">Skip to content</a> <Navbar /> <slot /> <Footer /> diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 145a7d6..bc7a095 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -9,7 +9,7 @@ const { title } = Astro.props; --- <Layout title={title}> - <main> + <main id="main"> <slot /> </main> </Layout> |