refactor: remove underline animation and update styling

- Remove underline-animation UnoCSS shortcut from uno.config.ts - Update Navbar component to remove underline-animation classes - Remove inline script for link transition animations - Add cover images to existing posts - Update font and date display classes in index pages - Modify global CSS for iOS rendering optimization
2025-06-15 11:12:54 +02:00 · 2025-01-28 04:33:47 +00:00 · 2025-01-28 04:33:47 +00:00 · 0f20e43484
commit 0f20e43484
parent f1d2204337
10 changed files with 29 additions and 73 deletions
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@ -52,7 +52,7 @@ const isAboutActive = isAboutPage(currentPath)
      <a
        href={getLocalizedPath('/')}
        class:list={[
-          isPostActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
+          isPostActive ? 'font-bold text-primary' : '',
        ]}
      >
        {currentUI.posts}
@ -62,7 +62,7 @@ const isAboutActive = isAboutPage(currentPath)
      <a
        href={getLocalizedPath('/tags')}
        class:list={[
-          isTagActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
+          isTagActive ? 'font-bold text-primary' : '',
        ]}
      >
        {currentUI.tags}
@ -72,7 +72,7 @@ const isAboutActive = isAboutPage(currentPath)
      <a
        href={getLocalizedPath('/about')}
        class:list={[
-          isAboutActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
+          isAboutActive ? 'font-bold text-primary' : '',
        ]}
      >
        {currentUI.about}
@ -80,33 +80,3 @@ const isAboutActive = isAboutPage(currentPath)
    </li>
  </ul>
 </nav>
-
-<script is:inline>
-document.addEventListener('astro:before-preparation', (event) => {
-  const hoverElement = document.querySelector('.underline-animation:hover')
-
-  if (hoverElement) {
-    const originalLoader = event.loader
-
-    event.loader = async function () {
-      await new Promise((resolve) => {
-        // 添加强制收回动画的类
-        hoverElement.classList.add('force-leave')
-
-        // 等待动画完成
-        setTimeout(resolve, 300)
-      })
-
-      return originalLoader()
-    }
-  }
-})
-
-// 为所有带有下划线动画的链接添加点击事件处理
-document.addEventListener('click', (e) => {
-  const link = e.target.closest('.underline-animation')
-  if (link) {
-    link.classList.add('force-leave')
-  }
-})
-</script>
--- a/src/components/PhotoSwipe.astro
+++ b/src/components/PhotoSwipe.astro
@ -21,6 +21,7 @@
      pswpModule: () => pswp,
      closeSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>',
      zoomSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
+      padding: { top: window.innerHeight * 0.1, bottom: window.innerHeight * 0.1, left: window.innerWidth * 0.06, right: window.innerWidth * 0.06 },
      wheelToZoom: true,
      arrowPrev: false,
      arrowNext: false,
