alois/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2026-05-21 11:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor top-link visibility and positioning in footer

Browse Source 
- Update CSS for top-link to use rem units
- Modify HTML to include 'hidden' class for initial state
- Adjust JavaScript to toggle visibility using class
This commit is contained in:
Aditya Telange
2026-04-11 19:19:49 +05:30
parent e8b88d4e72
commit 31185b01d5
2 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/common/footer.css
+9 -5
View File
@@ -31,19 +31,23 @@
} }
.top-link { .top-link {
visibility: hidden;
position: fixed; position: fixed;
bottom: 60px; bottom: 4rem;
right: 30px; right: 2rem;
z-index: 99; z-index: 99;
background: var(--tertiary); background: var(--tertiary);
width: 42px; width: 2.5rem;
height: 42px; height: 2.5rem;
padding: 10px; padding: 10px;
border-radius: 64px; border-radius: 64px;
transition: visibility .3s, opacity .3s cubic-bezier(0.4, 0, 1, 1); transition: visibility .3s, opacity .3s cubic-bezier(0.4, 0, 1, 1);
} }
.hidden {
visibility: hidden;
opacity: 0;
}
.top-link, .top-link,
.top-link svg { .top-link svg {
filter: drop-shadow(0px 0px 0px var(--theme)); filter: drop-shadow(0px 0px 0px var(--theme));
layouts/partials/footer.html
+6 -8
View File
@@ -23,9 +23,9 @@
{{- end }} {{- end }}
{{- if (not site.Params.disableScrollToTop) }} {{- if (not site.Params.disableScrollToTop) }}
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g"> <a href="#top" id="top-link" class="top-link hidden" aria-label="go to top" title="Go to Top (Alt + G)" accesskey="g">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"> stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up">
<polyline points="17 11 12 6 7 11"></polyline> <polyline points="17 11 12 6 7 11"></polyline>
<polyline points="17 18 12 13 7 18"></polyline> <polyline points="17 18 12 13 7 18"></polyline>
</svg> </svg>
@@ -71,14 +71,12 @@
{{- if (not site.Params.disableScrollToTop) }} {{- if (not site.Params.disableScrollToTop) }}
<script> <script>
var mybutton = document.getElementById("top-link"); var toplink = document.getElementById("top-link");
window.onscroll = function () { window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) { if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mybutton.style.visibility = "visible"; toplink.classList.remove("hidden");
mybutton.style.opacity = "1";
} else { } else {
mybutton.style.visibility = "hidden"; toplink.classList.add("hidden");
mybutton.style.opacity = "0";
} }
}; };