From 12fa333a02aca683b8099bf52a112d6194ae5f7e Mon Sep 17 00:00:00 2001 From: JekkiNoopy Date: Fri, 15 May 2026 22:32:35 +0800 Subject: [PATCH] =?UTF-8?q?style=20=E8=AA=BF=E6=95=B4=E7=89=88=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cursor/collaboration-notes.md | 45 +++++++++++ .cursor/rules/portal-nav-rules.mdc | 10 ++- .cursor/rules/user-scope-and-nav.mdc | 2 +- assets/css/style.css | 110 ++++++++++++++++++++++----- assets/images/icon/balloon.svg | 47 ++++++++++++ assets/js/portal-nav.js | 76 +++++++++++++----- extra/totoga2-copy-ebook.html | 29 ++++--- extra/totoga2-video.html | 37 ++++----- index.html | 20 +++-- 9 files changed, 283 insertions(+), 93 deletions(-) create mode 100644 .cursor/collaboration-notes.md create mode 100644 assets/images/icon/balloon.svg diff --git a/.cursor/collaboration-notes.md b/.cursor/collaboration-notes.md new file mode 100644 index 0000000..2af0fb7 --- /dev/null +++ b/.cursor/collaboration-notes.md @@ -0,0 +1,45 @@ +# 站主與助手協作備忘 + +由對話整理；**程式真值**仍以 repo 與 `.cursor/rules/*.mdc` 為準。本檔僅記「這次講定的做事方式」，不取代規則檔。 + +--- + +## 1. 邊界（站主明講） + +- **沒有叫你做的，不要順手做**（含刪註解、順手整理、自訂「以後我都會……」流程）。 +- **看不懂先問**；你說「執行」再改檔。你說「檢查」就只對照回報，**不擅自改**。 +- **不要自己訂規則**代替站主（例如自創「只調樣式就保留註解」這類概括）。 + +--- + +## 2. 參考圖怎麼讀 + +- **畫線／粉線**：提醒「這一段要看」，**不是**「整段都要包 span」或「這裡一定要 `mark_b`」。 +- **實際標記**：對照圖裡**字重、黃標、一般內文**，再對應既有 class（`mark_y`、`mark_b`），自己判斷。 +- **開發者工具截圖**（勾選／刪除線）：照**屬性開關**改 CSS；沒叫動註解就不要動註解。 + +--- + +## 3. 首頁 `#mission`（做法，非定稿內容） + +- 第一段：站主若只說調 span，**只**增刪 `` 與既有 class；未要求不改 CSS。實際哪些詞要 `mark_y`／`mark_b` **會變**，以當下 `index.html` 與站主圖為準，**不寫死**在筆記。 +- 第二段金句：未要求時**只改內文**、不改 span 結構。 +- devtools 截圖：照屬性開關改；沒叫動註解就不要動註解。 + +--- + +## 4. 籌備中連結（`portal-nav.js`，若後續對話有改動以檔案為準） + +- 頂欄與頁內按鈕：**`NAV_SOON_PHRASES` 隨機氣泡**（滑過）；無障礙 aria「尚無開放」。 +- 頁內按鈕：**不加**可見「（籌備中）」後綴。 +- `totoga2-copy-timeline.html` 在 `COMING_SOON_PAGES`（時間軸不公開）。 + +--- + +## 5. 相關規則檔 + +| 檔案 | 用途 | +|------|------| +| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍、共用 CSS | +| `.cursor/rules/user-scope-and-nav.mdc` | 導覽開放、錨點刪除 | +| `.cursor/rules/portal-nav-rules.mdc` | `portal-nav.js` 技術細節 | diff --git a/.cursor/rules/portal-nav-rules.mdc b/.cursor/rules/portal-nav-rules.mdc index 167a7de..4df3604 100644 --- a/.cursor/rules/portal-nav-rules.mdc +++ b/.cursor/rules/portal-nav-rules.mdc @@ -14,7 +14,7 @@ alwaysApply: true | 誰在看 | 哪一頁／哪塊 | 行為 | |--------|----------------|------| | **站主自己** | 僅 **`extra/site-guide.html`** | 頂欄必須 **`data-portal-nav data-portal-nav-all-open`**。腳本**不**對該頁頂欄套用籌備中；**不**對 `
` 內任何 `` 改寫。表上連結**全部要點得進**（由站主在 HTML 維護）。 | -| **訪客／大家** | **除上列以外**的每一頁 | 頂欄一律套用 `applyComingSoonToNav`：`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES` 說不能點就不能點。**禁止**在其他頁加 `data-portal-nav-all-open`。 | +| **訪客／大家** | **除上列以外**的每一頁 | 頂欄＋**頁內所有 ``**（分頁列、內文等）依 `COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES` 鎖定；未公開者**一律標示「籌備中」**、不可點進。**禁止**在其他頁加 `data-portal-nav-all-open`。 | **硬規則（違反＝做錯）** @@ -45,6 +45,12 @@ alwaysApply: true --- +## 1.1 未公開＝籌備中（全站一致） + +- **站主沒說對外開放**的頁／錨點：在訪客可見處**不得**留可點的真實 `href`（頂欄、totoga2 分頁列、首頁內文、頁尾 CTA 皆同）。 +- 腳本標記為 `data-coming-soon="true"` 時：提示與頁內按鈕須讓讀者看見 **「籌備中」**（`portal-nav.js` 的 `COMING_SOON_LABEL`），不是改寫成別的隨機句。 +- **唯一例外**：`extra/site-guide.html` 的 `main.site-guide-main` 內連結（站主索引自用）；該頁頂欄 `data-portal-nav-all-open` 僅影響頂欄，**不**豁免主文以外區塊。 + ## 2. 可點 vs「籌備中」：`COMING_SOON_PAGES` 腳本會對導覽裡的連結做 **`applyComingSoonToNav`**： @@ -135,4 +141,4 @@ alwaysApply: true | `docs/CHANGESET-review.md` | 歷次變更檢查清單筆記（非程式真值來源） | | `docs/sql/` | SQL 練習／筆記（`sql_plan.md`、`.sql` 腳本與匯出） | -（導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。） +（籌備中提示：`COMING_SOON_LABEL`＝「籌備中」；頂欄氣泡與頁內按鈕後綴同文案。） diff --git a/.cursor/rules/user-scope-and-nav.mdc b/.cursor/rules/user-scope-and-nav.mdc index 4087f03..8983cde 100644 --- a/.cursor/rules/user-scope-and-nav.mdc +++ b/.cursor/rules/user-scope-and-nav.mdc @@ -8,7 +8,7 @@ alwaysApply: true ## 速記（每次動導覽或 `portal-nav.js` 前先對齊） 1. **`extra/site-guide.html`**：站主自用；該頁頂欄 `data-portal-nav-all-open` → **全部連結可點**；主文 `
` 的 `` **不准**用腳本改成籌備中。 -2. **其他每一頁**：訪客面向 → **`COMING_SOON_PAGES` / `INDEX_NAV_OPEN_HASHES` 怎寫就怎鎖**；不准在其他頁加 `all-open`。 +2. **其他每一頁**：未公開＝**籌備中**（頂欄＋頁內連結皆鎖、須寫出「籌備中」）；依 **`COMING_SOON_PAGES` / `INDEX_NAV_OPEN_HASHES`**；不准在其他頁加 `all-open`。 3. **`totoga2.html`**、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。 4. **沒寫在指令裡的開放／連結／從 Set 移除／刪檔或刪導覽列**：**一律先問**，禁止推論；「刪除」未指明範圍（單檔 vs 頂欄整段 vs 資料夾）＝必須先問。 5. 技術細節與檢查清單：**`portal-nav-rules.mdc`**（與本檔一起讀）。 diff --git a/assets/css/style.css b/assets/css/style.css index 0dde109..ae38092 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -370,13 +370,14 @@ nav a { color: rgba(212, 196, 150, 0.95); } -.portal-nav a[data-coming-soon="true"] { +/* 籌備中：頂欄與頁內 .btn／分頁列等共用隨機氣泡（不加可見「（籌備中）」後綴） */ +a[data-coming-soon="true"] { cursor: default; opacity: 0.82; position: relative; } -.portal-nav a[data-coming-soon="true"]::after { +a[data-coming-soon="true"]::after { content: var(--portal-nav-soon-msg); position: absolute; z-index: 120; @@ -394,7 +395,10 @@ nav a { transition: opacity 0.16s ease; } -.portal-nav>ul>li>a[data-coming-soon="true"]::after { +.portal-nav>ul>li>a[data-coming-soon="true"]::after, +a.btn[data-coming-soon="true"]::after, +.totoga2-split-crossnav a[data-coming-soon="true"]::after, +.ebook-back-link a[data-coming-soon="true"]::after { left: 50%; top: calc(100% + 4px); transform: translateX(-50%); @@ -421,16 +425,22 @@ nav a { color: #5f5f5f; } +a.btn[data-coming-soon="true"], +.totoga2-split-crossnav a[data-coming-soon="true"], +.ebook-back-link a[data-coming-soon="true"] { + pointer-events: auto; +} + @media (hover: hover) { - .portal-nav a[data-coming-soon="true"]:hover::after, - .portal-nav a[data-coming-soon="true"]:focus-visible::after { + a[data-coming-soon="true"]:hover::after, + a[data-coming-soon="true"]:focus-visible::after { opacity: 1; } } @media (hover: none) { - .portal-nav a[data-coming-soon="true"]:active::after { + a[data-coming-soon="true"]:active::after { opacity: 1; transition: opacity 0.08s ease; } @@ -635,9 +645,7 @@ section { } .mission-section .mission-row+.mission-row { - margin-top: 2.75rem; padding-top: 2.75rem; - /* border-top: 1px solid rgba(255, 204, 0, 0.45); */ } .mission-section .mission-row__visual { @@ -843,6 +851,36 @@ section { } } +/* 左側 Font Awesome（::before）；--fa-before-icon、--fa-before-color 可覆寫 */ +.fa-before-lead { + position: relative; + padding-left: 1.75em; + text-align: left; +} + +.fa-before-lead::before { + content: var(--fa-before-icon, "\f111"); + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + left: 0; + top: 0.15em; + font-size: 1.05em; + line-height: 1; + color: var(--fa-before-color, var(--primary, #ffcc00)); +} + +.fa-before-lead.fa-before-lead--balloon::before { + content: ""; + font-family: inherit; + width: 1.15em; + height: 1.15em; + top: 0.1em; + background-color: var(--fa-before-color, var(--primary, #ffcc00)); + -webkit-mask: url('../images/icon/balloon.svg') center / contain no-repeat; + mask: url('../images/icon/balloon.svg') center / contain no-repeat; +} + /* 金句：基底只放結構：視覺請用 --mission / --awakening，兩句互不覆寫 */ .slogan-quote { box-sizing: border-box; @@ -1316,7 +1354,6 @@ footer a .mark_b { } .concert-page .concert-archive-header, -.concert-page .portal-nav, .concert-page .search-section, .concert-page .concert-container, .concert-page footer { @@ -1324,6 +1361,25 @@ footer a .mark_b { z-index: 1; } +/* 演唱會頁：勿與主內容同層 z-index:1（會被後方 DOM 蓋住）；對齊 map-page 黏頂＋較高層 */ +.concert-page .portal-nav { + width: 100%; + margin: 0 0 14px; + padding: 0.8rem 100px; + background-color: var(--black); + border-radius: 0; + box-shadow: none; + overflow: visible; + position: sticky; + top: 0; + z-index: 100; +} + +.concert-page .portal-nav>ul>li:hover, +.concert-page .portal-nav>ul>li:focus-within { + z-index: 105; +} + .map-page .portal-nav { width: 100%; margin: 0 0 14px; @@ -2060,6 +2116,22 @@ body.ebook-ssg2-page .ebook-intro.section p + p { line-height: 1.5; } +body.ebook-ssg2-page .ebook-intro-notes { + max-width: 42rem; + margin: 0 auto 1rem; +} + +body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note { + margin: 0; + font-size: 0.88rem; + color: #777; + line-height: 1.5; +} + +body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note + .ebook-intro-note { + margin-top: 0.35rem; +} + body.ebook-ssg2-page .ebook-main, body.ebook-ssg2-page footer { position: relative; @@ -2198,25 +2270,27 @@ body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect.flip-ebook-aspec max-width: 100%; margin: 0; padding: 0; - display: flex; - justify-content: center; - align-items: flex-start; + display: block; box-sizing: border-box; border-radius: 14px; overflow: hidden; } +body.ebook-ssg2-page.totoga2-ebook-copy-page #book-container.flip-ebook-aspect--pageflip, body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect--pageflip > #my-flipbook { - width: auto; + width: 100%; max-width: 100%; - margin: 0 auto; + margin: 0; overflow: hidden; border-radius: 14px; + box-sizing: border-box; } body.ebook-ssg2-page.totoga2-ebook-copy-page #my-flipbook .stf__parent, body.ebook-ssg2-page.totoga2-ebook-copy-page #my-flipbook .stf__wrapper { + width: 100%; max-width: 100%; + box-sizing: border-box; } body.ebook-ssg2-page.totoga2-ebook-copy-page #my-flipbook .page { @@ -2236,10 +2310,10 @@ body.totoga2-page .totoga2-hub-controls { flex-wrap: wrap; } -body.totoga2-page.totoga2-video-copy-page .map-archive-header { +body.totoga2-page .map-archive-header { height: auto; - min-height: 0; - padding: clamp(1rem, 2.8vw, 1.75rem) 20px clamp(1.1rem, 3vw, 1.9rem); + min-height: clamp(15rem, 42vh, 26rem); + padding: clamp(2rem, 5vh, 3.25rem) 20px; background-size: cover; } @@ -2256,7 +2330,7 @@ body.totoga2-page.totoga2-video-copy-page { } /* 節目影片複本：上／中／下集在播放器外殼內、緊貼 iframe 下方；維持全站 .btn 黃膠囊 */ -body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell { +body.totoga2-page.totoga2-video-copy-page .ebook-main .bilivideo-tabs__shell { max-width: 960px; margin-left: auto; margin-right: auto; diff --git a/assets/images/icon/balloon.svg b/assets/images/icon/balloon.svg new file mode 100644 index 0000000..1046437 --- /dev/null +++ b/assets/images/icon/balloon.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/js/portal-nav.js b/assets/js/portal-nav.js index 1a54a40..2a8a150 100644 --- a/assets/js/portal-nav.js +++ b/assets/js/portal-nav.js @@ -1,20 +1,22 @@ (() => { /** * ── 導覽「尚未開放」連結 ───────────────────────────────────────── - * 【兩個世界】① 僅 `extra/site-guide.html`：`