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

style archive.html.lyrics.html

Browse Source
This commit is contained in:
jekkinoopy
2026-05-13 13:17:34 +08:00
parent 67cc80fa7f
commit d994f841e5
15 changed files with 1706 additions and 1506 deletions
Download Patch File Download Diff File Expand all files Collapse all files
archive.html
+52 -35
View File
@@ -73,58 +73,75 @@
</p>
</section>
<div id="new" class="archive-block">
<section id="new" class="archive-block">
<h2 class="section-title">啟動新篇章</h2>
<p>回歸後的數位單曲與專輯，是現在進行式的聲紋紀錄；耳機調大聲一格，就能把「新篇章」接住。</p>
<p><a href="lyrics.html">聽見歌詞細節</a></p>
</div>
<div id="classic" class="archive-block">
<h2 class="section-title">輝煌全盛期</h2>
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
<p><a href="classic.html">打開輝煌全盛期整理</a></p>
</div>
<section id="albums">
<h2 class="section-title">歷年作品 (精選)</h2>
<table>
<p><a href="lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
<table class="archive-discography">
<thead>
<tr>
<th>年份</th>
<th>專輯/作品</th>
<th>主打歌</th>
<th scope="col">封面</th>
<th scope="col">年份</th>
<th scope="col">專輯／作品</th>
<th scope="col">主打歌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1997</td>
<td>學園別曲</td>
<td>學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</td>
</tr>
<tr>
<td>1998</td>
<td>Road Fighter</td>
<td>Road Fighter / Couple</td>
</tr>
<tr>
<td>1999</td>
<td>Com'Back</td>
<td>Com'Back</td>
</tr>
<tr>
<td class="album-cover-cell">
<img src="./img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
</td>
<td>2016</td>
<td><a href="lyrics.html">數位單曲</a></td>
<td><a href="lyrics.html">Three Words (三個詞)</a></td>
</tr>
<tr>
<td class="album-cover-cell">
<img src="./img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
</td>
<td>2017</td>
<td>ANOTHER LIGHT</td>
<td>Something Special / Smile</td>
<td><a href="concert.html#stage-now">ANOTHER LIGHT</a></td>
<td><a href="concert.html#stage-now">Something Special / Smile</a></td>
</tr>
<tr>
<td class="album-cover-cell">
<img src="./img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
</td>
<td>2020</td>
<td>ALL FOR YOU</td>
<td>ALL FOR YOU</td>
<td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
<td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
</tr>
</tbody>
</table>
</section>
<section id="classic" class="archive-block">
<h2 class="section-title">輝煌全盛期</h2>
<p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
<p><a href="classic.html#classic-albums">打開輝煌全盛期整理</a></p>
<table class="archive-discography">
<thead>
<tr>
<th scope="col">年份</th>
<th scope="col">專輯／作品</th>
<th scope="col">主打歌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1997</td>
<td><a href="classic.html#classic-albums">學園別曲</a></td>
<td><a href="classic.html#classic-albums">學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</a></td>
</tr>
<tr>
<td>1998</td>
<td><a href="classic.html#classic-albums">Road Fighter</a></td>
<td><a href="classic.html#classic-albums">Road Fighter / Couple</a></td>
</tr>
<tr>
<td>1999</td>
<td><a href="classic.html#classic-albums">Com'Back</a></td>
<td><a href="classic.html#classic-albums">Com'Back</a></td>
</tr>
</tbody>
</table>
img/albums/1997.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 808 KiB

img/albums/1998.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 808 KiB

img/albums/1999.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 808 KiB

img/albums/2016.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

img/albums/2017.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

img/albums/20172.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

img/albums/2020.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

img/logo1titles-1024x107.png → img/logo.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

