Leilukin
/
leilukin-tumbleblog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add back-to-top link

This commit is contained in:
Helen Chong 2024-07-26 02:14:01 +08:00
parent bfdc609239
commit f2290260ee
2 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
themes/leilukin/layouts/default.twig
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ site.locale | lang_base }}" dir="{{ site.locale | text_direction }}"> <html lang="{{ site.locale | lang_base }}" dir="{{ site.locale | text_direction }}" id="top">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title> <title>
@ -134,6 +134,12 @@
{{ posts.next_link("Page %d" | translate | format(posts.page + 1)) }} {{ posts.next_link("Page %d" | translate | format(posts.page + 1)) }}
</div> </div>
{% endif %} {% endif %}
<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>
<!-- Footer --> <!-- Footer -->
{{ trigger.call("end_content") }} {{ trigger.call("end_content") }}
</body> </body>

31
themes/leilukin/stylesheets/all.css
View File

@ -696,6 +696,37 @@ aside > *:last-child,
div.standalone > *:last-child { div.standalone > *:last-child {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
.top-btn,
.top-btn:hover {
color: var(--clr-top-btn-txt);
text-decoration: none;
}
.top-btn {
position: fixed;
bottom: 0.5rem;
right: 0.5rem;
z-index: 999;
font-weight: 700;
color: #08031A !important;
background-color: #FFD05A;
display: flex;
align-items: center;
border-radius: 50em;
padding: 0.3em 0.5em;
gap: 0.2em;
}
.top-btn:focus {
outline: 0.25em solid #FFD05A;
outline-offset: 0.15em;
}
.top-btn__arrow {
display: inline-block;
width: 1em;
aspect-ratio: 1 / 1;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.ajax_loading { .ajax_loading {
background-size: 30px 30px; background-size: 30px 30px;
background-image: linear-gradient( background-image: linear-gradient(