From 177fb831a9b6e2eab211d660930919b76d1024ad Mon Sep 17 00:00:00 2001 From: JekkiNoopy Date: Fri, 15 May 2026 18:09:31 +0800 Subject: [PATCH] =?UTF-8?q?fix=20=E7=A7=BB=E9=99=A4=E5=B0=8E=E8=A6=BD?= =?UTF-8?q?=E5=88=97=E5=89=AF=E6=A8=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cursor/portal-nav-optimization-backlog.md | 40 +++++ .cursor/rules/ai-change-boundaries.mdc | 7 +- .cursor/session-notes-2026-05-13.md | 2 +- .cursor/site-voice-notes.md | 2 +- assets/css/index.css | 5 +- assets/css/style.css | 124 +++++++------- assets/js/portal-nav.js | 45 ++--- extra/site-guide.html | 187 +++++++++++++-------- extra/totoga2 copy.html | 8 +- extra/totoga2-copy-ebook.html | 12 +- extra/totoga2-copy-timeline.html | 6 +- extra/totoga2-video.html | 6 +- 12 files changed, 275 insertions(+), 169 deletions(-) create mode 100644 .cursor/portal-nav-optimization-backlog.md diff --git a/.cursor/portal-nav-optimization-backlog.md b/.cursor/portal-nav-optimization-backlog.md new file mode 100644 index 0000000..80721f7 --- /dev/null +++ b/.cursor/portal-nav-optimization-backlog.md @@ -0,0 +1,40 @@ +# 頂欄導覽 · 優化清單（助手用，不對讀者顯示） + +站主未要求上線；以下為自 `portal-nav.js` 移除的 `portal-nav__sub` 文案備份。 +**程式真值**：`assets/js/portal-nav.js` 的 `buildPortalNavInnerHTML`（僅主標 `portal-nav__label` 或純文字）。 +日後若站主明講要加回副標，只依本檔與當次指示改，勿自行推論。 + +--- + +## 已移除副標（對照主標） + +| 主標（`portal-nav__label`） | 原 `portal-nav__sub` | +|---------------------------|----------------------| +| 淪陷瞬間 | Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡 | +| 初心與軌跡 | Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡 | +| 傳奇的轉折（六六歌2） | 四種入口：時間軸、電子書、網頁版、影片 | +| 影片 | 無限挑戰 · 六六歌2 嵌入影片單頁 | +| 電子書 | 紀實電子書內容獨立成頁 | +| 時間軸 | 時間軸與紀實八章長文單頁 | +| 圖文好讀版 | 單頁整合：影片／電子書／長文與八章錨點 | +| 全員發瘋 | 原來我是個正常人啊！團綜與失控現場 | +| 隊長帶弟弟 | 控場與隊內互動 | +| 各自暴走 | 獨立內頁籌備中 | +| 新西遊記 | 成員介紹 · MEMBER GUIDE | +| 完整的六顆 | 六顆水晶 · 黑白分流 | +| 現場的震撼 | SECHSKIES CONCERT ARCHIVE | +| 集結水晶 | 團體演唱會 | +| 隊長的氣場 | 個人見面會與演唱會 | +| 黃色留聲機 | YELLOW PHONOGRAPH | +| 啟動新篇章 | 重啟後作品與單曲 | +| 輝煌全盛期 | 1997–1999 年表 | +| Yellow Note | 台灣行程表、成員行程篩選、搜尋與地圖主體 | +| 視覺進化論 | 從好奇到全端：自述與時間軸式章節 | +| 聖地巡禮 | 台灣行程表、成員行程篩選、搜尋與地圖 | + +--- + +## 約定（給助手） + +- **禁止**在未經站主明講時，於 `buildPortalNavInnerHTML` 加回 `` 或類似第二行說明。 +- 頂欄結構／開放與否仍以 `portal-nav-rules.mdc`、`user-scope-and-nav.mdc` 為準。 diff --git a/.cursor/rules/ai-change-boundaries.mdc b/.cursor/rules/ai-change-boundaries.mdc index ce31c04..307fca1 100644 --- a/.cursor/rules/ai-change-boundaries.mdc +++ b/.cursor/rules/ai-change-boundaries.mdc @@ -26,9 +26,12 @@ alwaysApply: true - **同一列／並排多欄**：預設 **等高**（例如 flex 同列 `align-items: stretch`、grid 同列對齊高度），除非該次明講要頂對齊或其他非等高編排。 - **同一層級、同類可重複元件**（例如多張 **CARD**、同一 pattern 的 tile）：預設 **等寬**（同一 breakpoint 下寬度一致），除非明講破格。 -- **短字層**（站主慣稱「十字以內」——極短標、標籤、一句內等級，語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**（置中）。 -- **超過短字層的標題或內文**：允許自然換行；**置左**對齊。 +- **短字層**（站主慣稱「十字以內」——極短標、標籤、按鈕字、頂欄主標、區塊小標等；語意上不要硬拆成兩行）：盡量 **單行、不換行**；**水平置中**。 +- **內文層（body）**（超過短字層——`

