From 904434774bd98cf2cb4a5039cdd6c468f8334f67 Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Tue, 18 Nov 2025 16:57:13 +0800
Subject: [PATCH] Streamline storyline rail into linear layout

---
 components/post-storyline-nav.tsx | 48 +++++++++++--------------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/components/post-storyline-nav.tsx b/components/post-storyline-nav.tsx
index 5094449..3a8e273 100644
--- a/components/post-storyline-nav.tsx
+++ b/components/post-storyline-nav.tsx
@@ -41,13 +41,15 @@ export function PostStorylineNav({ current, newer, older }: Props) {
 
   return (
     <nav aria-label="文章導覽" className="relative mt-10">
-      <div className="relative overflow-hidden rounded-[32px] border border-slate-200/70 bg-gradient-to-r from-white via-slate-50 to-white px-6 py-10 shadow-lg dark:border-slate-800/70 dark:from-slate-900 dark:via-slate-900/80 dark:to-slate-900">
-        <div className="pointer-events-none absolute inset-x-10 top-1/2 hidden -translate-y-1/2 items-center gap-3 text-slate-300 dark:text-slate-600 md:flex">
-          <span className="h-0 w-0 border-y-[7px] border-y-transparent border-r-[14px] border-r-current" />
-          <span className="flex-1 border-t border-dashed border-current" />
-          <span className="h-0 w-0 rotate-180 border-y-[7px] border-y-transparent border-r-[14px] border-r-current" />
+      <div className="relative overflow-hidden rounded-[32px] border border-slate-200/70 bg-gradient-to-r from-white via-slate-50 to-white px-6 py-8 shadow-lg dark:border-slate-800/70 dark:from-slate-900 dark:via-slate-900/80 dark:to-slate-900">
+        <div className="pointer-events-none absolute inset-x-12 top-1/2 hidden md:block">
+          <div className="relative flex items-center text-slate-200 dark:text-slate-700">
+            <span className="h-0 w-0 -translate-x-3 border-y-[7px] border-y-transparent border-r-[14px] border-r-current" />
+            <span className="flex-1 border-t border-dashed border-current" />
+            <span className="h-0 w-0 translate-x-3 rotate-180 border-y-[7px] border-y-transparent border-r-[14px] border-r-current" />
+          </div>
         </div>
-        <div className="relative grid gap-8 md:grid-cols-3">
+        <div className="relative grid gap-6 md:grid-cols-3">
           {stations.map((station) => (
             <Station key={station.key} station={station} />
           ))}
@@ -58,29 +60,14 @@ export function PostStorylineNav({ current, newer, older }: Props) {
 }
 
 function Station({ station }: { station: StationConfig }) {
-  const { post, label, rel, subtitle, key } = station;
+  const { post, label, subtitle, rel, key } = station;
   const isCurrent = key === 'current';
 
-  const capsule = (
-    <span
-      className={`flex h-14 w-14 items-center justify-center rounded-full border-2 text-[11px] font-semibold uppercase tracking-[0.35em] transition duration-300 ${
-        isCurrent
-          ? 'border-blue-500 bg-blue-500 text-white shadow-[0_0_20px_rgba(59,130,246,0.35)]'
-          : post
-            ? 'border-slate-300 bg-white text-slate-500 dark:border-slate-700 dark:bg-slate-900'
-            : 'border-dashed border-slate-300 text-slate-400 dark:border-slate-700'
-      }`}
-    >
-      {label === '下一站' ? 'NEXT' : label === '上一站' ? 'PREV' : 'NOW'}
-    </span>
-  );
-
   if (!post) {
     return (
-      <div className="flex flex-col items-center gap-3 text-center text-slate-400">
-        {capsule}
-        <p className="text-xs tracking-[0.35em] uppercase">{label}</p>
-        <p className="text-base font-semibold text-slate-400">{subtitle}</p>
+      <div className="flex flex-col items-center gap-2 text-center text-slate-400">
+        <p className="text-[11px] uppercase tracking-[0.4em]">{label}</p>
+        <p className="text-lg font-semibold">{subtitle}</p>
       </div>
     );
   }
@@ -89,13 +76,11 @@ function Station({ station }: { station: StationConfig }) {
     <Link
       href={post.url}
       rel={rel}
-      className="group flex flex-col items-center gap-3 text-center text-slate-900 transition duration-300 hover:-translate-y-1 hover:text-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 dark:text-slate-50"
+      className={`group flex flex-col items-center gap-2 text-center transition duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 ${
+        isCurrent ? 'text-blue-600 dark:text-blue-400' : 'text-slate-900 dark:text-slate-50'
+      }`}
     >
-      <span className="relative flex items-center">
-        {capsule}
-        <span className={`absolute inset-x-2 top-full mt-2 h-1 rounded-full transition ${isCurrent ? 'bg-blue-500/70' : 'bg-transparent group-hover:bg-blue-400/60'}`} />
-      </span>
-      <p className="text-[11px] uppercase tracking-[0.4em] text-slate-400 dark:text-slate-500">
+      <p className="text-[11px] uppercase tracking-[0.4em] text-slate-400 transition group-hover:text-blue-500 dark:text-slate-500">
         {label}
       </p>
       <p className="text-lg font-semibold leading-snug tracking-tight">
@@ -104,6 +89,7 @@ function Station({ station }: { station: StationConfig }) {
       <span className="text-xs text-slate-500 transition group-hover:text-blue-500 dark:text-slate-400">
         {subtitle}
       </span>
+      <span className="mt-2 h-0.5 w-16 rounded-full bg-slate-200 transition group-hover:w-24 group-hover:bg-blue-400 dark:bg-slate-700" />
     </Link>
   );
 }