5.3 KiB
5.3 KiB
內頁頂部 header／header-inner 差異整理
站主自用；整理日：2026-05。程式真值以 repo 為準，改檔前請再對一次檔案。
重點
- 全 repo 沒有任何
.header-inner的 CSS；差異在外層header的 class 與內層.main-title、.subtitle-wrap、.sub-title。 - 標準內頁 HTML 幾乎相同；視覺不統一多半是 CSS 疊加 或 少數頁根本沒用同一套 class。
一、HTML 結構對照
| 類型 | 頁面 | 結構 |
|---|---|---|
| 標準 | extra/totoga2-copy-ebook.html、extra/totoga2-copy-timeline.html、concert/concert.html、yellow-note/map.html、member/member.html、albums/albums.html、variety/variety.html、fallen/totoga2.html、extra/site-guide.html、extra/sunghoon.html、yellow-note/minister.html、extra/minister_ge.html、extra/totoga2 copy.html 等 |
header.map-archive-header → motion.header-inner → h1.main-title + motion.subtitle-wrap → span.sub-title |
| 首頁 | index.html |
header#origin → motion.hero（無 header-inner） |
| 無 header | extra/totoga2-video.html |
無頂部 banner 區塊 |
| 另一套 | extra/grok.html |
裸 <header> → motion.hero |
| 另一套 | variety/NJTW/NJTW5.html |
header.main-header（無 header-inner） |
二、CSS 來源（誰在管頂部）
1. 多數內頁共用 — assets/css/style.css
| 選擇器 | 內容摘要 |
|---|---|
header.map-archive-header |
height: auto；min-height: clamp(14rem, 38vh, 24rem)；background-position: center 78%；background-size: cover；padding: clamp(1.75rem, 4vh, 2.75rem) 20px |
.map-archive-header .main-title |
clamp(2rem, 4.5vw, 3.2rem)、黃字、字距 6px |
.map-archive-header .subtitle-wrap |
margin-top: 20px |
.map-archive-header .subtitle-wrap::before/::after |
黃線 3px、max-width: 56px |
.map-archive-header .sub-title |
0.92rem、#d4d4d4、letter-spacing: 4px |
@media (max-width: 920px) .map-archive-header .main-title |
letter-spacing: 4px |
沒有 .header-inner { … }。
2. 首頁專用（不套在內頁 map-archive-header）
| 檔案 | 選擇器 | 與內頁差異 |
|---|---|---|
style.css |
header#origin |
100vh、背景 center、background-size: 108% |
style.css |
.hero、.hero h1、.hero p |
首頁 hero 字級 |
index.css |
.home-page header .hero .subtitle-wrap 等 |
副標更大、描邊、字距不同 |
3. 容易造成「這頁長不一樣」的例外
| 頁面 | 額外 CSS | 說明 |
|---|---|---|
concert/concert.html |
assets/css/concert.css（載入順序：先 concert，後 style） |
檔內有裸 .main-title、.subtitle-wrap、.sub-title（無 .map-archive-header 前綴）→ 會影響整頁同名 class；header 內仍以 .map-archive-header .… 為準（優先權較高） |
extra/minister_ge.html |
多載 index.css，body.home-page |
只改 .home-page header .hero，不直接改 map-archive-header |
| 全站 | style.css 裸 .subtitle-wrap、.sub-title（約 577 行起） |
區塊內非 header 的副標也會用到；header 內由 .map-archive-header .… 覆寫 |
concert.css 裸選擇器摘要（與 style.css 內頁 header 不同）：
.main-title { font-size: 3.5rem; letter-spacing: 8px; … }
.subtitle-wrap { margin-top: 25px; … }
.subtitle-wrap::before/::after { max-width: 60px; height: 3px; … }
.sub-title { font-size: 1rem; letter-spacing: 6px; margin: 0 25px; … }
4. 完全不是 map-archive-header 的頁
| 頁面 | CSS | 說明 |
|---|---|---|
variety/NJTW/NJTW5.html |
variety/NJTW/njtw5.css |
body.njtw5-page header.main-header：自訂背景圖、aspect-ratio: 1280/706、全寬 breakout，無 氣球 header.jpg |
extra/grok.html |
僅 style.css |
裸 header + .hero |
5. 平板 — assets/css/tablet.css（≤1180px）
.map-archive-header .main-title（與全站內頁相同）
三、為什麼會覺得 header-inner 不統一
.header-inner零樣式，只是包裝 div。- 演唱會多
concert.css裸 class，整頁標題語彙混在一起。 - 首頁 / NJTW5 / grok / 影片頁不是同一套 header 系統。
- 全站裸
.subtitle-wrap與 header 專用規則並存。
四、明天可決定的方向（改前請說「執行」）
- 標準是否 = 電子書 — 現行
header.map-archive-header+style.css約 1547 行起？ concert.css裸標題 — 改為只作用在主內容，或刪除改吃全站？- 是否新增
.header-inner共用樣式？ - class 改名 — 全站內頁是否要改掉
map-archive-header（需站主指定新名稱；禁止 PowerShell 批次改 HTML，須 UTF-8 安全）？ - grok / NJTW5 / 影片頁 — 併入標準 header，或維持特例？
五、相關檔案路徑
| 用途 | 路徑 |
|---|---|
| 內頁 banner 主規則 | assets/css/style.css（header.map-archive-header 區塊） |
| 首頁 hero | assets/css/style.css（header#origin）、assets/css/index.css |
| 演唱會頁額外 | assets/css/concert.css |
| NJTW5 頂部 | variety/NJTW/njtw5.css |
| 協作規則 | .cursor/rules/agent-must-ask.mdc |