style: optimize animation durations and details

README.zh.md

@@ -2,7 +2,7 @@
 <img alt="Cover Image" src="images/retypeset-zh-mobile.webp"/>
 
 <div align="center">
-  <a title="en" href="README.md">
+  <a title="en" href="https://github.com/radishzzz/astro-theme-retypeset?tab=readme-ov-file#retypeset">
     <img src="https://img.shields.io/badge/-English-545759?style=for-the-badge" alt="English">
   </a>
   <picture>

src/components/PostList.astro

@@ -37,9 +37,9 @@ function getPostPath(post: Post) {
     >
 
       {/* post title */}
-      <h3 class="inline">
+      <h3 class="inline transition-colors hover:c-primary">
         <a
-          class="hover:c-primary cjk:tracking-0.02em"
+          class="cjk:tracking-0.02em"
           lg={isHome ? 'font-medium text-4.5' : ''}
           href={getPostPath(post)}
           transition:name={`post-${post.data.abbrlink || post.id}-${lang}`}

src/components/Widgets/BackButton.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 duration-300 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 ease-out c-secondary active:scale-90! hover:c-primary/80"
   aria-label="Go back"
 >
   <GoBackIcon

src/components/Widgets/BackToTop.astro

@@ -8,7 +8,7 @@
 <button
   id="back-to-top-button"
   aria-label="Back to top"
-  class="fixed bottom-8 right-8 h-10 w-10 rounded-full bg-background transition-all duration-300 ease-out"
+  class="fixed bottom-8 right-8 h-10 w-10 rounded-full bg-background transition-all ease-out"
 >
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/components/Widgets/FadeUpAnimation.astro

@@ -1,18 +0,0 @@
-<script>
-function resetFadeUpAnimation() {
-  document.querySelectorAll('.animation-fade-up').forEach((container) => {
-    const childElements = Array.from(container.children)
-    childElements.forEach(element =>
-      (element as HTMLElement).style.animationName = 'none',
-    )
-    requestAnimationFrame(() => {
-      childElements.forEach(element =>
-        (element as HTMLElement).style.animationName = '',
-      )
-    })
-  })
-}
-
-resetFadeUpAnimation()
-document.addEventListener('astro:page-load', resetFadeUpAnimation)
-</script>

src/components/Widgets/GsapAnimation.astro

@@ -3,7 +3,7 @@ import { gsap } from 'gsap'
 
 function setupPostPageAnimation() {
   const allElements = Array.from(document.querySelectorAll('#gsap-post-page-content > *, #gsap-post-page-tags, #waline'))
-  const tocListChildren = Array.from(document.querySelectorAll('#toc-list > *')).slice(0, 20)
+  const tocListChildren = Array.from(document.querySelectorAll('#toc-list > *'))
   const dateElement = document.getElementById('gsap-post-page-date')
   const backButton = document.getElementById('back-button')
   const tocIcon = document.getElementById('toc-icon')

src/components/Widgets/TOC.astro

@@ -32,7 +32,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 duration-300 ease-out hover:c-secondary/80)"
+        class="absolute inset-0 flex cursor-pointer items-center 2xl:(static flex c-secondary/40 transition-colors ease-out hover:c-secondary/80)"
       >
         <span class="toc-title">
           {currentUI.toc}
@@ -41,7 +41,7 @@ const filteredHeadings = headings.filter(heading =>
         <TocIcon
           id="toc-icon"
           aria-hidden="true"
-          class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90)"
+          class="ml-1 hidden aspect-square w-4.2 2xl:(mt-4 block origin-center active:scale-90!)"
           fill="currentColor"
         />
       </label>
@@ -98,7 +98,7 @@ const filteredHeadings = headings.filter(heading =>
 
 /* Initial collapsed state with zero height grid row */
 .accordion-wrapper {
-  --at-apply: 'grid rows-[0fr] duration-300 ease-in-out';
+  --at-apply: 'grid rows-[0fr] transition-all duration-360 ease-in-out';
 }
 .accordion-content {
   --at-apply: 'max-h-66 overflow-hidden pl-4 pr-6 2xl:(max-h-[calc(100vh-26rem)] pl-1)';

src/styles/extend.css

@@ -1,7 +1,7 @@
 /* GitHub Card */
 .gc-container {
   --at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5';
-  --at-apply: 'transition-colors duration-300 ease-out lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
+  --at-apply: 'transition-colors ease-out lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
   scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
 }
 

src/styles/global.css

@@ -38,7 +38,7 @@ h4:hover .heading-anchor-link svg {
   --at-apply: 'op-80';
 }
 .heading-anchor-link svg {
-  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity duration-300 ease-out active:scale-90';
+  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity ease-out active:scale-90';
 }
 h1:hover .heading-anchor-link svg:hover,
 h2:hover .heading-anchor-link svg:hover,

src/styles/markdown.css

@@ -52,7 +52,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 duration-300 ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
+  --at-apply: 'transition-colors ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
 }
 
 /* Images */

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 duration-300 ease-out hover:(border-secondary/80 text-primary)',
+    'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors ease-out 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',