From b777d4e59ece30eb876aeab94a0869070fe44a25 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Fri, 25 Jul 2025 03:52:54 +0800 Subject: [PATCH] fix(scroll-to-top): resolve overlap with buy me a coffee button --- assets/css/compiled/main.css | 48 ++++++++++++++++------------- assets/js/scroll-to-top.js | 13 ++++++++ layouts/partials/head.html | 8 +++++ layouts/partials/scroll-to-top.html | 8 +++-- 4 files changed, 53 insertions(+), 24 deletions(-) create mode 100644 assets/js/scroll-to-top.js diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index bca1f6cc..87fe216f 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */ /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */ @layer properties; #zen-mode-button { @@ -463,7 +463,7 @@ body.zen-mode-enable { padding: 0; margin: -1px; overflow: hidden; - clip-path: inset(50%); + clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @@ -497,6 +497,9 @@ body.zen-mode-enable { .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] { inset-inline-start: calc(max(-50vw, -800px) + 50%); } + .end-6 { + inset-inline-end: calc(var(--spacing) * 6); + } .top-0 { top: calc(var(--spacing) * 0); } @@ -506,18 +509,18 @@ body.zen-mode-enable { .top-20 { top: calc(var(--spacing) * 20); } - .top-\[110vh\] { - top: 110vh; - } - .top-\[calc\(100vh-5\.5rem\)\] { - top: calc(100vh - 5.5rem); - } .right-0 { right: calc(var(--spacing) * 0); } .bottom-0 { bottom: calc(var(--spacing) * 0); } + .bottom-6 { + bottom: calc(var(--spacing) * 6); + } + .bottom-24 { + bottom: calc(var(--spacing) * 24); + } .left-0 { left: calc(var(--spacing) * 0); } @@ -536,6 +539,9 @@ body.zen-mode-enable { .z-30 { z-index: 30; } + .z-50 { + z-index: 50; + } .z-80 { z-index: 80; } @@ -1204,9 +1210,6 @@ body.zen-mode-enable { .mb-12 { margin-bottom: calc(var(--spacing) * 12); } - .mb-16 { - margin-bottom: calc(var(--spacing) * 16); - } .mb-20 { margin-bottom: calc(var(--spacing) * 20); } @@ -1538,6 +1541,14 @@ body.zen-mode-enable { --tw-translate-y: calc(var(--spacing) * -8); translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-0 { + --tw-translate-y: calc(var(--spacing) * 0); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-y-4 { + --tw-translate-y: calc(var(--spacing) * 4); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .scale-0 { --tw-scale-x: 0%; --tw-scale-y: 0%; @@ -2424,7 +2435,7 @@ body.zen-mode-enable { backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .transition { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @@ -2659,6 +2670,7 @@ body.zen-mode-enable { } .after\:content-\[\'\'\] { &::after { + content: var(--tw-content); --tw-content: ''; content: var(--tw-content); } @@ -3213,11 +3225,6 @@ body.zen-mode-enable { grid-template-columns: repeat(5, minmax(0, 1fr)); } } - .ltr\:right-0 { - &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { - right: calc(var(--spacing) * 0); - } - } .ltr\:mr-4 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: calc(var(--spacing) * 4); @@ -3243,11 +3250,6 @@ body.zen-mode-enable { display: inline; } } - .rtl\:left-0 { - &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - left: calc(var(--spacing) * 0); - } - } .rtl\:-mr-\[79px\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(79px * -1); @@ -3711,7 +3713,9 @@ button, [role="button"] { z-index: 10; width: calc(var(--spacing) * 20); cursor: pointer; + overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; overflow: hidden; border-top-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); diff --git a/assets/js/scroll-to-top.js b/assets/js/scroll-to-top.js new file mode 100644 index 00000000..3fa30698 --- /dev/null +++ b/assets/js/scroll-to-top.js @@ -0,0 +1,13 @@ +function scrollToTop() { + const scrollToTop = document.getElementById("scroll-to-top"); + if (window.scrollY > window.innerHeight * 0.5) { + scrollToTop.classList.remove("translate-y-4", "opacity-0"); + scrollToTop.classList.add("translate-y-0", "opacity-100"); + } else { + scrollToTop.classList.remove("translate-y-0", "opacity-100"); + scrollToTop.classList.add("translate-y-4", "opacity-0"); + } +} + +window.addEventListener("scroll", scrollToTop); +window.addEventListener("load", scrollToTop); diff --git a/layouts/partials/head.html b/layouts/partials/head.html index cb1ccabd..e12a7bf4 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -69,6 +69,10 @@ type="text/javascript" src="{{ $jsAppearance.RelPermalink }}" integrity="{{ $jsAppearance.Data.Integrity }}"> + {{ if site.Params.footer.showScrollToTop | default true }} + {{ $jsToTop := resources.Get "js/scroll-to-top.js" }} + {{ $assets.Add "js" (slice $jsToTop) }} + {{ end }} {{ if .Site.Params.enableA11y | default false }} {{ $jsA11y := resources.Get "js/a11y.js" }} {{ $jsA11y = $jsA11y | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }} @@ -83,6 +87,10 @@ src="{{ $jsZenMode.RelPermalink }}" integrity="{{ $jsZenMode.Data.Integrity }}"> {{ end }} + {{ if site.Params.footer.showScrollToTop | default true }} + {{ $jsToTop := resources.Get "js/scroll-to-top.js" }} + {{ $assets.Add "js" (slice $jsToTop) }} + {{ end }} {{ if .Site.Params.enableSearch | default false }} {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }} {{ $jsSearch := resources.Get "js/search.js" }} diff --git a/layouts/partials/scroll-to-top.html b/layouts/partials/scroll-to-top.html index e34b3660..27bbd397 100644 --- a/layouts/partials/scroll-to-top.html +++ b/layouts/partials/scroll-to-top.html @@ -1,7 +1,11 @@ -
+{{ $coffeeIsRight := and site.Params.buymeacoffee.globalWidget (eq site.Params.buymeacoffee.globalWidgetPosition "Right") }} +{{ $toTopYOffset := cond $coffeeIsRight "bottom-24" "bottom-6" }} +
↑