Quiet article archive hero

Author: oiahoon

docs/agent/design-system.md

@@ -40,6 +40,7 @@ Read this for visual design, spacing, theme behavior, icons, animation, and UI c
 - Mobile navigation must remain reachable.
 - Article detail mobile headers should let body text enter quickly without removing the publication context.
 - Screenshot-led UIUX rounds should protect first-viewport content entry, especially mobile homepage and desktop photography archive rhythm.
+- Article archive headings should stay quieter than photography and support scanning the list quickly.
 - Mobile menus must stack above photography and homepage media in both normal and locked-dark pages.
 - Long archive and tag lists should use native browser containment or lazy media loading before adding client-side behavior.
 

docs/improvement-progress.md

@@ -63,6 +63,9 @@
 - 进行：Round 15 覆盖摄影标签、普通标签、分页归档、文章归档和首页，定位到长标签详情列表可减少离屏渲染成本。
 - 完成：标签详情条目增加原生 `content-visibility: auto` 与 `contain-intrinsic-size`，版本号提升到 `0.0.16`，并补充长列表设计上下文。
 - 验证：Round 15 `/tags/摄影/` 109 项与 `/tags/Notes/` 11 项保持稳定，390px 与 1440px 下无横向溢出；`npm run check:content-health`、`npm run build`、`git diff --check` 通过。
+- 进行：Round 16 基于文章归档桌面与手机截图，定位到 archive hero 仍过于居中和展示化。
+- 完成：文章归档 hero、lede 和主题链接改为左对齐，并降低标题比例，版本号提升到 `0.0.17`。
+- 验证：Round 16 文章首条在 390px 下提前到 `510px`、桌面提前到 `535px`，8 个主题链接保留；`npm run check:content-health`、`npm run build`、`git diff --check` 通过。
 
 ### 2026-02-26
 - 完成：建立执行版改进计划，按“文档基线 -> 技术债 -> UI/UX”重排优先级。
@@ -86,5 +89,5 @@
 - 质量校验命令：`npm run check:docs-baseline`
 - 内容治理命令：`npm run check:content-health`
 - 安全校验命令：`npm run check:security`
-- 最近结果：`189 page(s) built in 1.45s`，`content health: 0 errors / 0 warnings`，`tag entries use content-visibility containment`，`audit: 5 remaining vulnerabilities requiring breaking --force fixes`
+- 最近结果：`189 page(s) built in 1.43s`，`content health: 0 errors / 0 warnings`，`article archive first entry at 510px mobile and 535px desktop`，`audit: 5 remaining vulnerabilities requiring breaking --force fixes`
 - 最近验证日期：2026-06-23

docs/uiux-20-round-log.md

@@ -2,6 +2,41 @@
 
 This log tracks the repeated screenshot-led UI/UX improvement rounds for Joey's Notes.
 
+## Round 16 - 2026-06-23 - Article Archive Index Rhythm
+
+Evidence:
+
+- Baseline screenshots: `/private/tmp/oiahoon-uiux-round-15/articles-390x844.png`, `/private/tmp/oiahoon-uiux-round-15/articles-1440x900.png`
+- Final screenshots: `/private/tmp/oiahoon-uiux-round-16-after/`
+- Reviewed route: `/articles/`
+- Viewports: `390x844`, `1440x900`
+
+Findings:
+
+- The article archive had no horizontal overflow.
+- Desktop article archive still felt too much like a centered hero page, with the first article starting at `561px`.
+- Articles should stay text-first and scannable, visually quieter than photography-led pages.
+
+Changes:
+
+- Left-aligned the article archive hero, lede, and topic-link row.
+- Reduced article archive title scale, especially on desktop and long mobile wraps.
+- Preserved the 8 topic links and the existing article stream content.
+- Bumped the app version to `0.0.17`.
+- Added an agent design-system note that article archive headings should stay quieter than photography and support quick list scanning.
+
+Validation plan:
+
+Results:
+
+- Final screenshots: `/private/tmp/oiahoon-uiux-round-16-after/`
+- First article now starts at `510px` on `390x844` and `535px` on `1440x900`.
+- All 8 topic links remain visible, and no horizontal overflow or offscreen offenders were detected.
+- `npm run check:content-health`: passed, 120 posts scanned, 0 errors, 0 warnings.
+- `npm run build`: passed, 189 pages built in 1.43s.
+- `git diff --check`: passed.
+- `npm run check:security`: still reports the same 5 remaining vulnerabilities that require breaking `npm audit fix --force`.
+
 ## Round 15 - 2026-06-23 - Tag List Rendering Containment
 
 Evidence:

package-lock.json

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

package.json

@@ -74,24 +74,25 @@ const shouldShowTopicLinks = topTags.length >= 3;
   }
 
   .articles-hero {
-    width: min(58rem, 100%);
+    width: min(52rem, 100%);
+    text-align: left;
   }
 
   .articles-kicker {
     display: block;
-    text-align: center;
+    text-align: left;
   }
 
   .articles-title {
     margin-top: 1rem;
-    font-size: clamp(3rem, 8vw, 5.5rem);
-    line-height: 0.98;
+    font-size: clamp(2.75rem, 5.6vw, 4.4rem);
+    line-height: 1.05;
     font-weight: 600;
   }
 
   .articles-lede {
-    width: min(40rem, 100%);
-    margin: 1.05rem auto 0;
+    width: min(38rem, 100%);
+    margin: 1rem 0 0;
     color: color-mix(in srgb, var(--muted) 88%, var(--text));
     font-size: clamp(0.98rem, 2.2vw, 1.08rem);
     line-height: 1.8;
@@ -100,7 +101,7 @@ const shouldShowTopicLinks = topTags.length >= 3;
   .articles-topic-links {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: flex-start;
     gap: 0.5rem 1rem;
     margin-top: 1.45rem;
   }
@@ -164,8 +165,8 @@ const shouldShowTopicLinks = topTags.length >= 3;
 
     .articles-title {
       margin-top: 0.65rem;
-      font-size: clamp(2.18rem, 11.2vw, 3.15rem);
-      line-height: 1;
+      font-size: clamp(2rem, 9.4vw, 2.8rem);
+      line-height: 1.08;
     }
 
     .articles-lede {