index.css
+34 -2
View File
@@ -90,8 +90,40 @@
padding-bottom: 0;
}
#archive .archive-block {
margin: 1.75rem 0;
/* archive.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
section.archive-block p {
color: #4a4a4a;
line-height: 1.7;
margin: 0 0 0.75rem;
}
section.archive-block p:last-child {
margin-bottom: 0;
}
/* archive.html：精選作品表（含封面欄） */
.archive-discography {
width: 100%;
margin-top: 1.25rem;
}
.archive-discography .album-cover-cell {
width: 96px;
vertical-align: middle;
text-align: center;
padding: 10px 8px;
}
.archive-discography .album-cover-cell img {
width: 76px;
height: 76px;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(255, 204, 0, 0.28);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
display: block;
margin: 0 auto;
background: #fff;
}
.landing-intro {
index.html
+40 -14
View File
@@ -67,14 +67,6 @@
<canvas id="particles"></canvas>
<div class="container">
<section id="mission">
<h2 class="section-title">成立的初衷</h2>
<div class="intro-text">
<p class="intro-text">
這裡先端出舞台上與綜藝裡最刺眼、也最誠實的魅力，接住每一次「怎麼又帥又好笑」的心跳；你越往深處挖，越容易聽懂那場 <span class="highlight">仍在續寫的傳奇</span>。
</p>
</div>
</section>
<section id="start">
<h2 class="section-title">好奇的開端</h2>
@@ -84,13 +76,45 @@
</p>
<p class="core-description">
水晶男孩（SECHSKIES）的魔力在於：即便錯過他們第一次站上大型舞台的年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span
class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
</p>
<p class="call-to-action">
經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。加入我們，一起把手上的應援色舉高一點。
</p>
</div>
</section>
<section id="mission" class="mission-section">
<h2 class="section-title">成立的初衷</h2>
<div class="mission-layout">
<div class="mission-content">
<p>
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span class="highlight">專業的視覺策展</span> 宣傳成員魅力與 <span class="highlight">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="highlight">靈感主軸</span>，延伸至 <span class="highlight">網頁開發、視覺設計與內容企劃</span> 等多重領域，將對偶像的喜愛轉化為 <span class="highlight">實質的專業養分</span>。在這裡，你不只能探索他們的 <span class="highlight">傳奇軌跡</span>，更能見證追星如何激發 <span class="highlight">創作潛能</span>。
</p>
<div class="logo-concept">
<h3>LOGO 設計理念</h3>
<p>
<span class="highlight">「晶」</span>字發想來自<span class="highlight">六角形的水晶</span>，為了強調水晶男孩<span class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字 6</span>，搭配演唱會必備的<span class="highlight">手燈圖案</span>，代表粉絲和水晶<span class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片<span class="highlight">黃色海洋</span>。以此片段為契機，設計成<span class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
</p>
</div>
</div>
<div class="mission-visual">
<div class="logo-wrapper">
<img src="./img/logo.png" alt="SECHSKIES Logo Concept">
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↓</span>
設計語彙：六角、黃海與初心
</span>
</div>
</div>
</div>
<div class="quote-box">
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span class="highlight">守護的熱情</span>，讓現在的自己變得比追星前的自己還要厲害。」
</div>
</section>
<section id="timeline" class="story-archive">
<h2 class="section-title">跨時空軌跡</h2>
@@ -127,7 +151,7 @@
</div>
</section>
<section id="story">
<section id="story" class="story-archive">
<h2 class="section-title">傳奇的轉折</h2>
<div class="subtitle-wrap">
<span class="sub-title">PLOT TWIST</span>
@@ -137,26 +161,28 @@
<a href="chronicle.html">開啟完整紀實篇章</a>
</p>
<article id="special" class="story-node">
<div class="merged-storyline">
<article id="special" class="story-node" data-era="六六歌">
<h3>六六歌實錄</h3>
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
<p><a href="chronicle.html#ssg2">對照這一段幕後敘事</a></p>
</article>
<article id="negotiate" class="story-node">
<article id="negotiate" class="story-node" data-era="交涉">
<h3>命運的交涉</h3>
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
<p><a href="chronicle.html#negotiate">讀交涉與對話肌理</a></p>
</article>
<article id="complete" class="story-node">
<article id="complete" class="story-node" data-era="歸位">
<h3>拼圖的歸位</h3>
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
<p><a href="chronicle.html#gather">從「召集」段開始補這條線</a></p>
</article>
<article id="past" class="story-node">
<article id="past" class="story-node" data-era="最初">
<h3>巔峰與雨天</h3>
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
<p><a href="chronicle.html#sechskies-profile">讀這條脈絡的起點</a></p>
</article>
</div>
</section>
</div>
lyrics.css
+130 -48
View File
@@ -1,73 +1,155 @@
:root {
/* 定義一個基礎大小，這就是你的「倍率開關」 */
font-size: 26px;
}
/* 歌詞頁：載入於 style.css 之後，並以 .lyrics-page 提高權重，避免被全站 table / body 洗版 */
body.lyrics-page {
--lyrics-bg: #2a2a2a;
--lyrics-paper: #faf6e8;
--lyrics-accent: #f5dfa8;
--lyrics-muted: #c9c2a8;
.nanum-pen-script-regular {
font-family: "Nanum Pen Script", cursive;
font-weight: 400;
font-style: normal;
background-color: var(--lyrics-bg) !important;
color: #fff !important;
margin: 0 !important;
padding: clamp(1rem, 4vw, 2.5rem) !important;
min-height: 100dvh;
line-height: 1.55;
overflow-x: hidden;
font-size: clamp(18px, 2.8vw, 26px);
}
body {
margin: 10%;
background-color: #333333;
color: #ffffff;
body.lyrics-page h1 {
color: var(--lyrics-accent);
font-size: clamp(1.75rem, 4vw, 2.5rem);
text-align: center;
margin: 0 0 1.25rem;
letter-spacing: 0.02em;
}
h1 {
color: #FAEAB1;
font-size: 2.5rem;
/* 想要這區特別大一點就設 2.5 */
body.lyrics-page .lyrics-layout {
max-width: 1100px;
margin: 0 auto;
}
.main-left {
width: 50%;
body.lyrics-page .lyrics-main-table {
width: 100%;
max-width: 1100px;
margin: 0 auto;
border-collapse: separate;
border-spacing: clamp(0.75rem, 2.5vw, 1.75rem);
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
body.lyrics-page .lyrics-main-table > tbody > tr > td {
padding: 0.35rem 0.5rem !important;
border: none !important;
border-bottom: none !important;
text-align: left !important;
color: inherit !important;
vertical-align: top !important;
background: transparent !important;
}
body.lyrics-page .main-left {
width: 48%;
max-width: 480px;
vertical-align: top;
gap: 1rem;
/* padding-right: 40px; */
}
.songInfo {
color: #FAEAB1;
body.lyrics-page .main-left iframe {
display: block;
width: 100%;
border: 0;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
body.lyrics-page .songInfo {
color: var(--lyrics-accent);
display: grid;
grid-template-columns: max-content 1fr;
gap: -10px;
align-items: center;
gap: 0.5rem;
/* 原本的 8px 大約是 0.5rem */
font-size: 1.2rem;
/* 想要這區特別大一點就設 1.2 */
gap: 0.4rem 0.75rem;
align-items: baseline;
font-size: 1rem;
margin-top: 1rem;
}
/* .songInfo dd{
margin: 5px 0;
} */
p {
body.lyrics-page .songInfo dt {
font-weight: 700;
color: var(--lyrics-muted);
}
body.lyrics-page .songInfo dd {
margin: 0;
}
body.lyrics-page .lyrics-main-table p {
color: #fff;
line-height: 1.5;
gap: 0.5rem;
/* 原本的 8px 大約是 0.5rem */
font-size: 1.5rem;
/* 想要這區特別大一點就設 1.2 */
margin: auto;
line-height: 1.55;
font-size: clamp(1rem, 2.2vw, 1.35rem);
margin: 0;
max-width: 52ch;
}
table {
border-spacing: 40px;
/* 左右間距 20px，上下 0 */
border-collapse: separate;
/* 必須是 separate，spacing 才會生效 */
body.lyrics-page a {
color: #b8e6ff;
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* width: 100%; */
/* border:#fff solid 1px; */
a {
color: #FFF;
text-decoration: none;
body.lyrics-page a:hover {
color: #fff;
}
.contact i {
font-size: 0.6em;
margin-right: 0.3rem;
body.lyrics-page .contact {
color: var(--lyrics-paper);
font-size: 0.95rem;
line-height: 1.65;
max-width: 42ch;
}
body.lyrics-page .contact h3 {
color: var(--lyrics-accent);
font-size: 1.15rem;
margin: 0.35rem 0 0.5rem;
font-family: "Nanum Pen Script", cursive;
}
body.lyrics-page .contact img {
max-height: 36px;
width: auto;
display: block;
margin-bottom: 0.35rem;
}
body.lyrics-page .contact i {
font-size: 0.75em;
margin-right: 0.35rem;
color: var(--lyrics-accent);
}
@media (max-width: 820px) {
body.lyrics-page .lyrics-main-table,
body.lyrics-page .lyrics-main-table tbody,
body.lyrics-page .lyrics-main-table tr,
body.lyrics-page .lyrics-main-table td {
display: block;
width: 100% !important;
}
body.lyrics-page .lyrics-main-table {
border-spacing: 0;
}
body.lyrics-page .main-left {
max-width: none;
margin-bottom: 1.5rem;
}
body.lyrics-page .lyrics-main-table > tbody > tr > td + td {
margin-top: 0.5rem;
}
}
lyrics.html
+25 -98
View File
@@ -1,107 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>세 단어 (THREE WORDS) — SECHSKIES</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="lyrics.css">
<link rel="stylesheet" href="style.css">
<style>
:root {
/* 定義一個基礎大小，這就是你的「倍率開關」 */
font-size: 26px;
}
.nanum-pen-script-regular {
font-family: "Nanum Pen Script", cursive;
font-weight: 400;
font-style: normal;
}
body {
margin: 10%;
background-color: #333333;
color: #ffffff;
}
h1 {
color: #FAEAB1;
font-size: 2.5rem;
/* 想要這區特別大一點就設 2.5 */
}
.main-left {
width: 50%;
vertical-align: top;
gap: 1rem;
/* padding-right: 40px; */
}
.songInfo {
color: #FAEAB1;
display: grid;
grid-template-columns: max-content 1fr;
gap: -10px;
align-items: center;
gap: 0.5rem;
/* 原本的 8px 大約是 0.5rem */
font-size: 1.2rem;
/* 想要這區特別大一點就設 1.2 */
}
/* .songInfo dd{
margin: 5px 0;
} */
p {
color: #fff;
line-height: 1.5;
gap: 0.5rem;
/* 原本的 8px 大約是 0.5rem */
font-size: 1.5rem;
/* 想要這區特別大一點就設 1.2 */
margin: auto;
}
table {
border-spacing: 40px;
/* 左右間距 20px，上下 0 */
border-collapse: separate;
/* 必須是 separate，spacing 才會生效 */
}
table,
td {
/* width: 100%; */
/* border:#fff solid 1px; */
}
a {
color: #FFF;
text-decoration: none;
}
.contact i {
font-size: 0.6em;
margin-right: 0.3rem;
}
</style>
<link rel="stylesheet" href="lyrics.css">
<link rel="stylesheet" href="tablet.css">
</head>
<body class="nanum-pen-script-regular">
<body class="lyrics-page">
<div class="lyrics-layout">
<h1>세 단어 (THREE WORDS)</h1>
<table>
<table class="lyrics-main-table">
<tr>
<td <div class="main-left">
<iframe width="100%" style="aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/m7Zt_p9S-yg"
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" frameborder="0"
<td class="main-left">
<iframe width="560" height="315" style="aspect-ratio: 16 / 9; max-width: 100%; height: auto; min-height: 200px;"
src="https://www.youtube.com/embed/m7Zt_p9S-yg"
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" allowfullscreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
referrerpolicy="strict-origin-when-cross-origin"></iframe>
<dl class="songInfo">
<dt>Artist</dt>
<dd>SECHSKIES</dd>
@@ -112,7 +35,6 @@
<dt>Genre</dt>
<dd>K-Pop</dd>
</dl>
</div>
</td>
<td>
<p>다신 볼 수 없을 것만 같던<br>
@@ -169,25 +91,30 @@
</td>
</tr>
<tr>
<td><iframe
<td colspan="2">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.2574996244366!2d126.9052587762962!3d37.54899662513289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c992bb3f6a887%3A0x6058954f87325221!2sYG%20Entertainment!5e0!3m2!1szh-TW!2stw!4v1776239000614!5m2!1szh-TW!2stw"
width="100%" style="aspect-ratio: 16 / 9; border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe></td>
<td>
width="100%" style="aspect-ratio: 16 / 9; max-width: 720px; border: 0; border-radius: 10px; display: block; margin: 1.5rem auto 0;"
allowfullscreen loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</td>
</tr>
<tr>
<td colspan="2">
<div class="contact">
<img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="">
<img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="YG Entertainment logo">
<h3>YG Entertainment</h3>
<p>
<i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea<br>
<i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/"
target="_blank">https://www.ygfamily.com/</a><br>
target="_blank" rel="noopener noreferrer">https://www.ygfamily.com/</a><br>
<i class="fas fa-phone"></i> +82231421104
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
style.css
+133 -15
View File
@@ -383,6 +383,116 @@ section {
}
/* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */
.mission-section > .section-title {
margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.mission-section .mission-layout {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(200px, 3fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.mission-content > p,
.mission-content .logo-concept p {
color: #4a4a4a;
font-size: 1rem;
line-height: 1.6;
text-align: left;
margin: 0 0 1rem;
}
.mission-content .logo-concept {
margin-top: 1.75rem;
padding-top: 0;
}
.mission-content .logo-concept h3 {
font-size: 1.08rem;
letter-spacing: 0.18em;
color: var(--primary);
margin: 0 0 0.85rem;
font-weight: 800;
text-transform: uppercase;
padding: 0.65rem 0;
border-top: 2px solid rgba(255, 204, 0, 0.5);
border-bottom: 2px solid rgba(255, 204, 0, 0.5);
}
/* 金句：獨立於雙欄之下，全區塊寬度內致中 */
.mission-section > .quote-box {
width: 100%;
max-width: 44rem;
margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
padding: 1rem 1.25rem;
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff7da 100%);
border-left: 4px solid var(--primary);
border-radius: 10px;
color: #55420a;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.65;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.mission-visual {
align-self: start;
}
.mission-visual .logo-wrapper {
position: sticky;
top: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mission-visual .logo-wrapper img {
width: 100%;
max-width: min(320px, 100%);
height: auto;
display: block;
object-fit: contain;
}
.mission-visual .caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
margin-top: 0.65rem;
font-size: 0.78rem;
line-height: 1.45;
color: #6a6a6a;
max-width: 14rem;
}
.mission-visual .arrow-icon {
font-size: 0.95rem;
line-height: 1;
color: var(--primary);
font-style: normal;
}
@media (max-width: 900px) {
.mission-section .mission-layout {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.mission-visual .logo-wrapper {
position: static;
}
.mission-visual .logo-wrapper img {
max-width: 260px;
}
}
/* 作品列表表格 */
table {
width: 100%;
@@ -440,8 +550,9 @@ a {
.story-node {
position: relative;
width: calc(50% - 34px);
margin-bottom: 28px;
width: 100%;
max-width: 42rem;
margin: 0 0 28px;
padding: 16px 18px;
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%);
border: 1px solid rgba(255, 204, 0, 0.18);
@@ -449,8 +560,21 @@ a {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
/* 備註：改回 Font Awesome 鑽石圖示，並加上 border-box 讓圓圈節點中心準確對齊主軸 */
.story-node::before {
/* 時間軸節點：僅在 merged-storyline 內顯示鑽石與年代章 */
.story-node::before,
.story-node::after {
content: none;
display: none;
}
.merged-storyline .story-node {
width: calc(50% - 34px);
max-width: none;
margin-left: 0;
margin-right: 0;
}
.merged-storyline .story-node::before {
content: "\f3a5";
font-family: "Font Awesome 6 Free";
font-weight: 900;
@@ -465,13 +589,10 @@ a {
border-radius: 50%;
background: #fffdf5;
color: #e0b400;
/* border: 2px solid var(--primary);
box-shadow: 0 0 0 4px var(--surface), 0 4px 10px rgba(0, 0, 0, 0.14); */
z-index: 2;
}
/* 備註：時間標籤改成 concert 的日期章語言，並把字級放大到原本兩倍以上 */
.story-node::after {
.merged-storyline .story-node::after {
content: attr(data-era);
position: absolute;
top: -14px;
@@ -485,6 +606,7 @@ a {
border: 2px solid #fff;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.16);
z-index: 3;
display: block;
}
/* 備註：改用奇偶自動分邊，新增中間節點時不需要手動加 class */
@@ -539,22 +661,18 @@ a {
transform: none;
}
.story-node {
.merged-storyline .story-node {
width: calc(100% - 44px);
margin-left: 44px;
}
.story-node {
margin-right: 0;
margin-left: 44px;
}
.story-node::before {
.merged-storyline .story-node::before {
left: -39px;
right: auto;
}
.story-node::after {
.merged-storyline .story-node::after {
left: 14px;
right: auto;
transform: rotate(-8deg);
tablet.css
+8 -10
View File
@@ -180,36 +180,34 @@
max-width: 100%;
}
/* 歌詞頁 body class（tablet.css 需載於該頁 inline style 之後才可蓋過行內 :root） */
body.nanum-pen-script-regular {
/* 歌詞頁 */
body.lyrics-page {
margin: clamp(24px, 5vw, 56px) !important;
box-sizing: border-box;
overflow-x: hidden;
}
html:has(body.nanum-pen-script-regular) {
html:has(body.lyrics-page) {
font-size: 118.75% !important;
}
body.nanum-pen-script-regular table {
body.lyrics-page .lyrics-main-table {
border-spacing: clamp(12px, 3vw, 24px) !important;
max-width: 100%;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.nanum-pen-script-regular .main-left {
body.lyrics-page .main-left {
width: 100% !important;
display: block;
box-sizing: border-box;
}
body.nanum-pen-script-regular p {
body.lyrics-page .lyrics-main-table p {
font-size: 1.2rem !important;
max-width: none;
}
body.nanum-pen-script-regular h1 {
body.lyrics-page h1 {
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
}
}