From d0e699d8cbc70ecd6ef15f063cd8d1d59f2c5938 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Thu, 15 May 2025 17:27:17 +0100
Subject: [PATCH] style: optimize scrollbar styling, remove the auto-hide
 feature to fix page flickering issue

---
 src/components/Widgets/Scrollbar.astro | 34 --------------------------
 src/components/Widgets/TOC.astro       |  4 +--
 src/layouts/Layout.astro               |  2 --
 src/styles/global.css                  |  8 ++----
 src/styles/heti.css                    | 16 +++++-------
 5 files changed, 10 insertions(+), 54 deletions(-)
 delete mode 100644 src/components/Widgets/Scrollbar.astro

diff --git a/src/components/Widgets/Scrollbar.astro b/src/components/Widgets/Scrollbar.astro
deleted file mode 100644
index 0b19b44..0000000
--- a/src/components/Widgets/Scrollbar.astro
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-let scrollHandler: EventListener | undefined
-
-function debounce(fn: () => void, delay: number) {
-  let timer: ReturnType<typeof setTimeout> | undefined
-  return function () {
-    clearTimeout(timer)
-    timer = setTimeout(fn, delay)
-  }
-}
-
-function initScrollbar() {
-  const html = document.documentElement
-  html.classList.remove('scrolling')
-
-  if (scrollHandler) {
-    window.removeEventListener('scroll', scrollHandler)
-  }
-
-  const hideScrollbar = debounce(() => {
-    html.classList.remove('scrolling')
-  }, 1500)
-
-  scrollHandler = () => {
-    html.classList.add('scrolling')
-    hideScrollbar()
-  }
-
-  window.addEventListener('scroll', scrollHandler, { passive: true })
-}
-
-initScrollbar()
-document.addEventListener('astro:page-load', initScrollbar)
-</script>
diff --git a/src/components/Widgets/TOC.astro b/src/components/Widgets/TOC.astro
index 6917f81..acc82ef 100644
--- a/src/components/Widgets/TOC.astro
+++ b/src/components/Widgets/TOC.astro
@@ -19,14 +19,14 @@ const filteredHeadings = headings.filter(heading =>
 ---
 
 {filteredHeadings.length > 0 && (
-  <div class="mb-4 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-transparent)">
+  <div class="mb-4 uno-round-border bg-secondary/5 2xl:(fixed left-0 top-43.5 max-w-[min(calc(50vw-38rem),13rem)] border-none bg-secondary/0)">
     <input
       type="checkbox"
       id="toc-toggle"
       class="accordion-toggle"
       hidden
     />
-    <div class="relative h-12 w-full bg-transparent">
+    <div class="relative h-12 w-full">
       <label
         for="toc-toggle"
         class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors ease-out hover:c-secondary/80)"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e81796d..fbf3e4d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -5,7 +5,6 @@ import Header from '@/components/Header.astro'
 import Navbar from '@/components/Navbar.astro'
 import GithubCard from '@/components/Widgets/GithubCard.astro'
 import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
-import Scrollbar from '@/components/Widgets/Scrollbar.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPageInfo } from '@/utils/page'
@@ -48,7 +47,6 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
       <Footer />
     </div>
     <Button supportedLangs={supportedLangs} />
-    <Scrollbar />
     <GithubCard />
     <PhotoSwipe />
   </body>
diff --git a/src/styles/global.css b/src/styles/global.css
index 65ab0ca..61fbb8e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -6,12 +6,8 @@
 html {
   --at-apply: 'bg-background c-secondary antialiased';
   scrollbar-width: thin;
-  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
-  scrollbar-gutter: stable both-edges;
-  transition: scrollbar-color 0.3s ease-out;
-}
-html.scrolling {
   scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
+  scrollbar-gutter: stable both-edges;
 }
 
 /* Fix Flash Issue On iOS */
@@ -23,7 +19,7 @@ body::selection {
   --at-apply: 'bg-mark';
 }
 
-/* Heading Anchor Link >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+/* Heading Anchor Link */
 .heading-anchor-link {
   --at-apply: 'inline-block translate-y-0.08em c-transparent';
 }
diff --git a/src/styles/heti.css b/src/styles/heti.css
index 075d139..4bfad42 100644
--- a/src/styles/heti.css
+++ b/src/styles/heti.css
@@ -30,13 +30,13 @@
 .heti :where(h4),
 .heti :where(h5),
 .heti :where(h6) {
-  --at-apply: 'mb-4 mt-6 font-semibold text-primary';
+  --at-apply: 'mb-4 mt-6 font-semibold';
 }
 .heti :where(h1) {
-  --at-apply: 'mt-9.6 text-7';
+  --at-apply: 'mt-9.6 text-7 text-primary';
 }
 .heti :where(h2) {
-  --at-apply: 'mt-9.6 text-6';
+  --at-apply: 'mt-9.6 text-6 text-primary';
 }
 .heti :where(h3) {
   --at-apply: 'mt-6.5 text-5';
@@ -48,7 +48,7 @@
   --at-apply: 'text-4';
 }
 .heti :where(h6) {
-  --at-apply: 'text-secondary';
+  --at-apply: 'font-normal';
 }
 .heti :where(h1),
 .heti :where(h2),
@@ -70,8 +70,8 @@
 
 /* Links */
 .heti :where(a:not(.gc-container)) {
-  --at-apply: 'break-all font-medium tracking-0 underline underline-0.075em decoration-secondary/40 underline-offset-0.1em';
-  --at-apply: 'transition-colors hover:(c-primary decoration-secondary/80) lg:underline-0.1em';
+  --at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.15em';
+  --at-apply: 'transition-colors hover:(c-primary decoration-primary/80)  lg:underline-0.1em';
 }
 
 /* Images */
@@ -94,10 +94,6 @@
 .heti :where(pre) {
   --at-apply: 'mb-4 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
   scrollbar-width: thin;
-  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
-  transition: scrollbar-color 0.3s ease-out;
-}
-.heti :where(pre:hover) {
   scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
 }
 .heti pre :where(code) {