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

Replace back to top lnk arrow icon

This commit is contained in:
Helen Chong 2024-07-06 21:04:30 +08:00
parent 5c54a493df
commit c5072e85a4
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/_includes/global/top-btn.njk
View File

@ -1,4 +1,9 @@
<a href="#top" class="top-btn">Back to Top</a> <a href="#top" class="top-btn">
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</svg>
Back to Top
</a>
<style> <style>
.top-btn, .top-btn,
@ -15,10 +20,10 @@
background-color: var(--clr-top-btn-bg); background-color: var(--clr-top-btn-bg);
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
border-radius: 50em; border-radius: 50em;
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
gap: 0.2em;
} }
.top-btn:focus { .top-btn:focus {
@ -26,16 +31,12 @@
outline-offset: 0.15em; outline-offset: 0.15em;
} }
.top-btn::before { .top-btn__arrow {
--arrow-margin: 0.3em;
content: "";
display: inline-block; display: inline-block;
border-bottom: 0.6rem solid currentColor; width: 1em;
border-left: 0.4rem solid transparent; aspect-ratio: 1 / 1;
border-right: 0.4rem solid transparent; stroke-width: 0;
} stroke: currentColor;
fill: currentColor;
.top-btn::before {
margin: 0 var(--arrow-margin) 0 0;
} }
</style> </style>