Merge pull request #10 from KYJCASTER/polish/home-and-chrome

polish(home): 首页与外框的几处视觉打磨

Author: KYJCASTER

src/app/sections/hero-section.tsx

@@ -86,11 +86,11 @@ export function HeroSection() {
         </div>
 
         <div
-          className="mt-16 flex items-center gap-6 text-xs text-muted-light animate-fade-in-up"
+          className="mt-20 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-muted-light animate-fade-in-up"
           style={{ animationDelay: "0.24s" }}
         >
           <span className="font-mono uppercase tracking-wider">现在专注</span>
-          <span className="flex-1 h-px bg-border" />
+          <span aria-hidden className="text-border-strong">/</span>
           <span className="serif italic text-muted text-sm">
             Java 并发 · Go 服务端 · 网络安全
           </span>

src/app/sections/latest-posts.tsx

@@ -36,7 +36,7 @@ export function LatestPosts() {
           </div>
           <Link
             href="/blog"
-            className="hidden sm:inline-flex items-center gap-1.5 text-sm font-medium text-muted hover:text-primary transition-colors duration-300 group"
+            className="hidden sm:inline-flex items-center gap-1.5 text-sm font-medium text-foreground/80 hover:text-primary transition-colors duration-300 group"
           >
             全部 {posts.length} 篇
             <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]" />

src/components/footer.tsx

@@ -5,7 +5,7 @@ import { GitHubIcon, RssIcon } from "./icons"
 export function Footer() {
   const year = new Date().getFullYear()
   return (
-    <footer className="mt-24 border-t hairline">
+    <footer className="mt-16 sm:mt-24 border-t hairline">
       <div className="max-w-5xl mx-auto px-5 sm:px-6 py-12">
         {/* Centred bookplate-style colophon */}
         <div className="flex flex-col items-center text-center gap-4">
@@ -18,28 +18,25 @@ export function Footer() {
           </p>
 
           {/* Secondary navigation — quiet links to the smaller pages. */}
-          <nav aria-label="次级导航" className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 mt-1">
+          <nav aria-label="次级导航" className="flex flex-wrap items-center justify-center gap-x-5 gap-y-1.5 mt-1">
             <Link
               href="/frontispiece"
               className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"
             >
               扉页
             </Link>
-            <span aria-hidden className="text-border-strong">·</span>
             <Link
               href="/archive"
               className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"
             >
               档案
             </Link>
-            <span aria-hidden className="text-border-strong">·</span>
             <Link
               href="/series"
               className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"
             >
               系列
             </Link>
-            <span aria-hidden className="text-border-strong">·</span>
             <Link
               href="/curriculum"
               className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"

src/components/post-card.tsx

@@ -223,7 +223,7 @@ export function PostCard({ post, variant = "default" }: PostCardProps) {
       <Link href={`/blog/${post.slug}`} className="group block">
         <article className="card overflow-hidden">
           <div className="grid md:grid-cols-2 gap-0">
-            <div className="aspect-[16/10] md:aspect-auto md:min-h-[260px] relative overflow-hidden">
+            <div className="aspect-[3/2] md:aspect-auto md:min-h-[260px] relative overflow-hidden">
               <CoverPanel post={post} monogramSize="xl" />
               <div className="absolute inset-0 bg-gradient-to-tr from-black/5 via-transparent to-transparent pointer-events-none" />
             </div>
@@ -261,21 +261,20 @@ export function PostCard({ post, variant = "default" }: PostCardProps) {
         <div className="p-5 flex flex-col flex-1">
           <div className="flex items-center gap-2 text-xs text-muted-light mb-2">
             <span className="font-mono tabular-nums">{formatDate(post.date)}</span>
-            {post.tags[0] && <span className="divider-dot">{post.tags[0]}</span>}
           </div>
           <h3 className="serif text-lg font-semibold leading-snug mb-2 text-foreground group-hover:text-primary transition-colors duration-300 line-clamp-2">
             {post.title}
           </h3>
-          <p className="text-sm text-muted line-clamp-2 mb-3 flex-1">
+          <p className="text-sm text-muted line-clamp-2 mb-4 flex-1">
             {post.excerpt}
           </p>
-          <div className="flex items-center justify-between text-xs text-muted-light mt-auto pt-3 border-t hairline">
+          <div className="flex items-center justify-between mt-auto">
             <div className="flex flex-wrap gap-1.5">
               {post.tags.slice(0, 2).map((t) => (
-                <span key={t} className="tag-chip">{t}</span>
+                <span key={t} className="tag-chip tag-chip-static">{t}</span>
               ))}
             </div>
-            <ArrowUpRight className="w-4 h-4 group-hover:text-primary group-hover:-translate-y-0.5 group-hover:translate-x-0.5 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]" />
+            <ArrowUpRight className="w-4 h-4 text-muted-light group-hover:text-primary group-hover:-translate-y-0.5 group-hover:translate-x-0.5 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] shrink-0" />
           </div>
         </div>
       </article>

src/components/section-ornament.tsx

@@ -52,7 +52,9 @@ export function SectionOrnament({
       )}
     >
       <span className="block h-px w-16 sm:w-20 bg-border-strong/40" />
-      <span className="text-muted-light text-[0.6rem] tracking-[0.4em]">◇</span>
+      <svg width="7" height="7" viewBox="0 0 8 8" fill="none" className="text-muted-light">
+        <path d="M4 0.5 L7.5 4 L4 7.5 L0.5 4 Z" fill="currentColor" />
+      </svg>
       <span className="block h-px w-16 sm:w-20 bg-border-strong/40" />
     </div>
   )