style 調整版面
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
# 站主與助手協作備忘
|
||||
|
||||
由對話整理；**程式真值**仍以 repo 與 `.cursor/rules/*.mdc` 為準。本檔僅記「這次講定的做事方式」，不取代規則檔。
|
||||
|
||||
---
|
||||
|
||||
## 1. 邊界（站主明講）
|
||||
|
||||
- **沒有叫你做的，不要順手做**（含刪註解、順手整理、自訂「以後我都會……」流程）。
|
||||
- **看不懂先問**；你說「執行」再改檔。你說「檢查」就只對照回報，**不擅自改**。
|
||||
- **不要自己訂規則**代替站主（例如自創「只調樣式就保留註解」這類概括）。
|
||||
|
||||
---
|
||||
|
||||
## 2. 參考圖怎麼讀
|
||||
|
||||
- **畫線／粉線**：提醒「這一段要看」，**不是**「整段都要包 span」或「這裡一定要 `mark_b`」。
|
||||
- **實際標記**：對照圖裡**字重、黃標、一般內文**，再對應既有 class（`mark_y`、`mark_b`），自己判斷。
|
||||
- **開發者工具截圖**（勾選／刪除線）：照**屬性開關**改 CSS；沒叫動註解就不要動註解。
|
||||
|
||||
---
|
||||
|
||||
## 3. 首頁 `#mission`（做法，非定稿內容）
|
||||
|
||||
- 第一段：站主若只說調 span，**只**增刪 `<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` 技術細節 |
|
||||
@@ -14,7 +14,7 @@ alwaysApply: true
|
||||
| 誰在看 | 哪一頁／哪塊 | 行為 |
|
||||
|--------|----------------|------|
|
||||
| **站主自己** | 僅 **`extra/site-guide.html`** | 頂欄必須 **`data-portal-nav data-portal-nav-all-open`**。腳本**不**對該頁頂欄套用籌備中；**不**對 `<main class="site-guide-main">` 內任何 `<a href>` 改寫。表上連結**全部要點得進**（由站主在 HTML 維護）。 |
|
||||
| **訪客／大家** | **除上列以外**的每一頁 | 頂欄一律套用 `applyComingSoonToNav`：`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES` 說不能點就不能點。**禁止**在其他頁加 `data-portal-nav-all-open`。 |
|
||||
| **訪客／大家** | **除上列以外**的每一頁 | 頂欄＋**頁內所有 `<a href>`**（分頁列、內文等）依 `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`＝「籌備中」；頂欄氣泡與頁內按鈕後綴同文案。）
|
||||
|
||||
@@ -8,7 +8,7 @@ alwaysApply: true
|
||||
## 速記（每次動導覽或 `portal-nav.js` 前先對齊）
|
||||
|
||||
1. **`extra/site-guide.html`**：站主自用；該頁頂欄 `data-portal-nav-all-open` → **全部連結可點**；主文 `<main class="site-guide-main">` 的 `<a>` **不准**用腳本改成籌備中。
|
||||
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`**（與本檔一起讀）。
|
||||
|
||||
+92
-18
@@ -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;
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M389.12,133.12C389.12,59.72,329.4,0,256,0S122.88,59.72,122.88,133.12c0,75.08,64.532,151.122,112.763,169.718
|
||||
l-7.373,7.352c-2.908,2.929-3.789,7.352-2.212,11.162c1.577,3.83,5.325,6.328,9.462,6.328h13.66
|
||||
c30.577,72.95,14.438,89.743-7.885,112.538c-13.701,14.008-29.225,29.86-36.209,59.167c-1.331,5.489,2.068,11.018,7.578,12.329
|
||||
c0.799,0.205,1.597,0.287,2.376,0.287c4.649,0,8.847-3.154,9.953-7.864c5.693-23.777,18.534-36.905,30.945-49.582
|
||||
c27.955-28.57,44.38-53.494,15.401-126.874h5.141c4.137,0,7.885-2.499,9.462-6.328c1.577-3.809,0.696-8.233-2.212-11.162
|
||||
l-7.373-7.352C324.588,284.242,389.12,208.2,389.12,133.12z M256,61.44c-39.526,0-71.68,32.154-71.68,71.68
|
||||
c0,5.652-4.588,10.24-10.24,10.24c-5.653,0-10.24-4.588-10.24-10.24c0-50.811,41.349-92.16,92.16-92.16
|
||||
c5.652,0,10.24,4.588,10.24,10.24S261.652,61.44,256,61.44z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
+55
-21
@@ -1,20 +1,22 @@
|
||||
(() => {
|
||||
/**
|
||||
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
||||
* 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav data-portal-nav-all-open>` → 不套用籌備中，
|
||||
* 頂欄全可點；`main.site-guide-main` 內 `<a>` 腳本不改寫（站主自用索引）。② 其餘每一頁：一律套用籌備中。
|
||||
* 【totoga2】頂欄結構對齊 `site-guide` 主選單樹：傳奇的轉折（六六歌2）下四入口；`extra/totoga2-*.html` 可點。`fallen/totoga2.html`（檔名 totoga2.html）仍在 COMING_SOON_PAGES＝「圖文好讀版」訪客籌備中；未同意不得從 Set 刪除。
|
||||
* 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav-all-open>` 頂欄全可點；`main.site-guide-main` 內 `<a>` 不改寫。
|
||||
* ② 其餘每一頁：頂欄＋**頁內所有連結**（含 totoga2 分頁列、首頁內文）皆依 COMING_SOON／INDEX 白名單鎖定。
|
||||
* 【totoga2】頂欄四入口：時間軸（`totoga2-copy-timeline.html`）、圖文好讀版（`totoga2.html`）在 Set；電子書／影片可點。未同意不得從 Set 刪除或擅自開放。
|
||||
* 【硬規則】檔案在 repo ≠ 可開放；未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
|
||||
* 文案 NAV_SOON_PHRASES：籌備中連結提示用。
|
||||
* 【未公開】href 改 #、不可點。頂欄與頁內按鈕：NAV_SOON_PHRASES 滑過隨機氣泡（同 ::after）；無障礙 aria「尚無開放」；不加可見「（籌備中）」文字後綴。
|
||||
* 【totoga2 開放】`extra/totoga2-copy-ebook.html`、`extra/totoga2-video.html` 可點；`totoga2-copy-timeline.html` 與 `fallen/totoga2.html` 在 Set 內。
|
||||
* 頂欄勿加 `portal-nav__sub`（站主未要求）；曾用副標見 `.cursor/portal-nav-optimization-backlog.md`。
|
||||
* 完整條文：`.cursor/rules/portal-nav-rules.mdc` + `user-scope-and-nav.mdc`
|
||||
*/
|
||||
const NAV_SOON_PHRASES = ["奇蹟醞釀中", // 頁面準備中，呼應黃色奇蹟的誕生
|
||||
"感動載入中", // 資料讀取中，連結入坑時的悸動
|
||||
"初心校準中", // 結構調整中，呼應 LOGO 的六人設計核心
|
||||
"黃海漫延中", // 視覺填充中，發想自黃色海洋填滿漆黑的過程
|
||||
"傳奇編排中", // 內容整理中，記錄 1999 年榮譽與歷史軌跡
|
||||
"夢想航行中", // 未來規劃中，期待水晶男孩的下一個十年
|
||||
const NAV_SOON_PHRASES = [
|
||||
"奇蹟醞釀中",
|
||||
"感動載入中",
|
||||
"初心校準中",
|
||||
"黃海漫延中",
|
||||
"傳奇編排中",
|
||||
"夢想航行中",
|
||||
];
|
||||
|
||||
/** 主選單欄 `mouseleave` 後延遲關閉（ms），方便移入子選單或右側飛出層，避免略偏就關閉 */
|
||||
@@ -24,7 +26,7 @@
|
||||
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
||||
}
|
||||
|
||||
/** 每次互動重抽，讀者沿導覽滑動時會交錯看到不同字樣 */
|
||||
/** 籌備中連結：滑過／聚焦時隨機一句（氣泡與 title 同步，頂欄與頁內按鈕共用） */
|
||||
function rollSoonLabel(link) {
|
||||
const p = pickSoonPhrase();
|
||||
link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
|
||||
@@ -38,6 +40,7 @@
|
||||
"minister.html",
|
||||
"minister_ge.html",
|
||||
"totoga2.html",
|
||||
"totoga2-copy-timeline.html",
|
||||
"variety.html",
|
||||
]);
|
||||
|
||||
@@ -105,12 +108,14 @@
|
||||
return new Set([...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean));
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至容器內錨點（僅由 `applyComingSoonToNav` 呼叫頂欄） */
|
||||
/** 將籌備中規則套用至容器內錨點（頂欄或整頁；`site-guide` 主文除外） */
|
||||
function applyComingSoonToAnchorElements(container) {
|
||||
if (!container) return;
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
|
||||
container.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.classList.contains("logo")) return;
|
||||
if (link.getAttribute("data-coming-soon") === "true") return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
@@ -125,6 +130,42 @@
|
||||
});
|
||||
}
|
||||
|
||||
/** 訪客頁：頁內連結與頂欄同一套 COMING_SOON；僅 site-guide 的 main.site-guide-main 跳過（頂欄 all-open 不影響此條） */
|
||||
function applyComingSoonSiteWide() {
|
||||
const siteGuideMain = document.querySelector("main.site-guide-main");
|
||||
document.querySelectorAll("a[href]").forEach((link) => {
|
||||
if (link.closest("nav.portal-nav")) return;
|
||||
if (siteGuideMain && siteGuideMain.contains(link)) return;
|
||||
if (link.classList.contains("logo")) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href || href === "#") return;
|
||||
if (/^https?:\/\//i.test(href)) return;
|
||||
|
||||
const pageKey = normalizePageKey(href);
|
||||
if (!pageKey) return;
|
||||
|
||||
const pageKeysSoon = getPageKeysSoon();
|
||||
if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
|
||||
|
||||
markLinkComingSoon(link, href);
|
||||
});
|
||||
}
|
||||
|
||||
function blockNavigation(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function bindComingSoonBlockers() {
|
||||
document.querySelectorAll('a[data-coming-soon="true"]').forEach((link) => {
|
||||
if (link.dataset.portalNavSoonBound === "1") return;
|
||||
link.dataset.portalNavSoonBound = "1";
|
||||
link.addEventListener("click", blockNavigation);
|
||||
link.addEventListener("auxclick", blockNavigation);
|
||||
});
|
||||
}
|
||||
|
||||
/** 將籌備中規則套用至單一導覽列（含頂層 li 樣式） */
|
||||
function applyComingSoonToNav(nav) {
|
||||
applyComingSoonToAnchorElements(nav);
|
||||
@@ -229,15 +270,8 @@
|
||||
}
|
||||
});
|
||||
|
||||
const blockNavigation = (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
document.querySelectorAll('a[data-coming-soon="true"]').forEach((link) => {
|
||||
link.addEventListener("click", blockNavigation);
|
||||
link.addEventListener("auxclick", blockNavigation);
|
||||
});
|
||||
applyComingSoonSiteWide();
|
||||
bindComingSoonBlockers();
|
||||
|
||||
const navs = Array.from(document.querySelectorAll(".portal-nav"));
|
||||
if (!navs.length) return;
|
||||
|
||||
@@ -39,7 +39,10 @@
|
||||
四月那場重逢，不只是一集綜藝，而是塵封十六年的旋律，終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2
|
||||
的每一頁：有驚喜、有拉扯，也有那些當時說不出口的想念。慢慢翻過去吧——我們後來才明白，有些情誼早已超越了表演，只是在節目的鏡頭裡，換了一種方式，陪彼此一起變老。
|
||||
</p>
|
||||
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。若畫面載入較慢，請稍候再試。</p>
|
||||
<div class="ebook-intro-notes fa-before-lead fa-before-lead--balloon">
|
||||
<p class="ebook-intro-note">看看後面飄落的氣球，等等十秒，電子書就會出現囉。</p>
|
||||
<p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <div class="flip-ebook-shell">
|
||||
@@ -100,27 +103,21 @@
|
||||
var sizePage = await pdf.getPage(sizePageIndex);
|
||||
var natural = sizePage.getViewport({ scale: 1 });
|
||||
var shell = document.querySelector('.flip-ebook-shell');
|
||||
var maxW = shell ? shell.clientWidth : Math.min(window.innerWidth, 1200);
|
||||
var pageW = Math.max(320, Math.floor(maxW));
|
||||
var pageH = Math.floor(pageW * (natural.height / natural.width));
|
||||
var maxH = Math.floor(window.innerHeight * 0.72);
|
||||
if (pageH > maxH) {
|
||||
pageH = maxH;
|
||||
pageW = Math.floor(pageH * (natural.width / natural.height));
|
||||
}
|
||||
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
|
||||
|
||||
/* 單頁寬高與 PDF 同比例；外殼可滿欄，書本置中（不拉扁 canvas） */
|
||||
var bookHost = document.getElementById('book-container');
|
||||
if (bookHost) {
|
||||
bookHost.style.width = pageW + 'px';
|
||||
bookHost.style.width = '100%';
|
||||
bookHost.style.maxWidth = '100%';
|
||||
bookHost.style.marginLeft = 'auto';
|
||||
bookHost.style.marginRight = 'auto';
|
||||
bookHost.style.marginLeft = '0';
|
||||
bookHost.style.marginRight = '0';
|
||||
}
|
||||
container.style.width = pageW + 'px';
|
||||
container.style.width = '100%';
|
||||
container.style.maxWidth = '100%';
|
||||
|
||||
var measureEl = bookHost || shell;
|
||||
var pageW = Math.max(320, Math.floor((measureEl && measureEl.clientWidth) || 0));
|
||||
var pageH = Math.floor(pageW * (natural.height / natural.width));
|
||||
var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
|
||||
|
||||
for (var i = 1; i <= pdf.numPages; i++) {
|
||||
var page = await pdf.getPage(i);
|
||||
var viewport = page.getViewport({ scale: renderScale });
|
||||
|
||||
@@ -12,20 +12,10 @@
|
||||
</head>
|
||||
|
||||
<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
|
||||
<header class="map-archive-header">
|
||||
<div class="header-inner">
|
||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">水晶男孩回來啦！</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div id="bilivideo-tabs" class="bilivideo-hub">
|
||||
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
|
||||
<a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
|
||||
<a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
|
||||
@@ -37,7 +27,7 @@
|
||||
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
|
||||
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
|
||||
|
||||
<div class="bilivideo-tabs__shell">
|
||||
<div id="bilivideo-tabs" class="bilivideo-tabs__shell">
|
||||
<!-- tablist 在 DOM 上須先於 iframe，否則 B 站播放器合成層易蓋住下方按鈕文字；畫面順序改由 CSS flex order 控制 -->
|
||||
<nav class="bilivideo-episode-nav" role="tablist" aria-label="節目影片集數">
|
||||
<button type="button" class="btn bilivideo-episode-nav__tab bilivideo-episode-nav__tab--active"
|
||||
@@ -80,7 +70,6 @@
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="ebook-back-link content-container">
|
||||
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
|
||||
|
||||
+9
-11
@@ -62,16 +62,14 @@
|
||||
<div class="mission-row__body">
|
||||
<h2 class="section-title mission-block-title">成立的初衷</h2>
|
||||
<p class="mission-lead">
|
||||
以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 <span
|
||||
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span class="mark_b">小黃們的應援活動</span>。嘗試以水晶男孩為
|
||||
<span class="mark_b">靈感主軸</span>，延伸至
|
||||
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
|
||||
等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
|
||||
class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
|
||||
以推廣 <span class="mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 專業的視覺策展 宣傳成員魅力與小黃們的應援活動。嘗試以水晶男孩為
|
||||
<span class="mark_b">靈感主軸</span>，延伸至 網頁開發、視覺設計與內容企劃 等多重領域，將對偶像的喜愛轉化為 <span
|
||||
class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span class="mark_b">傳奇軌跡</span>，更能見證追星如何激發
|
||||
<span class="mark_b">創作潛能</span>。
|
||||
</p>
|
||||
<div class="slogan-quote slogan-quote--mission">
|
||||
<span class="slogan-quote__inner">我要用這座<span
|
||||
class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
|
||||
<span class="slogan-quote__inner">我要用這個<span
|
||||
class="mark_b">網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
|
||||
class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,10 +144,10 @@
|
||||
<article class="story-node" data-era="2016.05">
|
||||
<h3>從路人到鐵粉：從夢境進現實</h3>
|
||||
|
||||
<p>《無限挑戰》落幕後，原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡，5 月 11
|
||||
日的簽約消息像是一記響亮的耳光，將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點，奇蹟真的在現實生了根。</p>
|
||||
<p>《無限挑戰》落幕後，原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的時光裡，5 月 11
|
||||
日的簽約消息，將所有人從絕望中打醒。從未知的空虛到塵埃落定的感動——原來這不是終點，奇蹟真的在現實生了根。</p>
|
||||
|
||||
<p>四月的重逢是老小黃們守候十六年的淚水；而九月的單獨演唱會，則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡，我們不只愛上了水晶男孩，更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面，但那股新舊交織的生命力，確實為水晶注入了新的靈魂。
|
||||
<p>四月的重逢是老黃們守候十六年的淚水；而九月的單獨演唱會，則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡，我們不只愛上了水晶男孩，更愛上了他們與小黃之間的愛情。雖然遺憾沒能親眼看見六人並肩的畫面，但那股新舊交織的生命力，確實為水晶注入了新的靈魂。
|
||||
</p>
|
||||
|
||||
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台，卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的樣子，我們才明白：原來大家只是換個方式一起變老，這份情誼早已超越了表演。
|
||||
|
||||
Reference in New Issue
Block a user