From c9c8a36c16d345d0631953c6ab05930f4e1c1fb4 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Thu, 9 Oct 2025 17:08:12 +0800
Subject: [PATCH] fix: article-pagination

- simplify html
- fix rtl item alignment
- fix empty span tag when showDate is false
- align hover effect with other element, removes group hover underline
---
 assets/css/compiled/main.css             | 48 ++-----------------
 layouts/partials/article-pagination.html | 60 +++++++++---------------
 2 files changed, 27 insertions(+), 81 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 40e16531..3695def8 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -657,6 +657,9 @@ body.zen-mode-enable {
   .me-4 {
     margin-inline-end: calc(var(--spacing) * 4);
   }
+  .me-6 {
+    margin-inline-end: calc(var(--spacing) * 6);
+  }
   .prose {
     color: var(--tw-prose-body);
     max-width: 65ch;
@@ -1148,9 +1151,6 @@ body.zen-mode-enable {
   .mt-20 {
     margin-top: calc(var(--spacing) * 20);
   }
-  .mt-\[0\.1rem\] {
-    margin-top: 0.1rem;
-  }
   .mt-\[0\.5rem\] {
     margin-top: 0.5rem;
   }
@@ -1220,9 +1220,6 @@ body.zen-mode-enable {
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
-  .ml-3 {
-    margin-left: calc(var(--spacing) * 3);
-  }
   .box-border {
     box-sizing: border-box;
   }
@@ -2510,27 +2507,6 @@ body.zen-mode-enable {
       }
     }
   }
-  .group-hover\:text-primary-600 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        color: rgba(var(--color-primary-600), 1);
-      }
-    }
-  }
-  .group-hover\:underline {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        text-decoration-line: underline;
-      }
-    }
-  }
-  .group-hover\:decoration-primary-500 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        text-decoration-color: rgba(var(--color-primary-500), 1);
-      }
-    }
-  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3231,11 +3207,6 @@ body.zen-mode-enable {
       display: none;
     }
   }
-  .ltr\:inline {
-    &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
-      display: inline;
-    }
-  }
   .rtl\:-mr-\[79px\] {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       margin-right: calc(79px * -1);
@@ -3256,9 +3227,9 @@ body.zen-mode-enable {
       display: none;
     }
   }
-  .rtl\:inline {
+  .rtl\:rotate-180 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      display: inline;
+      rotate: 180deg;
     }
   }
   .dark\:flex {
@@ -3504,15 +3475,6 @@ body.zen-mode-enable {
       }
     }
   }
-  .dark\:group-hover\:text-primary-400 {
-    &:is(.dark *) {
-      &:is(:where(.group):hover *) {
-        @media (hover: hover) {
-          color: rgba(var(--color-primary-400), 1);
-        }
-      }
-    }
-  }
   .dark\:hover\:\!bg-primary-700 {
     &:is(.dark *) {
       &:hover {
diff --git a/layouts/partials/article-pagination.html b/layouts/partials/article-pagination.html
index ca2de281..d0d6bd64 100644
--- a/layouts/partials/article-pagination.html
+++ b/layouts/partials/article-pagination.html
@@ -9,52 +9,36 @@
     <div class="pt-8">
       <hr class="border-dotted border-neutral-300 dark:border-neutral-600">
       <div class="flex justify-between pt-3">
-        <span>
+        <span class="flex flex-col">
           {{ if $prev }}
-            <a class="flex group mr-3" href="{{ $prev.RelPermalink }}">
-              <span
-                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
-                >&larr;</span
-              >
-              <span
-                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
-                >&rarr;</span
-              >
-              <span class="flex flex-col">
-                <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
-                  >{{ $prev.Title | emojify }}</span
-                >
-                <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
-                  {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-                    {{ partial "meta/date.html" $prev.Date }}
-                  {{ end }}
-                </span>
+            <a
+              class="flex text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
+              href="{{ $prev.RelPermalink }}">
+              <span class="leading-6">
+                <span class="inline-block rtl:rotate-180">&larr;</span>&ensp;{{ $prev.Title | emojify }}
               </span>
             </a>
+            {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
+              <span class="ms-6 mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                {{ partial "meta/date.html" $prev.Date }}
+              </span>
+            {{ end }}
           {{ end }}
         </span>
-        <span>
+        <span class="flex flex-col items-end">
           {{ if $next }}
-            <a class="flex text-right group ml-3" href="{{ $next.RelPermalink }}">
-              <span class="flex flex-col">
-                <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
-                  >{{ $next.Title | emojify }}</span
-                >
-                <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
-                  {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
-                    {{ partial "meta/date.html" $next.Date }}
-                  {{ end }}
-                </span>
+            <a
+              class="flex text-right text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
+              href="{{ $next.RelPermalink }}">
+              <span class="leading-6">
+                {{ $next.Title | emojify }}&ensp;<span class="inline-block rtl:rotate-180">&rarr;</span>
               </span>
-              <span
-                class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
-                >&rarr;</span
-              >
-              <span
-                class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
-                >&larr;</span
-              >
             </a>
+            {{ if .Params.showDate | default (.Site.Params.article.showDate | default true) }}
+              <span class="me-6 mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                {{ partial "meta/date.html" $next.Date }}
+              </span>
+            {{ end }}
           {{ end }}
         </span>
       </div>