style 調整版面
This commit is contained in:
+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;
|
||||
|
||||
Reference in New Issue
Block a user