Add 'Skip to content' link for a11y

This commit is contained in:
Sat Naing
2022-09-12 18:56:44 +06:30
parent 08b45143c0
commit 1c5e8b47b4
+4
View File
@@ -9,6 +9,7 @@ const { activeNav } = Astro.props;
--- ---
<header> <header>
<a id="skip-to-content" href="#main-content">Skip to content</a>
<div class="nav-container"> <div class="nav-container">
<div class="top-nav-wrap"> <div class="top-nav-wrap">
<a href="/" class="logo">AstroPaper</a> <a href="/" class="logo">AstroPaper</a>
@@ -63,6 +64,9 @@ const { activeNav } = Astro.props;
</header> </header>
<style> <style>
#skip-to-content {
@apply bg-skin-card py-2 px-3 absolute -top-full focus:top-4 left-16 z-50 transition-all;
}
header hr { header hr {
@apply border-skin-line mx-4 max-w-3xl sm:mx-auto; @apply border-skin-line mx-4 max-w-3xl sm:mx-auto;
} }