Initial commit

2026-04-21 13:49:12 +08:00
commit 272d0973bd
6 changed files with 1495 additions and 0 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,44 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 專案性質
+
+單檔靜態 HTML landing page 示範專案（虛構產品 `dotlog`），用於演繹 `DESIGN.md` 的設計規範。**無 build 系統、無 npm 依賴、無測試框架、非 git 倉庫**。文案、統計數字、GitHub 連結皆為假資料，不要當成真實產品資訊處理。
+
+## 常用指令
+
+```bash
+# 本地預覽（推薦，避開 file:// 的字體 CORS）
+python3 -m http.server 8000
+# 或直接開檔
+open index.html
+```
+
+重新產生 `screenshot-light.png` / `screenshot-dark.png`：README 有完整 Playwright (Python) 腳本。**關鍵陷阱**：全頁截圖前必須手動把所有 `.fade-up` 元素加上 `visible` class，否則下半部區塊會因 IntersectionObserver 尚未觸發而呈空白。
+
+## 架構
+
+只有三個檔案要理解：
+
+- **`DESIGN.md`** — 設計權威來源。色彩 token、字體、間距、圓角、各區塊版面、組件樣式（Button/Card/Badge/Code）、動態規範、可及性要求都在這裡。**改 `index.html` 樣式前先查這份**；設計決策衝突時以 `DESIGN.md` 為準，除非使用者明確要求偏離。
+- **`index.html`** — 全部 HTML + CSS + JS 都在單檔內，無外部 `.css` / `.js`。內部結構固定順序：
+  1. `<style>` 內：Tokens (`:root` 與 `html.dark`) → Reset → 各區塊樣式（依 Header → Hero → Features → Steps → Apps → Pipeline → FAQ → Footer 順序排列，與 `<body>` 內的 `<section>` 順序一致）。
+  2. `<body>` 內每個 `<section class="section">` 以 `<!-- ============ 區塊名 ============ -->` 註解分隔，可獨立增刪不影響其他區塊。
+  3. 檔末兩個 IIFE：主題切換（`html.dark` class + `localStorage('dotlog-theme')` + `prefers-color-scheme` fallback）、`.fade-up` 的 IntersectionObserver。
+- **`README.md`** — 使用者文件，列出區塊清單、響應式斷點、可及性重點、客製化步驟。
+
+### 主題切換
+
+深色主題靠 `html.dark` class 驅動，所有 CSS variable 在 `html.dark { ... }` 區塊重新定義。加新樣式時若用到顏色，**一律透過 CSS variable**（`var(--foreground)` 等），不要寫死 hex，否則深色模式會壞。
+
+### 字體
+
+`<head>` 只載入 Space Grotesk + JetBrains Mono（Google Fonts CDN）。`DESIGN.md` 第 3 節列的 Merriweather 在本實作中**刻意省略**，不要自行補回。
+
+## 編輯守則
+
+- 改品牌色：同時更新 `:root` 與 `html.dark` 的 `--primary`（兩處），`DESIGN.md` 第 2 節也要同步。
+- 主色 `#00bb7f` 只用於 CTA、logo、關鍵圖示、hover — 不做大面積填充（`DESIGN.md` §2.4）。
+- 卡片靠 `1px solid var(--border)` 劃界，無預設陰影，hover 才浮起（`DESIGN.md` §6.2）。
+- 響應式斷點對照 README「響應式斷點」表與 `DESIGN.md` §9；動 grid 欄數前先確認。