From 1c5e8b47b4bc16f6e2faf21ce821f8b8407eb61f Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Mon, 12 Sep 2022 18:56:44 +0630
Subject: [PATCH] Add 'Skip to content' link for a11y

---
 src/components/Header.astro | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 58f031b..fbf824d 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,6 +9,7 @@ const { activeNav } = Astro.props;
 ---
 
 <header>
+  <a id="skip-to-content" href="#main-content">Skip to content</a>
   <div class="nav-container">
     <div class="top-nav-wrap">
       <a href="/" class="logo">AstroPaper</a>
@@ -63,6 +64,9 @@ const { activeNav } = Astro.props;
 </header>
 
 <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 {
     @apply border-skin-line mx-4 max-w-3xl sm:mx-auto;
   }