wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: add skip to content link

Browse source
This commit is contained in:
Devin Haska 2024-03-09 17:09:32 -08:00
parent 0f47b5fda7
commit 9adfd1e2de
3 changed files with 19 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/layouts/base.html
View file

@ -24,7 +24,7 @@
</head> </head>
<body class="[ flex-col ]"> <body class="[ flex-col ]">
{% include "partials/header.html" %} {% include "partials/header.html" %}
<main id="main" class="[ flow flex-1 wrapper ]"> <main id="main" class="[ flow flex-1 wrapper ]" tabindex="-1">
{{ content | safe }} {{ content | safe }}
</main> </main>
{% include "partials/footer.html" %} {% include "partials/footer.html" %}

1
src/_includes/partials/header.html
View file

@ -1,4 +1,5 @@
<header class="[ navbar ][ py-1 mb-2 ]"> <header class="[ navbar ][ py-1 mb-2 ]">
<a href="#main">Skip to content</a>
<div class="[ wrapper ]"> <div class="[ wrapper ]">
<nav class="[ repel ]"> <nav class="[ repel ]">
<div class="[ site-logo ] [ flex items-center gap-0.5 ]"> <div class="[ site-logo ] [ flex items-center gap-0.5 ]">

17
src/css/global/global-styles.css
View file

@ -167,6 +167,23 @@ mark {
padding-block: var(--spacing-0\.25); padding-block: var(--spacing-0\.25);
} }
[href="#main"] {
background-color: var(--color-background);
margin-inline: var(--spacing-1);
}
[href="#main"]:not(:focus) {
border: 0;
clip: rect(0 0 0 0);
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
html:focus-within { html:focus-within {
scroll-behavior: auto; scroll-behavior: auto;