fix 移除導覽列副標

2026-05-15 18:09:31 +08:00
parent 27e8c5e22e
commit 177fb831a9
12 changed files with 275 additions and 169 deletions
@@ -26,9 +26,12 @@ alwaysApply: true

 - **同一列／並排多欄**：預設 **等高**（例如 flex 同列 `align-items: stretch`、grid 同列對齊高度），除非該次明講要頂對齊或其他非等高編排。
 - **同一層級、同類可重複元件**（例如多張 **CARD**、同一 pattern 的 tile）：預設 **等寬**（同一 breakpoint 下寬度一致），除非明講破格。
- **短字層**（站主慣稱「十字以內」——極短標、標籤、一句內等級，語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**（置中）。
- **超過短字層的標題或內文**：允許自然換行；**置左**對齊。
+- **短字層**（站主慣稱「十字以內」——極短標、標籤、按鈕字、頂欄主標、區塊小標等；語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**。
+- **內文層（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，避免為了對齊去改未點名的全站共用規則。