jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 專案設計規範

Browse Source
This commit is contained in:
jekkinoopy
2026-05-15 03:19:07 +08:00
parent 2d1497c045
commit 2cd645baa4
6 changed files with 338 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/index.css
+41 -1
View File
@@ -155,7 +155,47 @@ section.archive-block p:last-child {
/* ---------- 首頁 home-page：閱讀寬度與字級（弱化對 vw 的依賴） ---------- */
/* 用 px 鎖上限，避免 72rem 隨根字級／無障礙字級變大（例如實測出 ~1390px） */
/* Hero 大標：維持全站水晶黃字色，用深色描邊＋暈光與淺黃底圖區隔 */
.home-page header .hero h1 {
color: var(--primary);
font-weight: 900;
letter-spacing: 0.05em;
text-shadow:
0 0 0.04em rgba(42, 32, 0, 0.55),
0 0.03em 0 rgba(26, 20, 0, 0.42),
0 0.08em 0.12em rgba(0, 0, 0, 0.28),
0 -0.02em 0.06em rgba(255, 255, 255, 0.35),
0 0 0.35em rgba(255, 204, 0, 0.85),
0 0 0.85em rgba(255, 180, 0, 0.4);
}
/* 副標：結構與 concert 相同（subtitle-wrap + 兩側黃線）；字級大於演唱會頁以利閱讀 */
.home-page header .hero .subtitle-wrap {
margin: 0.65rem auto 1.05rem;
padding: 0 0.75rem;
max-width: min(40rem, 94vw);
}
.home-page header .hero .subtitle-wrap::before,
.home-page header .hero .subtitle-wrap::after {
height: 3px;
max-width: min(72px, 14vw);
background-color: #ffcc00;
opacity: 1;
}
.home-page header .hero .subtitle-wrap .sub-title {
margin: 0 min(1.6rem, 4vw);
font-size: clamp(1.12rem, 2.4vw + 0.72rem, 1.52rem);
font-weight: 700;
letter-spacing: 0.22em;
line-height: 1.5;
color: #e6e6e6;
text-shadow:
0 0 0.35em rgba(0, 0, 0, 0.45),
0 0.06em 0.18em rgba(0, 0, 0, 0.35);
}
.home-page .container {
max-width: min(1200px, calc(100% - 2rem));
width: 100%;
assets/css/style.css
+37 -49
View File
@@ -2170,7 +2170,7 @@ body.totoga2-page.totoga2-video-copy-page .ebook-intro.section {
margin-bottom: 1.5rem;
}
body.totoga2-page.totoga2-video-copy-page .ebook-intro.section .bilivideo-tabs {
body.totoga2-page.totoga2-video-copy-page .ebook-intro.section .bilivideo-tabs__shell {
margin-top: 0.5rem;
}
@@ -2178,10 +2178,43 @@ body.totoga2-page.totoga2-video-copy-page {
overflow-x: hidden;
}
/* 節目影片複本：三集＝同一殼內分頁；非使用中 panel 不占版面（避免被 flex display 蓋掉 hidden） */
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs {
/* 節目影片複本：頂列為上／中／下集（獨立 .btn）；播放器外殼內僅 iframe */
body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell {
max-width: 960px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links {
text-align: center;
font-size: 0.9rem;
margin: 0.35rem auto 0.85rem;
color: #555;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a {
color: #4a3d12;
font-weight: 650;
text-decoration: underline;
text-underline-offset: 0.2em;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a:hover {
color: #221a06;
}
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep {
margin: 0 0.4rem;
opacity: 0.55;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .btn {
opacity: 0.9;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
opacity: 1;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
@@ -2192,51 +2225,6 @@ body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
background: #070707;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab {
margin: 0;
padding: 0.75rem 0.5rem;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
cursor: pointer;
font: inherit;
font-weight: 700;
font-size: clamp(0.88rem, 2.1vw, 1rem);
text-align: center;
color: #e8e4dc;
background: #151515;
letter-spacing: 0.12em;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:last-child {
border-right: none;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:hover {
background: #1f1f1f;
color: #fff;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:focus-visible {
outline: 2px solid #ffcc00;
outline-offset: -2px;
position: relative;
z-index: 1;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab--active {
background: linear-gradient(180deg, #ffe566 0%, #ffcc00 100%);
color: #1a1406;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panels {
overflow: hidden;
background: #000;
docs/totoga2-copy-video-notes.md
+1
View File
@@ -6,3 +6,4 @@
- 中集、下集 iframe 使用 `data-src`，第一次切到該分頁時由頁內 script 寫入 `src`；改連結時請改 `data-src`（或已寫入後的 `src`）。
- 目前中／下集預設與上集同一 BV，僅作占位；正式替換時改各分頁 iframe 的 `data-src` 即可。
- 此頁 `body.totoga2-video-copy-page` 會覆寫 `.map-archive-header` 的整屏高度（`100vh`／`100dvh`），避免與導覽、影片疊加後出現整頁直向捲軸；其他全屏 banner 頁不受影響。
- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；**紀實電子書、時間軸＋長文、複本總覽** 為其下文字連結，仍各為獨立 HTML；`totoga2-copy-ebook.html` 等頁仍保留原四鈕列。
extra/grok.html
+1 -1
View File
@@ -17,7 +17,7 @@
<canvas id="particles"></canvas>
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
<p>六顆永恆的水晶 · 左右命運的傳奇</p>
<a href="#story" class="btn">探索他們的故事</a>
</div>
</header>
extra/totoga2-copy-video.html
+18 -19
View File
@@ -24,27 +24,28 @@
<canvas id="particles"></canvas>
<nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁">
<a href="totoga2-copy-video.html" class="btn" aria-current="page">節目影片</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋長文</a>
<a href="totoga2%20copy.html" class="btn">複本總覽</a>
<div id="bilivideo-tabs" class="bilivideo-hub">
<nav class="ebook-back-link content-container totoga2-split-crossnav bilivideo-episode-nav" role="tablist" aria-label="節目影片集數">
<button type="button" class="btn bilivideo-episode-nav__tab bilivideo-episode-nav__tab--active" role="tab" id="bilivideo-tab-1"
aria-controls="bilivideo-panel-1" aria-selected="true">上集</button>
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-2"
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
<button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-3"
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
</nav>
<p class="totoga2-copy-sibling-links content-container" aria-label="六六歌2 其他複本入口">
<a href="totoga2-copy-ebook.html">紀實電子書</a>
<span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span>
<a href="totoga2-copy-timeline.html">時間軸＋長文</a>
<span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span>
<a href="totoga2%20copy.html">複本總覽</a>
</p>
<div class="content-container ebook-main">
<section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
<div class="bilivideo-tabs" id="bilivideo-tabs">
<div class="bilivideo-tabs__shell">
<div class="bilivideo-tabs__list" role="tablist" aria-label="節目影片集數">
<button type="button" class="bilivideo-tabs__tab bilivideo-tabs__tab--active" role="tab" id="bilivideo-tab-1"
aria-controls="bilivideo-panel-1" aria-selected="true">上集</button>
<button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-2"
aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
<button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-3"
aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
</div>
<div class="bilivideo-tabs__panels">
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1" aria-labelledby="bilivideo-tab-1">
<div class="bilivideo-frame">
@@ -67,14 +68,12 @@
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<p class="ebook-back-link content-container">
<a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
<a href="totoga2-copy-ebook.html" class="btn">紀實電子書（另頁）</a>
<a href="totoga2-copy-timeline.html" class="btn">時間軸＋八章（另頁）</a>
</p>
<footer>
@@ -98,8 +97,8 @@
var on = i === index;
tab.setAttribute("aria-selected", on ? "true" : "false");
tab.tabIndex = on ? 0 : -1;
if (on) tab.classList.add("bilivideo-tabs__tab--active");
else tab.classList.remove("bilivideo-tabs__tab--active");
if (on) tab.classList.add("bilivideo-episode-nav__tab--active");
else tab.classList.remove("bilivideo-episode-nav__tab--active");
panels[i].hidden = !on;
if (on) {
var iframe = panels[i].querySelector("iframe[data-src]");
index.html
+3 -1
View File
@@ -16,7 +16,9 @@
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
<div class="subtitle-wrap">
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
</div>
<a href="#start" class="btn">從這裡開始淪陷</a>
</div>
</header>