From f616817826538b921bc994501296615a2e9779e9 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 28 May 2024 21:58:10 +0800
Subject: [PATCH] Add skip to content link button
---
src/_includes/global/baselayout.njk | 3 ++-
src/assets/css/components.css | 19 +++++++++++++++++++
2 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/src/_includes/global/baselayout.njk b/src/_includes/global/baselayout.njk
index ebdf7ee3..8bbe65ab 100644
--- a/src/_includes/global/baselayout.njk
+++ b/src/_includes/global/baselayout.njk
@@ -40,9 +40,10 @@
+
{% block hero %}{% include "global/hero.njk" %}{% endblock %}
{% block navbar %}{% include "global/navbar.njk" %}{% endblock %}
-
+
{{ content | safe }}
{% block footer %}{% include "global/footer.njk" %}{% endblock %}
diff --git a/src/assets/css/components.css b/src/assets/css/components.css
index 936be061..9a9171af 100644
--- 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;