From 312a57c07e140d82593da7d608943c8ff1cbee36 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Sat, 17 May 2025 13:27:35 +0100
Subject: [PATCH] style: optimize animation curves and duration

---
 src/components/Navbar.astro         | 2 +-
 src/components/Widgets/GoBack.astro | 2 +-
 src/components/Widgets/TOC.astro    | 4 ++--
 src/pages/[...tags_tag].astro       | 2 +-
 src/styles/global.css               | 8 ++++----
 src/styles/heti.css                 | 2 +-
 uno.config.ts                       | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index cffc507..09cc00b 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -12,7 +12,7 @@ const isAboutActive = isAbout
 function getNavItemClass(isActive: boolean) {
   return isActive
     ? 'highlight-static c-primary font-bold after:bottom-0.5em'
-    : 'highlight-hover transition-colors after:bottom-0.5em hover:(c-primary font-bold)'
+    : 'highlight-hover transition-colors transition-font-weight after:bottom-0.5em hover:(c-primary font-bold)'
 }
 
 const navItems = [
diff --git a/src/components/Widgets/GoBack.astro b/src/components/Widgets/GoBack.astro
index 0699ac8..2136edc 100644
--- a/src/components/Widgets/GoBack.astro
+++ b/src/components/Widgets/GoBack.astro
@@ -5,7 +5,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';
 <button
   id="back-button"
   class="hidden"
-  lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors ease-out c-secondary active:scale-90 hover:c-primary/80"
+  lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors c-secondary active:scale-90 hover:c-primary/80"
   aria-label="Go back"
 >
   <GoBackIcon
diff --git a/src/components/Widgets/TOC.astro b/src/components/Widgets/TOC.astro
index acc82ef..14c7486 100644
--- a/src/components/Widgets/TOC.astro
+++ b/src/components/Widgets/TOC.astro
@@ -29,7 +29,7 @@ const filteredHeadings = headings.filter(heading =>
     <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)"
+        class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors hover:c-secondary/80)"
       >
         <span class="toc-title">
           {currentUI.toc}
@@ -86,7 +86,7 @@ const filteredHeadings = headings.filter(heading =>
   --at-apply: 'list-none pl-0 space-y-2 mt-1 mb-4 2xl:space-y-1.2';
 }
 .toc-link-h2, .toc-link-h3, .toc-link-h4 {
-  --at-apply: 'text-sm no-underline font-normal text-balance select-none 2xl:(text-3.2 c-secondary/60 transition-colors ease-in hover:(c-secondary font-medium))';
+  --at-apply: 'text-sm no-underline font-normal text-balance select-none 2xl:(text-3.2 c-secondary/60 transition-colors transition-font-weight duration-300 ease-out hover:(c-secondary font-medium))';
 }
 
 /* Initial collapsed state with zero height grid row */
diff --git a/src/pages/[...tags_tag].astro b/src/pages/[...tags_tag].astro
index b36e7b1..3d531bf 100644
--- a/src/pages/[...tags_tag].astro
+++ b/src/pages/[...tags_tag].astro
@@ -52,7 +52,7 @@ const supportedLangs = await getTagSupportedLangs(tag)
         href={getTagPath(tagName, lang)}
         class={`uno-tags-style ${
           tag === tagName
-            ? 'border-secondary/75 text-primary'
+            ? 'border-secondary/80 text-primary'
             : ''
         }`}
       >
diff --git a/src/styles/global.css b/src/styles/global.css
index defdf3d..be04f13 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -21,16 +21,16 @@ body::selection {
 
 /* Heading Anchor Link */
 .heading-anchor-link {
-  --at-apply: 'inline-block translate-y-0.08em';
+  --at-apply: 'inline-block translate-y-0.1em';
 }
 h1:hover .heading-anchor-link svg,
 h2:hover .heading-anchor-link svg,
 h3:hover .heading-anchor-link svg,
 h4:hover .heading-anchor-link svg {
-  --at-apply: 'op-40';
+  --at-apply: 'op-80';
 }
 .heading-anchor-link svg {
-  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-colors active:scale-90';
+  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity duration-300 ease-out active:scale-90';
 }
 h1:hover .heading-anchor-link svg:hover,
 h2:hover .heading-anchor-link svg:hover,
@@ -53,7 +53,7 @@ h4:hover .heading-anchor-link svg:hover {
   --at-apply: 'origin-bottom-left scale-x-100';
 }
 .highlight-hover::after {
-  --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-300';
+  --at-apply: 'origin-bottom-right scale-x-0 transition-transform';
 }
 /* Fix Position Issue on iOS */
 @supports (-webkit-touch-callout: none) {
diff --git a/src/styles/heti.css b/src/styles/heti.css
index 19541b4..e8922d5 100644
--- a/src/styles/heti.css
+++ b/src/styles/heti.css
@@ -60,7 +60,7 @@
 /* Links */
 .heti :where(a:not(.gc-container)) {
   --at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.1em';
-  --at-apply: 'transition-colors ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
+  --at-apply: 'transition-colors hover:(c-primary decoration-primary/80) lg:underline-0.1em';
 }
 
 /* Images */
diff --git a/uno.config.ts b/uno.config.ts
index 7e73ea4..ab3ec07 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -56,7 +56,7 @@ export default defineConfig({
   ],
   shortcuts: {
     'uno-desktop-column': 'fixed right-[max(5rem,calc(50vw-35rem))] w-14rem',
-    'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
+    'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/40 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/80 text-primary)',
     'uno-decorative-line': 'mb-4.5 h-0.25 w-10 bg-secondary/25 lg:(mb-6 w-11)',
     'uno-tags-wrapper': 'flex flex-wrap gap-x-3 gap-y-3.2',
     'uno-round-border': 'border border-secondary/5 rounded border-solid',