Add skip to content link button

2024-05-28 21:58:10 +08:00 · 2024-05-28 21:58:10 +08:00 · f616817826
parent 8ca26ab43e
commit f616817826
2 changed files with 21 additions and 1 deletions
--- a/src/_includes/global/baselayout.njk
+++ b/src/_includes/global/baselayout.njk
@ -40,9 +40,10 @@
        </title>
    </head>
    <body>
+        <div class="skip-btn"> <a href="#content">Skip to content</a></div>
        {% block hero %}{% include "global/hero.njk" %}{% endblock %}
        {% block navbar %}{% include "global/navbar.njk" %}{% endblock %}
-        <main>
+        <main id="content">
            {{ content | safe }}
        </main>
        {% block footer %}{% include "global/footer.njk" %}{% endblock %}
--- a/src/assets/css/components.css
+++ b/src/assets/css/components.css
@ -32,6 +32,25 @@
    }
 }

+/* Skip to content button */
+.skip-btn a {
+    position: absolute;
+    display: inline-block;
+    left: 0px;
+    top: -1000px;
+    overflow: hidden;
+    transition: top 0.5s ease;
+    background: #fff;
+    color: #191919;
+    z-index: 1000;
+    padding: 0.3em;
+}
+
+.skip-btn a:focus {
+    top: 0;
+    transition: top 0.3s ease;
+}
+
 /* Link button */
 .link-btn {
    font-size: 1.3rem;