45 lines
2.9 KiB
Markdown
45 lines
2.9 KiB
Markdown
# 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 欄數前先確認。
|