fix(scroll-to-top): resolve overlap with buy me a coffee button

2026-01-30 16:31:52 +01:00 · 2025-07-25 03:52:54 +08:00
parent 019388def8
commit b777d4e59e
4 changed files with 53 additions and 24 deletions
--- 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);
--- a/assets/js/scroll-to-top.js
+++ 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);
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -69,6 +69,10 @@
    type="text/javascript"
    src="{{ $jsAppearance.RelPermalink }}"
    integrity="{{ $jsAppearance.Data.Integrity }}"></script>
+  {{ 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 }}"></script>
  {{ 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" }}
--- a/layouts/partials/scroll-to-top.html
+++ b/layouts/partials/scroll-to-top.html
@@ -1,7 +1,11 @@
-<div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0 z-10">
+{{ $coffeeIsRight := and site.Params.buymeacoffee.globalWidget (eq site.Params.buymeacoffee.globalWidgetPosition "Right") }}
+{{ $toTopYOffset := cond $coffeeIsRight "bottom-24" "bottom-6" }}
+<div
+  id="scroll-to-top"
+  class="fixed {{ $toTopYOffset }} end-6 z-50 transform translate-y-4 opacity-0 duration-200">
  <a
    href="#the-top"
-    class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
+    class="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
    aria-label="{{ i18n "nav.scroll_to_top_title" }}"
    title="{{ i18n "nav.scroll_to_top_title" }}">
    &uarr;