Add fluid typography scale and responsive headings

app/blog/[slug]/page.tsx

@@ -9,6 +9,8 @@ import { PostToc } from '@/components/post-toc';
 import { ScrollReveal } from '@/components/scroll-reveal';
 import { PostCard } from '@/components/post-card';
 import { PostStorylineNav } from '@/components/post-storyline-nav';
+import { SectionDivider } from '@/components/section-divider';
+import { FooterCue } from '@/components/footer-cue';
 
 export function generateStaticParams() {
   return allPosts.map((post) => ({
@@ -48,77 +50,87 @@ export default function BlogPostPage({ params }: Props) {
           <PostToc />
         </aside>
         <div className="flex-1 space-y-6">
-          <ScrollReveal>
-            <header className="mb-2 space-y-2">
-              {post.published_at && (
-                <p className="text-xs text-slate-500 dark:text-slate-500">
-                  {new Date(post.published_at).toLocaleDateString(
-                    siteConfig.defaultLocale
-                  )}
-                </p>
-              )}
-              <h1 className="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl dark:text-slate-50">
-                {post.title}
-              </h1>
-              {post.tags && (
-                <div className="flex flex-wrap gap-2 pt-1">
-                  {post.tags.map((t) => (
-                    <Link
-                      key={t}
-                      href={`/tags/${encodeURIComponent(
-                        t.toLowerCase().replace(/\s+/g, '-')
-                      )}`}
-                      className="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight transition hover:bg-accent hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
-                    >
-                      #{t}
-                    </Link>
-                  ))}
-                </div>
-              )}
-            </header>
-          </ScrollReveal>
+          <SectionDivider>
+            <ScrollReveal>
+              <header className="mb-2 space-y-2">
+                {post.published_at && (
+                  <p className="type-small text-slate-500 dark:text-slate-500">
+                    {new Date(post.published_at).toLocaleDateString(
+                      siteConfig.defaultLocale
+                    )}
+                  </p>
+                )}
+                <h1 className="type-display font-bold leading-tight text-slate-900 dark:text-slate-50">
+                  {post.title}
+                </h1>
+                {post.tags && (
+                  <div className="flex flex-wrap gap-2 pt-1">
+                    {post.tags.map((t) => (
+                      <Link
+                        key={t}
+                        href={`/tags/${encodeURIComponent(
+                          t.toLowerCase().replace(/\s+/g, '-')
+                        )}`}
+                        className="tag-chip rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight dark:bg-slate-800 dark:text-slate-100"
+                      >
+                        #{t}
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </header>
+            </ScrollReveal>
+          </SectionDivider>
 
-          <ScrollReveal>
-            <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
-              {post.feature_image && (
-                // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  src={post.feature_image.replace('../assets', '/assets')}
-                  alt={post.title}
-                  className="my-4 rounded"
-                />
-              )}
-              <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
-            </article>
-          </ScrollReveal>
+          <SectionDivider>
+            <ScrollReveal>
+              <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
+                {post.feature_image && (
+                  // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={post.feature_image.replace('../assets', '/assets')}
+                    alt={post.title}
+                    className="my-4 rounded"
+                  />
+                )}
+                <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
+              </article>
+            </ScrollReveal>
+          </SectionDivider>
 
-          <ScrollReveal>
-            <PostStorylineNav
-              current={post}
-              newer={neighbors.newer}
-              older={neighbors.older}
-            />
-          </ScrollReveal>
+          <FooterCue />
+
+          <SectionDivider>
+            <ScrollReveal>
+              <PostStorylineNav
+                current={post}
+                newer={neighbors.newer}
+                older={neighbors.older}
+              />
+            </ScrollReveal>
+          </SectionDivider>
 
           {relatedPosts.length > 0 && (
-            <ScrollReveal>
-              <section className="space-y-4 rounded-xl border border-slate-200 bg-white/80 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/50">
-                <div className="flex items-center justify-between gap-2">
-                  <h2 className="text-base font-semibold text-slate-900 dark:text-slate-50">
-                    相關文章
-                  </h2>
-                  <p className="text-xs text-slate-500 dark:text-slate-400">
-                    為你挑選相似主題
-                  </p>
-                </div>
-                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-                  {relatedPosts.map((related) => (
-                    <PostCard key={related._id} post={related} showTags={false} />
-                  ))}
-                </div>
-              </section>
-            </ScrollReveal>
+            <SectionDivider>
+              <ScrollReveal>
+                <section className="space-y-4 rounded-xl border border-slate-200 bg-white/80 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/50">
+                  <div className="flex items-center justify-between gap-2">
+                    <h2 className="type-subtitle font-semibold text-slate-900 dark:text-slate-50">
+                      相關文章
+                    </h2>
+                    <p className="type-small text-slate-500 dark:text-slate-400">
+                      為你挑選相似主題
+                    </p>
+                  </div>
+                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                    {relatedPosts.map((related) => (
+                      <PostCard key={related._id} post={related} showTags={false} />
+                    ))}
+                  </div>
+                </section>
+              </ScrollReveal>
+            </SectionDivider>
           )}
         </div>
       </div>

app/blog/page.tsx

@@ -11,10 +11,10 @@ export default function BlogIndexPage() {
   return (
     <section className="space-y-4">
       <header className="space-y-1">
-        <h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+        <h1 className="type-title font-semibold text-slate-900 dark:text-slate-50">
           所有文章
         </h1>
-        <p className="text-xs text-slate-500 dark:text-slate-400">
+        <p className="type-small text-slate-500 dark:text-slate-400">
           繼續往下滑，慢慢逛逛。
         </p>
       </header>

app/page.tsx

@@ -9,17 +9,17 @@ export default function HomePage() {
   return (
     <section className="space-y-6">
       <header className="space-y-1 text-center">
-        <h1 className="text-2xl font-bold text-slate-900 sm:text-3xl dark:text-slate-50">
+        <h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
           {siteConfig.name} 的最新動態
         </h1>
-        <p className="text-sm text-slate-600 dark:text-slate-300">
+        <p className="type-small text-slate-600 dark:text-slate-300">
           {siteConfig.tagline}
         </p>
       </header>
 
       <div>
         <div className="mb-3 flex items-baseline justify-between">
-          <h2 className="text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+          <h2 className="type-small font-semibold uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
             最新文章
           </h2>
           <Link

app/tags/page.tsx

@@ -21,11 +21,11 @@ export default function TagIndexPage() {
 
   return (
     <section className="space-y-4">
-      <h1 className="flex items-center gap-2 text-lg font-semibold text-slate-900 dark:text-slate-50">
+      <h1 className="type-title flex items-center gap-2 font-semibold text-slate-900 dark:text-slate-50">
         <FontAwesomeIcon icon={faTags} className="h-5 w-5 text-slate-400" />
         標籤索引
       </h1>
-      <p className="text-xs text-slate-500 dark:text-slate-400">
+      <p className="type-small text-slate-500 dark:text-slate-400">
         目前共有 {tags.length} 個標籤。
       </p>
       <div className="flex flex-wrap gap-3 text-xs">
@@ -35,7 +35,7 @@ export default function TagIndexPage() {
             <Link
               key={tag}
               href={`/tags/${slug}`}
-              className={`rounded-full px-3 py-1 shadow-sm transition-transform transition-shadow duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md ${color}`}
+              className={`tag-chip rounded-full px-3 py-1 shadow-sm transition-transform transition-shadow duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md ${color}`}
             >
               <span className="mr-1">{tag}</span>
               <span className="opacity-70">({count})</span>