refactor: 健檢規範、拆出設計預設、修 git type
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
---
|
||||
description: 必問再改、Git commit／禁 push、UTF-8、內頁 header、對圖與 devtools
|
||||
description: 必問再改、UTF-8、內頁 header、對圖與 devtools
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 必問再改與 Git（站主訂）
|
||||
# 必問再改（站主訂）
|
||||
|
||||
## 改檔
|
||||
|
||||
@@ -11,14 +11,10 @@ alwaysApply: true
|
||||
2. **只改被點名的那一頁／區塊**；未寫到的檔不開、不刪、不重構。
|
||||
3. **class 全站換名**：先問確切字串。內頁 banner 用 **`inner-page-header`**（禁止改回 `map-archive-header` 等）。**禁止** PowerShell 批次改 `.html`（須 UTF-8 安全，如逐檔 `StrReplace`）。
|
||||
4. **頂欄文案**：禁止擅自加括號、副標（如「傳奇的轉折（六六歌2）」）；改 `portal-nav.js` 前對站主原句。
|
||||
5. **devtools**：勾選／數值照抄；補 devtools 沒有的值須標「這是我補的」，等站主說執行再寫入。
|
||||
5. **devtools（Chrome DevTools Styles 面板）**：勾選／數值照抄；補 devtools 沒有的值須標「這是我補的」，等站主說執行再寫入。
|
||||
6. **參考圖**：粉線＝看這段，不是整段包 span。`mark_y`／`mark_b` 對照圖裡實際字重。
|
||||
7. **首頁 `#mission`**：只調 span 時只動 `<span>`；金句未要求時只改內文。沒叫動註解就不動註解。
|
||||
|
||||
## 內頁 header
|
||||
|
||||
- 內頁：**`header.inner-page-header`**。首頁 Hero：**`header#origin`**。樣式以站主在電子書頁調過的為準；要套他頁須站主說執行。
|
||||
|
||||
## 回覆
|
||||
|
||||
- 站主要短句時：先答做沒做、為什麼壞，勿長篇道歉後又擅自改一輪。
|
||||
|
||||
@@ -20,28 +20,12 @@ alwaysApply: true
|
||||
|
||||
- 若需求可能影響多檔（導覽、首頁、共用 CSS）：**先問**「是否只改 A，還是 B/C 也要一起？」再改。
|
||||
|
||||
## 站主版面與元件預設（設計大原則）
|
||||
|
||||
以下為全站／新區塊的**預設假設**，不必每個區域重複交代；若該次需求明講例外再打破。
|
||||
|
||||
- **同一列／並排多欄**：預設 **等高**（例如 flex 同列 `align-items: stretch`、grid 同列對齊高度），除非該次明講要頂對齊或其他非等高編排。
|
||||
- **同一層級、同類可重複元件**（例如多張 **CARD**、同一 pattern 的 tile）：預設 **等寬**（同一 breakpoint 下寬度一致），除非明講破格。
|
||||
- **短字層**（站主慣稱「十字以內」——極短標、標籤、按鈕字、頂欄主標、區塊小標等；語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**。
|
||||
- **交付前必檢・置中**（每次改版面／新區塊／表單標題後**自動確認**，勿等站主提醒）：
|
||||
- 短字層、區塊主標、表單大標、按鈕列、圖示＋標題並排：父層 `text-align: center` 或 `display: flex` + `justify-content: center` + `align-items: center`（必要時 `margin-inline: auto`）。
|
||||
- `::before`／`::after` 裝飾圖（含 SVG 背景）與文字同一行時：標題用 **`inline-flex` + `align-items: center` + `justify-content: center`**，勿只靠 `inline-block` + `vertical-align` 猜視覺置中。
|
||||
- 內文層 `p` 維持置左；僅容器可 `max-width` + `margin-inline: auto` 置中區塊本身。
|
||||
- 窄螢幕若標題過長：先縮字級或 `letter-spacing`，仍無法單行再與站主確認是否允許換行。
|
||||
- **內文層（body）**（超過短字層——`<p>` 整段導語、說明、列表前引言）：允許自然換行；**置左**對齊。規則敘述用「內文／body 層」，**不要**用某個 `*-lead`、`*-intro` 等 class 名當成這一層的定義。
|
||||
- **怎麼判斷**：看**實際字數與語意**（是否明顯超過約十字、是否為段落內文），**不是**看 class 字串。HTML 裡的 `<body class="某頁">` 是**頁面作用範圍**，與「內文層」是兩件事，勿混為一談。
|
||||
- **CSS 怎麼寫**：短字層 → 標題／按鈕等既有元件規則（多為置中）。內文層 → 在該頁 **`body.頁面類名` 底下**對**段落 `p`**（或該區 `section` 內 `p`）設 `text-align: left`；欄寬可 `max-width` + `margin-inline: auto`，但字仍左對齊。**禁止**在規則檔或新頁面把內文層綁死在自創 class 名上當唯一依據。
|
||||
- **捲軸**：一般區塊 **不要**出現內嵌捲軸（避免預設 `overflow: auto/scroll` 把版面變成「盒子裡再拖條」）；**只有**站主對該區曾**明講**要可捲動或強烈規定的例外才做捲動容器。
|
||||
- **`img`／`canvas`**：一律 **等比例縮放**（`object-fit: contain` 或 `max-width: 100%` + `height: auto`）；**禁止**為了「撐滿」使用 `object-fit: fill` 或讓容器寬高比與圖面比例不一致卻強制 `width/height: 100%` 拉扁。滿欄時外殼可 100% 寬，圖本體置中、維持比例。
|
||||
|
||||
實作時仍以「只改被點名範圍」為上；若要拉一套新 grid／卡片列，優先在本區父層加 class，避免為了對齊去改未點名的全站共用規則。
|
||||
|
||||
## 文件與規則檔
|
||||
|
||||
- **不要**主動新增或長篇修改 `README`、`docs/*.md`，除非站主明講。
|
||||
- **約定只寫在** `developer-rules/rules/*.mdc`（**合併進既有檔**，勿再新增散落 `*-notes.md`／目錄索引）。禁止放在 `docs/` 或站主日常會開的目錄。
|
||||
- 動導覽／籌備中／`site-guide`：**只讀** `portal-nav-rules.mdc`。
|
||||
|
||||
## 回覆風格
|
||||
|
||||
- 站主要短句時：先答做沒做、為什麼壞，勿長篇道歉後又擅自改一輪。
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
description: 全站版面與元件視覺預設：等高等寬、短字層置中、img 比例、捲軸禁則。
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 站主版面與元件預設（設計大原則）
|
||||
|
||||
以下為全站／新區塊的**預設假設**，不必每個區域重複交代；若該次需求明講例外再打破。
|
||||
|
||||
- **同一列／並排多欄**：預設 **等高**（例如 flex 同列 `align-items: stretch`、grid 同列對齊高度），除非該次明講要頂對齊或其他非等高編排。
|
||||
- **同一層級、同類可重複元件**（例如多張 **CARD**、同一 pattern 的 tile）：預設 **等寬**（同一 breakpoint 下寬度一致），除非明講破格。
|
||||
- **短字層**（站主慣稱「十字以內」——極短標、標籤、按鈕字、頂欄主標、區塊小標等；語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**。
|
||||
- **交付前必檢・置中**（每次改版面／新區塊／表單標題後**自動確認**，勿等站主提醒）：
|
||||
- 短字層、區塊主標、表單大標、按鈕列、圖示＋標題並排：父層 `text-align: center` 或 `display: flex` + `justify-content: center` + `align-items: center`（必要時 `margin-inline: auto`）。
|
||||
- `::before`／`::after` 裝飾圖（含 SVG 背景）與文字同一行時：標題用 **`inline-flex` + `align-items: center` + `justify-content: center`**，勿只靠 `inline-block` + `vertical-align` 猜視覺置中。
|
||||
- 內文層 `p` 維持置左；僅容器可 `max-width` + `margin-inline: auto` 置中區塊本身。
|
||||
- 窄螢幕若標題過長：先縮字級或 `letter-spacing`，仍無法單行再與站主確認是否允許換行。
|
||||
- **內文層（body）**（超過短字層——`<p>` 整段導語、說明、列表前引言）：允許自然換行；**置左**對齊。規則敘述用「內文／body 層」，**不要**用某個 `*-lead`、`*-intro` 等 class 名當成這一層的定義。
|
||||
- **怎麼判斷**：看**實際字數與語意**（是否明顯超過約十字、是否為段落內文），**不是**看 class 字串。HTML 裡的 `<body class="某頁">` 是**頁面作用範圍**，與「內文層」是兩件事，勿混為一談。
|
||||
- **CSS 怎麼寫**：短字層 → 標題／按鈕等既有元件規則（多為置中）。內文層 → 在該頁 **`body.頁面類名` 底下**對**段落 `p`**（或該區 `section` 內 `p`）設 `text-align: left`；欄寬可 `max-width` + `margin-inline: auto`，但字仍左對齊。**禁止**在規則檔或新頁面把內文層綁死在自創 class 名上當唯一依據。
|
||||
- **捲軸**：一般區塊 **不要**出現內嵌捲軸（避免預設 `overflow: auto/scroll` 把版面變成「盒子裡再拖條」）；**只有**站主對該區曾**明講**要可捲動或強烈規定的例外才做捲動容器。
|
||||
- **`img`／`canvas`**：**禁止** `object-fit: fill` 或強制 `width/height: 100%` 拉扁。預設用 `object-fit: contain`（或 `max-width: 100%` + `height: auto`），圖本體置中、維持比例；若為裁切式全版背景圖，可改用 `object-fit: cover` + `aspect-ratio`，須明講。
|
||||
|
||||
實作時仍以「只改被點名範圍」為上；若要拉一套新 grid／卡片列，優先在本區父層加 class，避免為了對齊去改未點名的全站共用規則。
|
||||
@@ -23,7 +23,7 @@ git commit -m "type: 重點"
|
||||
|
||||
| 項目 | 約定 |
|
||||
|------|------|
|
||||
| type | `feat`｜`fix`｜`style` 三選一 |
|
||||
| type | `feat`｜`fix`｜`style`｜`refactor`｜`chore` 五選一 |
|
||||
| 重點 | **15 字以內**（標點計入） |
|
||||
| add | **一律 `git add .`**，禁止只 add 單檔 |
|
||||
|
||||
|
||||
@@ -117,7 +117,7 @@ alwaysApply: true
|
||||
|
||||
---
|
||||
|
||||
## 8. 頁面錨點刪除（`某頁.html#id`）
|
||||
## 7. 頁面錨點刪除（`某頁.html#id`）
|
||||
|
||||
指該 HTML 裡 **`id="…"` 的那一區**／`<section>`，不是刪整檔、不是刪資料夾、不是刪頂欄整段「全員發瘋」，也不是擅自改 `COMING_SOON_PAGES`（除非原句一併交代）。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user