2.9 KiB
2.9 KiB
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 連結皆為假資料，不要當成真實產品資訊處理。
常用指令
# 本地預覽（推薦，避開 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。內部結構固定順序：<style>內：Tokens (:root與html.dark) → Reset → 各區塊樣式（依 Header → Hero → Features → Steps → Apps → Pipeline → FAQ → Footer 順序排列，與<body>內的<section>順序一致）。<body>內每個<section class="section">以<!-- ============ 區塊名 ============ -->註解分隔，可獨立增刪不影響其他區塊。- 檔末兩個 IIFE：主題切換（
html.darkclass +localStorage('dotlog-theme')+prefers-color-schemefallback）、.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 欄數前先確認。