Lift offline state

Author: oiahoon

docs/agent/design-system.md

@@ -41,6 +41,7 @@ Read this for visual design, spacing, theme behavior, icons, animation, and UI c
 - 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.
+- Offline and status pages should surface the state promptly instead of centering it deep in the viewport.
 - 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

@@ -66,6 +66,9 @@
 - 进行：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` 通过。
+- 进行：Round 17 基于离线页手机和桌面截图，定位到状态块偏深，首屏空等感略重。
+- 完成：离线页状态块上移并微调动作间距，版本号提升到 `0.0.18`，保持简洁状态页结构。
+- 验证：Round 17 手机状态块顶部为 `263px`，动作按钮底部为 `514px`，390px 与 1440px 下无横向溢出；`npm run check:content-health`、`npm run build`、`git diff --check` 通过。
 
 ### 2026-02-26
 - 完成：建立执行版改进计划，按“文档基线 -> 技术债 -> UI/UX”重排优先级。
@@ -89,5 +92,5 @@
 - 质量校验命令：`npm run check:docs-baseline`
 - 内容治理命令：`npm run check:content-health`
 - 安全校验命令：`npm run check:security`
-- 最近结果：`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`
+- 最近结果：`189 page(s) built in 1.45s`，`content health: 0 errors / 0 warnings`，`offline actions bottom at 514px mobile`，`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 17 - 2026-06-23 - Offline State Position
+
+Evidence:
+
+- Baseline screenshots: `/private/tmp/oiahoon-uiux-round-13/offline-390x844.png`, `/private/tmp/oiahoon-uiux-round-13/offline-1440x900.png`
+- Final screenshots: `/private/tmp/oiahoon-uiux-round-17-after/`
+- Reviewed route: `/offline/`
+- Viewports: `390x844`, `1440x900`
+
+Findings:
+
+- The offline page was already simple and had no horizontal overflow.
+- On phones, the state block sat a little too deep in the viewport, adding empty waiting space before the actual offline message.
+- The status page should surface the state promptly without becoming a card or feature explanation.
+
+Changes:
+
+- Moved the offline state block slightly upward with a lighter section height and top padding.
+- Tightened action spacing while preserving the reload and home actions.
+- Bumped the app version to `0.0.18`.
+- Added an agent design-system note that status pages should surface state promptly.
+
+Validation plan:
+
+Results:
+
+- Final screenshots: `/private/tmp/oiahoon-uiux-round-17-after/`
+- Mobile offline state top is `263px`; action controls remain fully in the first viewport with `actionsBottom=514px`.
+- Desktop state also moves upward and keeps 2 actions visible.
+- No horizontal overflow or offscreen offenders at `390x844` or `1440x900`.
+- `npm run check:content-health`: passed, 120 posts scanned, 0 errors, 0 warnings.
+- `npm run build`: passed, 189 pages built in 1.45s.
+- `git diff --check`: passed.
+- `npm run check:security`: still reports the same 5 remaining vulnerabilities that require breaking `npm audit fix --force`.
+
 ## Round 16 - 2026-06-23 - Article Archive Index Rhythm
 
 Evidence:

package-lock.json

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

package.json

@@ -40,9 +40,10 @@ import BlogLayout from '../layouts/BlogLayout.astro';
 
 <style>
   .offline-page {
-    min-height: clamp(28rem, 58vh, 42rem);
     display: flex;
-    align-items: center;
+    min-height: clamp(24rem, 52vh, 36rem);
+    align-items: flex-start;
+    padding-top: clamp(4.6rem, 11vh, 7rem);
   }
 
   .offline-state {
@@ -70,7 +71,7 @@ import BlogLayout from '../layouts/BlogLayout.astro';
     flex-wrap: wrap;
     justify-content: center;
     gap: 0.75rem;
-    margin-top: 2.3rem;
+    margin-top: 2rem;
   }
 
   .offline-actions button,