Tighten mobile articles archive

Author: oiahoon

docs/agent/articles.md

@@ -18,6 +18,7 @@ Articles should feel like a quiet paper archive and readable stream, not a card-
 - Do not rename the page back to `技术文章` unless explicitly requested.
 - Do not convert the article archive into a dense card grid.
 - Keep title, date, description hierarchy clear.
+- On mobile article archives, keep the hero compact enough that topic links and the first article enter early.
 - Long Chinese titles, English technical terms, and identifiers like `use_case` must wrap naturally.
 - Code blocks and inline code must be readable without looking accidentally selected.
 - If editing shared `.entry-*` styles, regression-test homepage, tag results, pagination, and article detail pages.

docs/improvement-progress.md

@@ -42,6 +42,9 @@
 - 进行：Round 8 覆盖 About、Portfolio、Tags、Articles 和 Home，定位到 Tags 移动端 hero/统计区过重，标签列表进入视口偏晚。
 - 完成：Tags 移动端压缩标题、引导、统计和列表入口间距，版本号提升到 `0.0.9`。
 - 验证：Round 8 Tags 首条标签在 390px 下 `y=314px` 进入视口，42 个标签保留，桌面与移动端无横向溢出；`npm run check:content-health`、`npm run build`、`git diff --check` 通过。
+- 进行：Round 9 基于文章归档移动端截图，定位到大标题三行换行导致文章入口偏低。
+- 完成：文章归档仅压缩移动端 hero 标题、引导、主题链接和列表入口间距，版本号提升到 `0.0.10`。
+- 验证：Round 9 文章首条在 390px 下 `y=562px` 进入视口，主题链接保留，桌面与移动端无横向溢出；`npm run check:content-health`、`npm run build`、`git diff --check` 通过。
 
 ### 2026-02-26
 - 完成：建立执行版改进计划，按“文档基线 -> 技术债 -> UI/UX”重排优先级。
@@ -65,5 +68,5 @@
 - 质量校验命令：`npm run check:docs-baseline`
 - 内容治理命令：`npm run check:content-health`
 - 安全校验命令：`npm run check:security`
-- 最近结果：`189 page(s) built in 1.48s`，`content health: 0 errors / 0 warnings`，`tags mobile entry verified`，`audit: 5 remaining vulnerabilities requiring breaking --force fixes`
+- 最近结果：`189 page(s) built in 1.49s`，`content health: 0 errors / 0 warnings`，`articles mobile hero verified`，`audit: 5 remaining vulnerabilities requiring breaking --force fixes`
 - 最近验证日期：2026-06-22

docs/uiux-20-round-log.md

@@ -2,6 +2,36 @@
 
 This log tracks the repeated screenshot-led UI/UX improvement rounds for Joey's Notes.
 
+## Round 9 - 2026-06-22 - Articles Mobile Hero Density
+
+Evidence:
+
+- Baseline screenshots: `/private/tmp/oiahoon-uiux-round-08/articles-390x844.png`, `/private/tmp/oiahoon-uiux-round-08/articles-1440x900.png`
+- Reviewed route: `/articles/`
+- Viewports: `1440x900`, `390x844`
+
+Findings:
+
+- The article archive is correctly text-first and has no horizontal overflow.
+- On mobile, the large English hero title wrapped into multiple lines and pushed topic links and the first article lower than necessary.
+
+Changes:
+
+- Reduced mobile-only article archive top margin, title scale, lede spacing, topic-link gap, and stream entry gap.
+- Kept the desktop article archive, text stream, and tag-link structure unchanged.
+- Bumped the app version to `0.0.10`.
+
+Validation plan:
+
+Results:
+
+- Final screenshots: `/private/tmp/oiahoon-uiux-round-09-after/`
+- Articles archive: first article enters at `y=562px` on `390x844`, topic links remain available, and there is no horizontal overflow at desktop or mobile widths.
+- `npm run check:content-health`: passed, 120 posts scanned, 0 errors, 0 warnings.
+- `npm run build`: passed, 189 pages built in 1.49s.
+- `git diff --check`: passed.
+- `npm run check:security`: still reports the same 5 remaining vulnerabilities that require breaking `npm audit fix --force`.
+
 ## Round 8 - 2026-06-22 - Tags Mobile Entry Density
 
 Evidence:

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "joey-notes-astro",
   "type": "module",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",

package.json

@@ -159,26 +159,27 @@ const shouldShowTopicLinks = topTags.length >= 3;
 
   @media (max-width: 640px) {
     .articles-page {
-      margin-top: 2.35rem;
+      margin-top: 1.75rem;
     }
 
     .articles-title {
-      margin-top: 0.8rem;
-      font-size: clamp(2.4rem, 13vw, 3.8rem);
+      margin-top: 0.65rem;
+      font-size: clamp(2.18rem, 11.2vw, 3.15rem);
+      line-height: 1;
     }
 
     .articles-lede {
-      margin-top: 0.85rem;
-      font-size: 0.98rem;
-      line-height: 1.7;
+      margin-top: 0.72rem;
+      font-size: 0.94rem;
+      line-height: 1.65;
     }
 
     .articles-topic-links {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       justify-content: stretch;
       gap: 0.35rem 1rem;
-      margin-top: 1.2rem;
+      margin-top: 0.95rem;
     }
 
     .articles-topic-link {
@@ -196,7 +197,7 @@ const shouldShowTopicLinks = topTags.length >= 3;
     }
 
     .articles-stream {
-      margin-top: 1.9rem;
+      margin-top: 1.55rem;
     }
   }
 </style>