style(ui): fix inconsistent padding on post card

input.css

@@ -93,32 +93,39 @@
   }
 
   .post-header {
-    margin: 24px auto var(--content-gap-paper) auto;
+    margin: 48px auto 48px auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
 
   .post-title {
-    font-size: 40px;
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
-    line-height: 1.2;
+    font-weight: 800;
+    line-height: 1.1;
     color: var(--color-paper-primary);
     word-break: break-word;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.04em;
+    margin: 0;
   }
 
   .post-description {
-    margin-top: 10px;
     color: var(--color-paper-secondary);
-    font-size: 16px;
+    font-size: 1.125rem;
+    font-weight: 500;
     line-height: 1.7;
+    margin: 0;
   }
 
   .post-meta {
-    margin-top: 5px;
+    margin-top: 8px;
-    color: var(--color-paper-secondary);
+    color: var(--color-paper-tertiary);
-    font-size: 14px;
+    font-size: 15px;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
     flex-wrap: wrap;
+    font-weight: 500;
   }
 
   .post-meta a {
@@ -235,7 +242,8 @@
   /* 封面用 blur-img 结构：去 margin、保持圆角，内层 img cover 填充 */
   .entry-cover .blur-img {
     margin: 0;
-    border-radius: var(--radius-paper);
+    border-radius: 2rem;
+    overflow: hidden;
   }
   .entry-cover img {
     width: 100%;

src/components/frontend_layout.rs

@@ -53,12 +53,13 @@ pub fn FrontendLayout() -> Element {
     rsx! {
         div { class: "min-h-screen flex flex-col bg-paper-theme",
             Header {
+                max_width: "max-w-4xl",
                 nav_items,
                 right_content: rsx! {
                     ThemeToggle {}
                 },
             }
-            main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
+            main { class: "flex-1 w-full max-w-4xl mx-auto px-6 py-6 md:py-12",
                 SuspenseBoundary { fallback: move |_| route_skeleton(&route), Outlet::<Route> {} }
             }
             Footer {}

src/components/header.rs

@@ -41,10 +41,10 @@ pub fn Header(
     let menu_id = use_memo(|| "mobile-nav-menu".to_string());
 
     rsx! {
-        header { class: "sticky top-0 z-40 w-full border-b border-paper-border bg-paper-theme/80 backdrop-blur-sm",
+        header { class: "sticky top-0 z-40 w-full bg-[var(--color-paper-theme)]/70 backdrop-blur-md transition-all duration-300",
-            nav { class: "{max_width} mx-auto px-6 h-[60px] flex items-center justify-between",
+            nav { class: "{max_width} mx-auto px-6 h-[80px] flex items-center justify-between",
                 Link {
-                    class: "text-2xl font-bold font-serif text-paper-primary hover:text-paper-accent transition-colors duration-200",
+                    class: "text-2xl font-extrabold tracking-tight text-[var(--color-paper-primary)] hover:text-[var(--color-paper-accent)] transition-colors duration-200",
                     to: Route::Home {},
                     "Yggdrasil"
                 }

src/components/post_card.rs

@@ -32,10 +32,10 @@ pub fn PostCard(post: PostListItem) -> Element {
     let has_cover = post.cover_image.is_some();
 
     rsx! {
-        article { class: "group relative mb-6 p-6 bg-paper-entry rounded-lg border border-paper-border hover:-translate-y-0.5 hover:border-paper-accent/50 hover:shadow-sm transition-all duration-200",
+        article { class: "group relative mb-12 flex flex-col bg-[var(--color-paper-entry)] rounded-[2rem] border border-transparent hover:border-[var(--color-paper-border)] hover:shadow-sm overflow-hidden transition-all duration-300",
             if has_cover {
-                div { class: "mb-4 -mx-6 -mt-6 overflow-hidden rounded-t-lg",
+                div { class: "w-full overflow-hidden",
-                    div { class: "blur-img post-card-cover-blur",
+                    div { class: "blur-img post-card-cover-blur !rounded-none",
                         img {
                             class: "blur-img-placeholder",
                             src: "{cover_src}?w=20",
@@ -50,21 +50,21 @@ pub fn PostCard(post: PostListItem) -> Element {
                     }
                 }
             }
-            h2 { class: "text-2xl font-bold leading-tight text-paper-primary group-hover:text-paper-accent transition-colors duration-200",
+            div { class: "p-8 flex flex-col gap-3",
-                "{post.title}"
+                h2 { class: "text-2xl md:text-3xl font-extrabold tracking-tight leading-tight text-[var(--color-paper-primary)] group-hover:text-[var(--color-paper-accent)] transition-colors duration-200",
-            }
+                    "{post.title}"
-            div { class: "mt-2 text-sm text-paper-secondary leading-relaxed line-clamp-2",
+                }
-                "{post.summary.as_deref().unwrap_or_default()}"
+                div { class: "mt-1 text-base text-[var(--color-paper-secondary)] leading-relaxed line-clamp-2",
-            }
+                    "{post.summary.as_deref().unwrap_or_default()}"
-            div { class: "mt-3 flex items-center gap-3 text-[13px] text-paper-secondary",
+                }
-                span { "{date_str}" }
+                div { class: "mt-4 flex flex-wrap items-center gap-3 text-sm font-medium text-[var(--color-paper-tertiary)]",
+                    span { class: "tracking-wide", "{date_str}" }
                 if !post.tags.is_empty() {
                     span { "·" }
                     for tag in post.tags.clone().into_iter() {
                         span { key: "{tag}",
-                            // 标签叠在覆盖链接之上，点击进入标签详情页而非文章详情。
                             Link {
-                                class: "relative z-10 hover:text-paper-accent transition-colors duration-200",
+                                class: "relative z-10 px-3 py-1 rounded-full border border-[var(--color-paper-border)] hover:bg-[var(--color-paper-accent)] hover:border-[var(--color-paper-accent)] hover:text-white transition-all duration-200",
                                 to: Route::TagDetail {
                                     tag: tag.clone(),
                                 },
@@ -75,6 +75,7 @@ pub fn PostCard(post: PostListItem) -> Element {
                     }
                 }
             }
+            }
             // 覆盖层链接：铺满卡片，承担整卡跳转。
             // z-[2] 高于封面完整图 (.blur-img-full z-index:1, input.css:611)，
             // 使鼠标 hover 封面时命中本 <a> 而非 <img>：光标变 pointer 且点击可跳转；

src/pages/home.rs

@@ -112,12 +112,12 @@ fn HomePosts(current_page: i32) -> Element {
 #[component]
 fn HomeInfo() -> Element {
     rsx! {
-        div { class: "mb-10 text-center",
+        div { class: "mt-12 mb-20 flex flex-col items-start gap-4",
-            h1 { class: "text-4xl font-bold leading-tight text-paper-primary tracking-tight",
+            h1 { class: "text-6xl md:text-[5rem] font-extrabold text-[var(--color-paper-primary)] tracking-tighter leading-none",
-                "Yggdrasil"
+                "Yggdrasil."
             }
-            p { class: "mt-3 text-base text-paper-secondary leading-relaxed",
+            p { class: "text-lg md:text-xl text-[var(--color-paper-secondary)] font-medium max-w-lg leading-relaxed",
-                "以文字为主的简约博客系统"
+                "极简、快速、现代。专注于文字本身的开源博客平台。"
             }
         }
     }