Skip to content

Commit 9ff04c5

Browse files
committed
polish(home): 首页与外框的几处视觉打磨
不换设计语言(warm sand / terracotta / Fraunces serif 全部保留), 只针对截图里看到的几处别扭做局部微调。 首页 / 文章列表: - hero-section: 底部 "现在专注" 一行原本是 flex-1 hr,宽度比例在桌面 过长、在小屏过短;改成 inline label,去掉 hr,避免与下方 SectionOrnament 的 hairline 撞型 - latest-posts: 右上 "全部 N 篇" 链接 text-muted → text-foreground/80, 在卡片密集区更可见 - post-card (default): 删除 footer 的 border-t hairline,tags 与 arrow 直接同行;原本卡片偏矮时 footer 显得拥挤 - post-card (featured): 移动端 cover 比例 16/10 → 3/2,避免单卡占满 第一屏 导航 / 页脚 / 整体包装: - footer: 次级导航去掉 · 分隔符(折行时 · 会落到行首),改靠 gap-x-5 统一分隔 - footer: 顶部 mt-24 → mt-16 sm:mt-24,短页面(/tags 等)上方留白更合理 - section-ornament: ◇ glyph 换成 SVG diamond,避免中文字体下渲染偏移 不改动 navbar(idle 加 hairline 会切断 hero vignette,撤回了那条 vision 建议)。 不动配色 token / 字体 / CoverPanel 8 种 SVG / 火漆印 / 章节进度条。
1 parent 9a3fb23 commit 9ff04c5

5 files changed

Lines changed: 13 additions & 15 deletions

File tree

src/app/sections/hero-section.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,11 @@ export function HeroSection() {
8686
</div>
8787

8888
<div
89-
className="mt-16 flex items-center gap-6 text-xs text-muted-light animate-fade-in-up"
89+
className="mt-20 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-muted-light animate-fade-in-up"
9090
style={{ animationDelay: "0.24s" }}
9191
>
9292
<span className="font-mono uppercase tracking-wider">现在专注</span>
93-
<span className="flex-1 h-px bg-border" />
93+
<span aria-hidden className="text-border-strong">/</span>
9494
<span className="serif italic text-muted text-sm">
9595
Java 并发 · Go 服务端 · 网络安全
9696
</span>

src/app/sections/latest-posts.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function LatestPosts() {
3636
</div>
3737
<Link
3838
href="/blog"
39-
className="hidden sm:inline-flex items-center gap-1.5 text-sm font-medium text-muted hover:text-primary transition-colors duration-300 group"
39+
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"
4040
>
4141
全部 {posts.length}
4242
<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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { GitHubIcon, RssIcon } from "./icons"
55
export function Footer() {
66
const year = new Date().getFullYear()
77
return (
8-
<footer className="mt-24 border-t hairline">
8+
<footer className="mt-16 sm:mt-24 border-t hairline">
99
<div className="max-w-5xl mx-auto px-5 sm:px-6 py-12">
1010
{/* Centred bookplate-style colophon */}
1111
<div className="flex flex-col items-center text-center gap-4">
@@ -18,28 +18,25 @@ export function Footer() {
1818
</p>
1919

2020
{/* Secondary navigation — quiet links to the smaller pages. */}
21-
<nav aria-label="次级导航" className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 mt-1">
21+
<nav aria-label="次级导航" className="flex flex-wrap items-center justify-center gap-x-5 gap-y-1.5 mt-1">
2222
<Link
2323
href="/frontispiece"
2424
className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"
2525
>
2626
扉页
2727
</Link>
28-
<span aria-hidden className="text-border-strong">·</span>
2928
<Link
3029
href="/archive"
3130
className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"
3231
>
3332
档案
3433
</Link>
35-
<span aria-hidden className="text-border-strong">·</span>
3634
<Link
3735
href="/series"
3836
className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"
3937
>
4038
系列
4139
</Link>
42-
<span aria-hidden className="text-border-strong">·</span>
4340
<Link
4441
href="/curriculum"
4542
className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-light hover:text-foreground transition-colors"

src/components/post-card.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export function PostCard({ post, variant = "default" }: PostCardProps) {
223223
<Link href={`/blog/${post.slug}`} className="group block">
224224
<article className="card overflow-hidden">
225225
<div className="grid md:grid-cols-2 gap-0">
226-
<div className="aspect-[16/10] md:aspect-auto md:min-h-[260px] relative overflow-hidden">
226+
<div className="aspect-[3/2] md:aspect-auto md:min-h-[260px] relative overflow-hidden">
227227
<CoverPanel post={post} monogramSize="xl" />
228228
<div className="absolute inset-0 bg-gradient-to-tr from-black/5 via-transparent to-transparent pointer-events-none" />
229229
</div>
@@ -261,21 +261,20 @@ export function PostCard({ post, variant = "default" }: PostCardProps) {
261261
<div className="p-5 flex flex-col flex-1">
262262
<div className="flex items-center gap-2 text-xs text-muted-light mb-2">
263263
<span className="font-mono tabular-nums">{formatDate(post.date)}</span>
264-
{post.tags[0] && <span className="divider-dot">{post.tags[0]}</span>}
265264
</div>
266265
<h3 className="serif text-lg font-semibold leading-snug mb-2 text-foreground group-hover:text-primary transition-colors duration-300 line-clamp-2">
267266
{post.title}
268267
</h3>
269-
<p className="text-sm text-muted line-clamp-2 mb-3 flex-1">
268+
<p className="text-sm text-muted line-clamp-2 mb-4 flex-1">
270269
{post.excerpt}
271270
</p>
272-
<div className="flex items-center justify-between text-xs text-muted-light mt-auto pt-3 border-t hairline">
271+
<div className="flex items-center justify-between mt-auto">
273272
<div className="flex flex-wrap gap-1.5">
274273
{post.tags.slice(0, 2).map((t) => (
275-
<span key={t} className="tag-chip">{t}</span>
274+
<span key={t} className="tag-chip tag-chip-static">{t}</span>
276275
))}
277276
</div>
278-
<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)]" />
277+
<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" />
279278
</div>
280279
</div>
281280
</article>

src/components/section-ornament.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ export function SectionOrnament({
5252
)}
5353
>
5454
<span className="block h-px w-16 sm:w-20 bg-border-strong/40" />
55-
<span className="text-muted-light text-[0.6rem] tracking-[0.4em]"></span>
55+
<svg width="7" height="7" viewBox="0 0 8 8" fill="none" className="text-muted-light">
56+
<path d="M4 0.5 L7.5 4 L4 7.5 L0.5 4 Z" fill="currentColor" />
57+
</svg>
5658
<span className="block h-px w-16 sm:w-20 bg-border-strong/40" />
5759
</div>
5860
)

0 commit comments

Comments
 (0)