xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(ui): fix inconsistent padding on post card

Browse Source
This commit is contained in:
xfy 2026-07-03 17:13:02 +08:00
parent 34d1d65823
commit 197c08d258
5 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
input.css
View File

@ -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;
line-height: 1.2;
font-size: clamp(2.5rem, 6vw, 4.5rem);
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;
color: var(--color-paper-secondary);
font-size: 14px;
margin-top: 8px;
color: var(--color-paper-tertiary);
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%;

3
src/components/frontend_layout.rs
View File

@ -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 {}

6
src/components/header.rs
View File

@ -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",
nav { class: "{max_width} mx-auto px-6 h-[60px] flex items-center justify-between",
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-[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"
}

27
src/components/post_card.rs
View File

@ -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: "blur-img post-card-cover-blur",
div { class: "w-full overflow-hidden",
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",
"{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-3 flex items-center gap-3 text-[13px] text-paper-secondary",
span { "{date_str}" }
div { class: "p-8 flex flex-col gap-3",
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-1 text-base text-[var(--color-paper-secondary)] leading-relaxed line-clamp-2",
"{post.summary.as_deref().unwrap_or_default()}"
}
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 且点击可跳转；

10
src/pages/home.rs
View File

@ -112,12 +112,12 @@ fn HomePosts(current_page: i32) -> Element {
#[component]
fn HomeInfo() -> Element {
rsx! {
div { class: "mb-10 text-center",
h1 { class: "text-4xl font-bold leading-tight text-paper-primary tracking-tight",
"Yggdrasil"
div { class: "mt-12 mb-20 flex flex-col items-start gap-4",
h1 { class: "text-6xl md:text-[5rem] font-extrabold text-[var(--color-paper-primary)] tracking-tighter leading-none",
"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",
"极简、快速、现代。专注于文字本身的开源博客平台。"
}
}
}