--- a/src/components/Scrollbar.astro
+++ b/src/components/Scrollbar.astro
@ -7,11 +7,11 @@ function initScrollbar() {
  const bodyElement = document.body
  if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
    scrollbarsInstance = OverlayScrollbars({
-			target: bodyElement,
-			cancel: {
-				nativeScrollbarsOverlaid: true,  // don't initialize the overlay scrollbar if there is a native one
-			}
-		}, {
+      target: bodyElement,
+      cancel: {
+        nativeScrollbarsOverlaid: true,
+      },
+    }, {
      scrollbars: {
        theme: document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light',
        autoHide: 'scroll',
--- a/src/content/posts/容忍与自由.md
+++ b/src/content/posts/容忍与自由.md
@ -1,9 +1,11 @@
 ---
 title: 容忍与自由
-published: 1959-03-16
+published: 2024-03-16
 tags: ["胡适"]
 ---

+![](https://image.radishzz.cc/image/01-oneui/14.webp)
+
 十七八年前，我最后一次会见我的母校康耐儿大学的史学大师布尔先生（George Lincoln Burr）。我们谈到英国史学大师阿克顿（Lord Acton）一生准备要著作一部《自由之史》，没有写成他就死了。布尔先生那天谈话很多，有一句话我至今没有忘记。他说，“我年纪越大，越感觉到容忍（tolerance）比自由更重要”。

 布尔先生死了十多年了，他这句话我越想越觉得是一句不可磨灭的格言。我自己也有“年纪越大，越觉得容忍比自由还更重要”的感想。有时我竟觉得容忍是一切自由的根本：没有容忍，就没有自由。
--- a/src/content/posts/故乡.md
+++ b/src/content/posts/故乡.md
@ -1,9 +1,11 @@
 ---
 title: 故鄉
-published: 1921-01-10
+published: 2024-01-10
 tags: ["鲁迅"]
 ---

+![](https://image.radishzz.cc/image/01-oneui/21.webp)
+
 我冒了嚴寒，回到相隔二千餘里，別了二十餘年的故鄉去。

 時候既然是深冬；漸近故鄉時，天氣又陰晦了，冷風吹進船艙中，嗚嗚的響，從蓬隙向外一望，蒼黃的天底下，遠近橫著幾個蕭索的荒村，沒有一些活氣。我的心禁不住悲涼起來了。
--- a/src/content/posts/羅生門.md
+++ b/src/content/posts/羅生門.md
@ -1,9 +1,11 @@
 ---
 title: 羅生門
-published: 1971-03-05
+published: 2024-03-05
 tags: ["芥川龙之介"]
 ---

+![](https://fuwari.vercel.app/_astro/cover.CgGywNHJ_1wRFtk.webp)
+
 ある日の暮方の事である。一人の下人げにんが、羅生門らしょうもんの下で雨やみを待っていた。

 広い門の下には、この男のほかに誰もいない。ただ、所々丹塗にぬりの剥はげた、大きな円柱まるばしらに、蟋蟀きりぎりすが一匹とまっている。羅生門が、朱雀大路すざくおおじにある以上は、この男のほかにも、雨やみをする市女笠いちめがさや揉烏帽子もみえぼしが、もう二三人はありそうなものである。それが、この男のほかには誰もいない。
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@ -38,7 +38,7 @@ const postsByYear = await getPostsByYear(lang)
      // Year Group
      <section class="mt-8">
        {/* Year */}
-        <time class="text-8 font-date">{year}</time>
+        <time class="text-8 font-navbar">{year}</time>
        {/* Posts List */}
        <ul>
          {posts.map(post => (
@ -46,10 +46,10 @@ const postsByYear = await getPostsByYear(lang)
            <li class="mt-6">
              {/* Post Title */}
              <a href={`/${lang}/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
-                {/* Post Date */} 
-                <time class="text-5.6 leading-7 font-time block lg:inline lg:before:content-['_'] opacity-30" aria-hidden="true">
+                {/* Post Date */}
+                <time class="block text-5.6 leading-7 font-navbar opacity-30 lg:inline lg:before:content-['_']" aria-hidden="true">
                  {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
-                  {post.remarkPluginFrontmatter?.minutes &&  <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
+                  {post.remarkPluginFrontmatter?.minutes && <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
                </time>
            </li>
          ))}
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -30,7 +30,7 @@ const postsByYear = await getPostsByYear()
      // Year Group
      <section class="mt-8">
        {/* Year */}
-        <time class="text-8 font-time">{year}</time>
+        <time class="text-8 font-navbar">{year}</time>
        {/* Posts List */}
        <ul>
          {posts.map(post => (
@ -38,10 +38,10 @@ const postsByYear = await getPostsByYear()
            <li class="mt-6">
              {/* Post Title */}
              <a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
-                {/* Post Date */} 
-                <div class="text-5.6 leading-7 font-time block lg:inline lg:before:content-['_']" aria-hidden="true">
+                {/* Post Date */}
+                <div class="block text-5.6 leading-7 font-navbar lg:inline lg:before:content-['_']" aria-hidden="true">
                  {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
-                  {post.remarkPluginFrontmatter?.minutes &&  <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
+                  {post.remarkPluginFrontmatter?.minutes && <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
                </div>
            </li>
          ))}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -17,8 +17,8 @@ html::-webkit-scrollbar {
 body {
  --at-apply: 'text-1.6rem';
  /* Fix for iOS browser flash issue */
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }

 h1 {
--- a/uno.config.ts
+++ b/uno.config.ts
@ -34,28 +34,7 @@ export default defineConfig({
      serif: ['STIX', 'EarlySummer', 'Georgia', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
    },
  },
-  shortcuts: {
-    'underline-animation': [
-      'relative',
-      'after:content-empty',
-      'after:absolute',
-      'after:left-0',
-      'after:bottom--1',
-      'after:w-full',
-      'after:h-0.4',
-      'after:bg-secondary',
-      'after:scale-x-0',
-      'after:origin-right',
-      'after:transition-transform',
-      'after:duration-300',
-      'after:ease-out',
-      'hover:after:scale-x-100',
-      'hover:after:origin-left',
-      'transition-ready',
-      '[&.force-leave]:after:scale-x-0',
-      '[&.force-leave]:after:origin-right',
-    ],
-  },
+  shortcuts: {},
  rules: [],
  transformers: [
    transformerDirectives(),