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

feat 時間軸內容補充~2016(WIP)

Browse Source
This commit is contained in:
jekkinoopy
2026-05-15 00:03:11 +08:00
parent 3032383ced
commit baecd8f247
2 changed files with 145 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+112 -15
View File
@@ -676,6 +676,12 @@ section {
align-items: start;
}
/* 成立的初衷列：左圖 3、右文 7；左欄與右欄垂直置中 */
.mission-section .mission-row--intro {
grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
align-items: center;
}
.mission-section .mission-row+.mission-row {
margin-top: 2.75rem;
padding-top: 2.75rem;
@@ -743,8 +749,8 @@ section {
top: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
align-items: flex-start;
text-align: left;
}
.mission-section .logo-wrapper img {
@@ -780,6 +786,25 @@ section {
min-width: 0;
}
/* 理念列右欄：黃海框寬度上限，避免寬螢幕 16:9 拉得過高 */
.mission-section .mission-row--concept .mission-gif-frame {
width: min(100%, 26rem);
margin-inline: auto;
}
/* 金句放在「成立的初衷」段落下、右欄填空（與左欄 Logo 對齊節奏） */
.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission {
margin: 1.35rem 0 0;
max-width: none;
width: 100%;
box-sizing: border-box;
text-align: left;
}
.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission .slogan-quote__inner {
text-align: left;
}
.mission-section .logo-wrapper .caption,
.mission-section .mission-moment-wrap .caption {
display: flex;
@@ -795,6 +820,31 @@ section {
text-align: left;
}
/* 首頁 intro：圖說直向兩行、置左對齊 */
.mission-section .mission-row--intro .logo-wrapper .caption {
flex-direction: column;
align-items: flex-start;
align-self: stretch;
justify-content: flex-start;
text-align: left;
gap: 0.3rem;
}
.mission-section .mission-row--intro .logo-wrapper .caption .caption__line {
display: block;
width: 100%;
}
.mission-section .mission-row--intro .logo-wrapper .caption .caption__line--title {
font-weight: 700;
color: #5a5a5a;
}
/* 第二行：左縮排約一字／「i」寬，與上行「↑」後正文對齊 */
.mission-section .mission-row--intro .logo-wrapper .caption > .caption__line:not(.caption__line--title) {
margin-left: 1ch;
}
.mission-section .logo-wrapper .arrow-icon,
.mission-section .mission-moment-wrap .arrow-icon {
flex-shrink: 0;
@@ -972,6 +1022,11 @@ a {
overflow: hidden;
}
/* 首頁時間軸：外凸氣泡（與頂欄籌備中同系）勿被裁切 */
#timeline.story-archive {
overflow: visible;
}
/* 備註：移除主軸上方獨立鑽石後，將主軸上下邊界微調 4px，保留你要的留白節奏 */
.merged-storyline {
position: relative;
@@ -1117,6 +1172,49 @@ a {
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 16px rgba(230, 184, 0, 0.42);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
cursor: default;
box-sizing: border-box;
}
/* 同頂欄 .portal-submenu a[data-coming-soon]::after 氣泡（文案固定為「傳奇書寫中」） */
.merged-storyline .timeline-ebook-cta::after {
content: "傳奇書寫中";
position: absolute;
z-index: 120;
white-space: nowrap;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #6a4818;
background: #fff9e6;
padding: 5px 11px;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease;
left: 100%;
right: auto;
top: 50%;
bottom: auto;
margin-left: 10px;
transform: translateY(-50%);
}
@media (hover: hover) {
.merged-storyline .timeline-ebook-cta:hover::after,
.merged-storyline .timeline-ebook-cta:focus-visible::after {
opacity: 1;
}
}
@media (hover: none) {
.merged-storyline .timeline-ebook-cta:active::after {
opacity: 1;
transition: opacity 0.08s ease;
}
}
.merged-storyline .timeline-ebook-cta:hover {
@@ -1171,31 +1269,30 @@ a {
margin: 0 0 10px;
}
/* 時間軸內文：外站連結（例：Disney+ 劇集） */
/* 時間軸內文：外站補充連結（配角語境，不搶主敘事視覺） */
.merged-storyline .story-external-inline {
display: inline-flex;
align-items: center;
gap: 0.35em;
font-weight: 700;
color: var(--dark-yellow);
text-decoration: underline;
text-decoration-color: currentColor;
text-underline-offset: 0.22em;
text-decoration-thickness: 2px;
text-underline-position: from-font;
gap: 0.1em;
margin-inline-end: 0.2em;
font-weight: 600;
color: #6a5d48;
text-decoration: none;
border-bottom: none;
padding-bottom: 0;
}
.merged-storyline .story-external-inline:hover,
.merged-storyline .story-external-inline:focus-visible {
color: var(--primary);
text-decoration-thickness: 2px;
color: var(--dark-yellow);
}
.merged-storyline .story-external-inline i {
font-size: 0.78em;
opacity: 0.88;
font-size: 0.72em;
opacity: 0.65;
line-height: 1;
flex-shrink: 0;
align-self: center;
}
@media (max-width: 900px) {
index.html
+33 -15
View File
@@ -50,23 +50,28 @@
<div class="mission-row__visual">
<div class="logo-wrapper">
<img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↑</span>
設計語彙：六角、黃海與初心
</span>
<div class="caption">
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
aria-hidden="true">↑</span>設計概念：</span>
<span class="caption__line">六角形水晶、黃色海洋與我們的初心</span>
</div>
</div>
</div>
<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>，延伸至
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>。
</p>
<div class="slogan-quote slogan-quote--mission">
<span class="slogan-quote__inner">我要用這座<span
class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</div>
</div>
@@ -98,10 +103,6 @@
</div>
</div>
<div class="slogan-quote slogan-quote--mission">
<span class="slogan-quote__inner">我要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
</div>
</section>
<section id="timeline" class="story-archive">
@@ -132,13 +133,30 @@
</p>
</article>
<article class="story-node story-node--ebook-ssg2" data-era="2016">
<h3>傳奇回歸：重逢的感動合體</h3>
<p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">
<h3>感動合體：那一晚，我們找回了完整</h3>
<p>塵封十六年的時光被溫柔拂去，跨越六千多天的等待，黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起，那幅曾被凍結在 2000
年的畫面終於再次「溶解」並重合。那一晚，淚水證明了奇蹟真的存在，我們終於找回了那份久違的完整，以為故事從此能圓滿續寫。</p>
<span class="timeline-ebook-cta" aria-label="傳奇書寫中，連結暫停">
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
</a>
</span>
</article>
<!-- 2016 年後續發展與情感轉折區塊 -->
<article class="story-node" data-era="2016">
<h3>延續與錯位：在現實中守候</h3>
<p>當《無限挑戰》的燈光熄滅，原本以為這場跨越十六年的重逢僅是曇花一現的夢境，但隨後五位成員與 YG
簽約的消息，正式宣告了傳奇的歸來。九月演唱會上，新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆，那種心意相通的悸動，讓我們知道這道光從未真正熄滅過。</p>
<p>而志溶雖然未參與合體，卻在十二月演唱會落幕當天，透過《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起變老，一起寫下新的篇章。
</p>
### 餘溫與新生：從奇蹟走向恆久
<p>當《無限挑戰》的燈光熄滅，原以為那場重逢只是十六年一次的曇花一現。同年五月，五位成員與 YG
簽約的消息，讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢；而九月的個人演唱會，則是一場關於愛情的傳承。無數新粉絲透過黃色海洋，目睹了偶像與歌迷間那種超越時空的生死契闊，雖然志溶未能站上舞台成了這場盛宴唯一的遺憾，但那種「水晶男孩」與「黃飯」共生的生命力，卻從那一刻起，重新注入了新的靈魂。
</p>
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚，志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別，而是他換了一種最真實的形式，在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的模樣，我們才懂得：水晶男孩的定義早已超越了表演，而是彼此約好在不同的時空裡，也要一起變老，一起寫下永不終結的篇章。
</p>
</article>
<article class="story-node" data-era="2019">
<h3>體制調整與穩定</h3>
<p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>