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 07:44:22 +08:00
parent 2cd645baa4
commit 58da2d56e4
2 changed files with 49 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+24 -11
View File
@@ -793,7 +793,7 @@ section {
} }
/* 金句放在「成立的初衷」段落下、右欄填空（與左欄 Logo 對齊節奏） */ /* 金句放在「成立的初衷」段落下、右欄填空（與左欄 Logo 對齊節奏） */
.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission { .mission-section .mission-row--intro .mission-row__body>.slogan-quote--mission {
margin: 1.35rem 0 0; margin: 1.35rem 0 0;
max-width: none; max-width: none;
width: 100%; width: 100%;
@@ -801,7 +801,7 @@ section {
text-align: left; text-align: left;
} }
.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission .slogan-quote__inner { .mission-section .mission-row--intro .mission-row__body>.slogan-quote--mission .slogan-quote__inner {
text-align: left; text-align: left;
} }
@@ -841,7 +841,7 @@ section {
} }
/* 第二行：左縮排約一字／「i」寬，與上行「↑」後正文對齊 */ /* 第二行：左縮排約一字／「i」寬，與上行「↑」後正文對齊 */
.mission-section .mission-row--intro .logo-wrapper .caption > .caption__line:not(.caption__line--title) { .mission-section .mission-row--intro .logo-wrapper .caption>.caption__line:not(.caption__line--title) {
margin-left: 1ch; margin-left: 1ch;
} }
@@ -1581,7 +1581,7 @@ footer a .mark_b {
.map-archive-header .main-title { .map-archive-header .main-title {
font-size: clamp(2rem, 4.5vw, 3.2rem); font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 900; font-weight: 900;
color: var(--yellow); color: var(--yellow, var(--primary));
letter-spacing: 6px; letter-spacing: 6px;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
@@ -2178,7 +2178,7 @@ body.totoga2-page.totoga2-video-copy-page {
overflow-x: hidden; overflow-x: hidden;
} }
/* 節目影片複本：頂列為上／中／下集（獨立 .btn）；播放器外殼內僅 iframe */ /* 節目影片複本：上／中／下集在播放器外殼內、緊貼 iframe 上方；維持全站 .btn 黃膠囊 */
body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell { body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell {
max-width: 960px; max-width: 960px;
margin-left: auto; margin-left: auto;
@@ -2188,7 +2188,7 @@ body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell
body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links { body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links {
text-align: center; text-align: center;
font-size: 0.9rem; font-size: 0.9rem;
margin: 0.35rem auto 0.85rem; margin: 0.5rem auto 0.85rem;
color: #555; color: #555;
} }
@@ -2208,13 +2208,26 @@ body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep {
opacity: 0.55; opacity: 0.55;
} }
body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .btn { body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav {
opacity: 0.9; display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
padding: 12px 14px 14px;
margin: 0;
background: #0a0a0a;
border-bottom: 1px solid rgba(255, 204, 0, 0.28);
} }
body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .bilivideo-episode-nav__tab--active { body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .btn {
margin: 0;
opacity: 0.92;
}
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
opacity: 1; opacity: 1;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.32);
} }
body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell { body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
@@ -2629,7 +2642,7 @@ body.site-guide-page .site-guide-group--nav-hero {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
} }
body.site-guide-page .site-guide-group--nav-hero > .section-title { body.site-guide-page .site-guide-group--nav-hero>.section-title {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
extra/totoga2-copy-video.html
+25 -16
View File
@@ -25,14 +25,6 @@
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<div id="bilivideo-tabs" class="bilivideo-hub"> <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 其他複本入口"> <p class="totoga2-copy-sibling-links content-container" aria-label="六六歌2 其他複本入口">
<a href="totoga2-copy-ebook.html">紀實電子書</a> <a href="totoga2-copy-ebook.html">紀實電子書</a>
<span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span> <span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span>
@@ -46,24 +38,41 @@
<h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2> <h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
<div class="bilivideo-tabs__shell"> <div class="bilivideo-tabs__shell">
<nav class="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>
<div class="bilivideo-tabs__panels"> <div class="bilivideo-tabs__panels">
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1" aria-labelledby="bilivideo-tab-1"> <div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1"
aria-labelledby="bilivideo-tab-1">
<div class="bilivideo-frame"> <div class="bilivideo-frame">
<iframe title="無限挑戰 六六歌2 上集" <iframe title="無限挑戰 六六歌2 上集"
src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1" src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> scrolling="no" border="0" frameborder="no" framespacing="0"
allowfullscreen="true"></iframe>
</div> </div>
</div> </div>
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-2" aria-labelledby="bilivideo-tab-2" hidden> <div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-2"
aria-labelledby="bilivideo-tab-2" hidden>
<div class="bilivideo-frame"> <div class="bilivideo-frame">
<iframe title="無限挑戰 六六歌2 中集" data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2" <iframe title="無限挑戰 六六歌2 中集"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2"
scrolling="no" border="0" frameborder="no" framespacing="0"
allowfullscreen="true"></iframe>
</div> </div>
</div> </div>
<div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-3" aria-labelledby="bilivideo-tab-3" hidden> <div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-3"
aria-labelledby="bilivideo-tab-3" hidden>
<div class="bilivideo-frame"> <div class="bilivideo-frame">
<iframe title="無限挑戰 六六歌2 下集" data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3" <iframe title="無限挑戰 六六歌2 下集"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3"
scrolling="no" border="0" frameborder="no" framespacing="0"
allowfullscreen="true"></iframe>
</div> </div>
</div> </div>
</div> </div>