Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add skip to content link button

This commit is contained in:
Helen Chong 2024-05-28 21:58:10 +08:00
parent 8ca26ab43e
commit f616817826
2 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/_includes/global/baselayout.njk
View File

@ -40,9 +40,10 @@
</title> </title>
</head> </head>
<body> <body>
<div class="skip-btn"> <a href="#content">Skip to content</a></div>
{% block hero %}{% include "global/hero.njk" %}{% endblock %} {% block hero %}{% include "global/hero.njk" %}{% endblock %}
{% block navbar %}{% include "global/navbar.njk" %}{% endblock %} {% block navbar %}{% include "global/navbar.njk" %}{% endblock %}
<main> <main id="content">
{{ content | safe }} {{ content | safe }}
</main> </main>
{% block footer %}{% include "global/footer.njk" %}{% endblock %} {% block footer %}{% include "global/footer.njk" %}{% endblock %}

19
src/assets/css/components.css
View File

@ -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 button */
.link-btn { .link-btn {
font-size: 1.3rem; font-size: 1.3rem;