` 整段導語、說明、列表前引言）：允許自然換行；**置左**對齊。規則敘述用「內文／body 層」，**不要**用某個 `*-lead`、`*-intro` 等 class 名當成這一層的定義。 +- **怎麼判斷**：看**實際字數與語意**（是否明顯超過約十字、是否為段落內文），**不是**看 class 字串。HTML 裡的 `` 是**頁面作用範圍**，與「內文層」是兩件事，勿混為一談。 +- **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，避免為了對齊去改未點名的全站共用規則。 diff --git a/.cursor/session-notes-2026-05-13.md b/.cursor/session-notes-2026-05-13.md index bf006be..3892e40 100644 --- a/.cursor/session-notes-2026-05-13.md +++ b/.cursor/session-notes-2026-05-13.md @@ -28,7 +28,7 @@ - 同一列：除非特別說，**等高**。 - 同屬性（如 CARD）：**等寬**。 -- 「十字以內」等級的短標：**盡量不換行、置中**；超過則**可換行、置左**。 +- 「十字以內」等級的短標：**盡量不換行、置中**；超過則**內文層（body）可換行、置左**（規則與 CSS 依 `body.頁面類名 … p`，不依 `*-intro-lead` class 名）。 - **不要**隨便出現內嵌捲軸；除非站主對該區有強烈／明確規定。 細節與實作注意已寫在 `ai-change-boundaries.mdc` 該節。 diff --git a/.cursor/site-voice-notes.md b/.cursor/site-voice-notes.md index 9850901..2b91e7a 100644 --- a/.cursor/site-voice-notes.md +++ b/.cursor/site-voice-notes.md @@ -33,5 +33,5 @@ ## 其他 -- 六六歌2 分頁（site-guide）：影片 → 電子書 → 時間軸 → 網頁版（TOTOGA2） +- 六六歌2 分頁（site-guide／頂欄／四鈕列）：時間軸 → 電子書 → 圖文好讀版→ 影片 - 規則：`.cursor/rules/site-voice.mdc` diff --git a/assets/css/index.css b/assets/css/index.css index dd8d7fa..5a3b00b 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -148,8 +148,9 @@ section.archive-block p:last-child { margin: 8px 6px; } -.archive-intro-lead { - text-align: center; +/* albums 等：archive-intro 內段落為內文層（非短字層） */ +section.archive-intro p { + text-align: left; margin-top: 8px; } diff --git a/assets/css/style.css b/assets/css/style.css index 25480c9..0dde109 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -135,11 +135,9 @@ nav a { .portal-nav>ul>li>a { display: inline-flex; - flex-direction: column; align-items: center; justify-content: center; text-align: center; - gap: 2px; line-height: 1.15; text-decoration: none; color: var(--primary); @@ -152,17 +150,6 @@ nav a { font-weight: 700; } -.portal-nav__sub { - display: block; - max-width: 12.5rem; - font-size: 0.55rem; - font-weight: 500; - letter-spacing: 0.04em; - line-height: 1.25; - opacity: 0.82; - white-space: normal; -} - .portal-nav .portal-submenu { display: none; position: absolute; @@ -183,9 +170,7 @@ nav a { .portal-nav .portal-submenu a { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; + align-items: center; padding: 8px 10px; border-radius: 8px; color: #5f5f5f; @@ -194,15 +179,6 @@ nav a { letter-spacing: 0; } -.portal-nav .portal-submenu .portal-nav__sub { - font-size: 0.62rem; - font-weight: 500; - letter-spacing: 0.03em; - line-height: 1.3; - opacity: 0.78; - max-width: 18rem; -} - .portal-nav .portal-submenu a:hover { background: #fff8df; color: #3a300a; @@ -223,9 +199,7 @@ nav a { .portal-nav .portal-submenu .portal-nav__subgroup-head { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; + align-items: center; padding: 6px 26px 8px 10px; position: relative; color: #4a4a4a; @@ -246,10 +220,6 @@ nav a { pointer-events: none; } -.portal-nav .portal-submenu .portal-nav__subgroup-head .portal-nav__sub { - font-weight: 500; -} - .portal-nav .portal-nav__subgroup>.portal-submenu-nested { list-style: none; margin: 0; @@ -291,9 +261,7 @@ nav a { .portal-nav .portal-submenu .portal-nav__subgroup-head--nested { display: flex; - flex-direction: column; - align-items: flex-start; - gap: 2px; + align-items: center; padding: 8px 24px 8px 10px; position: relative; font-size: 0.82rem; @@ -384,23 +352,12 @@ nav a { color: #ffffff; } -.portal-nav>ul>li>a.nav-current .portal-nav__sub { - color: rgba(255, 255, 255, 0.82); - opacity: 1; -} - .portal-nav .portal-submenu a.nav-current, .portal-nav .portal-submenu-nested a.nav-current { color: #3a300a; background: rgba(255, 204, 0, 0.22); } -.portal-nav .portal-submenu a.nav-current .portal-nav__sub, -.portal-nav .portal-submenu-nested a.nav-current .portal-nav__sub { - color: #5a4810; - opacity: 0.92; -} - .portal-nav .portal-submenu a.nav-current:hover, .portal-nav .portal-submenu-nested a.nav-current:hover { background: rgba(255, 204, 0, 0.32); @@ -1471,12 +1428,6 @@ footer a .mark_b { background: rgba(255, 204, 0, 0.22); } -.map-page .portal-nav .portal-submenu a.nav-current .portal-nav__sub, -.map-page .portal-nav .portal-submenu-nested a.nav-current .portal-nav__sub { - color: #5a4810; - opacity: 0.92; -} - .map-page .portal-nav .portal-submenu .portal-nav__subgroup-head { align-items: flex-end; text-align: right; @@ -2093,18 +2044,17 @@ footer a .mark_b { } /* 六六歌2 電子書頁 */ -body.ebook-ssg2-page .ebook-intro-lead { - text-align: center; +/* 內文層：依 body 頁類 + 段落 p，不依 *-intro-lead class */ +body.ebook-ssg2-page .ebook-main p { + text-align: left; max-width: 42rem; - margin: 0 auto 1.5rem; + margin: 0 auto 1.25rem; color: #4a4a4a; line-height: 1.7; } -body.ebook-ssg2-page .ebook-intro-note { - text-align: center; - max-width: 42rem; - margin: -0.75rem auto 1.25rem; +body.ebook-ssg2-page .ebook-intro.section p + p { + margin-top: -0.5rem; font-size: 0.88rem; color: #777; line-height: 1.5; @@ -2207,10 +2157,21 @@ body.ebook-ssg2-page #my-flipbook .page { background: #fff; } +/* 電子書／totoga2：canvas、img 一律等比例縮放，禁止 fill 拉扁 */ +body.ebook-ssg2-page img, +body.ebook-ssg2-page canvas, +body.totoga2-page .chronicle-reader img, +body.totoga2-page .flip-ebook-shell img { + max-width: 100%; + height: auto; + object-fit: contain; +} + body.ebook-ssg2-page #my-flipbook .page canvas { display: block; width: 100%; height: 100%; + max-height: 100%; object-fit: contain; } @@ -2219,6 +2180,51 @@ body.ebook-ssg2-page .ebook-back-link { margin: 0 0 2.5rem; } +/* extra/totoga2-copy-ebook：翻書區與上方 section 同欄寬、無額外外距；#my-flipbook 滿寬＋圓角裁切 */ +body.ebook-ssg2-page.totoga2-ebook-copy-page .ebook-intro.section { + margin-bottom: 1.25rem; +} + +body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-shell { + width: 100%; + max-width: none; + margin: 0 auto 2rem; + border-radius: 14px; + overflow: hidden; +} + +body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect.flip-ebook-aspect--pageflip { + width: 100%; + max-width: 100%; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: flex-start; + box-sizing: border-box; + border-radius: 14px; + overflow: hidden; +} + +body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect--pageflip > #my-flipbook { + width: auto; + max-width: 100%; + margin: 0 auto; + overflow: hidden; + border-radius: 14px; +} + +body.ebook-ssg2-page.totoga2-ebook-copy-page #my-flipbook .stf__parent, +body.ebook-ssg2-page.totoga2-ebook-copy-page #my-flipbook .stf__wrapper { + max-width: 100%; +} + +body.ebook-ssg2-page.totoga2-ebook-copy-page #my-flipbook .page { + box-sizing: border-box; + overflow: hidden; + border-radius: 0; +} + /* totoga2 整合／複本頁：頂部結構與其他 map-archive-header 內頁一致（僅 main-title + subtitle-wrap） */ body.totoga2-page .totoga2-hub-controls { diff --git a/assets/js/portal-nav.js b/assets/js/portal-nav.js index cf1d0c5..1a54a40 100644 --- a/assets/js/portal-nav.js +++ b/assets/js/portal-nav.js @@ -3,9 +3,10 @@ * ── 導覽「尚未開放」連結 ───────────────────────────────────────── * 【兩個世界】① 僅 `extra/site-guide.html`：`