style 調整調整圖片說明列
This commit is contained in:
@@ -152,3 +152,64 @@ section.archive-block p:last-child {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- 首頁 home-page：閱讀寬度與字級（弱化對 vw 的依賴） ---------- */
|
||||||
|
|
||||||
|
/* 用 px 鎖上限，避免 72rem 隨根字級／無障礙字級變大（例如實測出 ~1390px） */
|
||||||
|
.home-page .container {
|
||||||
|
max-width: min(1200px, calc(100% - 2rem));
|
||||||
|
width: 100%;
|
||||||
|
margin-inline: auto;
|
||||||
|
padding: 2.5rem 1.25rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page #start .intro-text {
|
||||||
|
max-width: 42rem;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page #start .intro-text p.intro-text,
|
||||||
|
.home-page #start .core-description,
|
||||||
|
.home-page #start .call-to-action {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
color: #4a4a4a;
|
||||||
|
margin: 0 0 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page #start .intro-text p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page #story > p.intro-text {
|
||||||
|
max-width: 44rem;
|
||||||
|
margin-inline: auto;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page .merged-storyline .story-node p {
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page .merged-storyline .story-node h3 {
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
|
||||||
|
.home-page .container {
|
||||||
|
padding: 1.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page #start .intro-text p.intro-text,
|
||||||
|
.home-page #start .core-description,
|
||||||
|
.home-page #start .call-to-action,
|
||||||
|
.home-page #story > p.intro-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+23
-23
@@ -12,8 +12,8 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body class="home-page">
|
||||||
<header id="origin">
|
<!-- <header id="origin">
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<h1>SECHSKIES<br>水晶男孩</h1>
|
<h1>SECHSKIES<br>水晶男孩</h1>
|
||||||
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
|
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||||
|
|
||||||
<canvas id="particles"></canvas>
|
<canvas id="particles"></canvas> -->
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
@@ -31,10 +31,11 @@
|
|||||||
<h2 class="section-title">好奇的開端</h2>
|
<h2 class="section-title">好奇的開端</h2>
|
||||||
<div class="intro-text">
|
<div class="intro-text">
|
||||||
<p class="intro-text">
|
<p class="intro-text">
|
||||||
身為在回歸後才被這場 <span class="highlight">「黃色奇蹟」</span> 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
|
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
|
||||||
|
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
|
||||||
</p>
|
</p>
|
||||||
<p class="core-description">
|
<p class="core-description">
|
||||||
這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
|
這段旅程始於 2016 年 4 月，透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
|
||||||
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。
|
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。
|
||||||
</p>
|
</p>
|
||||||
<p class="call-to-action">
|
<p class="call-to-action">
|
||||||
@@ -49,7 +50,7 @@
|
|||||||
<div class="logo-wrapper">
|
<div class="logo-wrapper">
|
||||||
<img src="./img/logo.png" alt="SECHSKIES Logo Concept">
|
<img src="./img/logo.png" alt="SECHSKIES Logo Concept">
|
||||||
<span class="caption">
|
<span class="caption">
|
||||||
<span class="arrow-icon" aria-hidden="true">↓</span>
|
<span class="arrow-icon" aria-hidden="true">↑</span>
|
||||||
設計語彙：六角、黃海與初心
|
設計語彙：六角、黃海與初心
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,26 +58,25 @@
|
|||||||
|
|
||||||
<div class="mission-content">
|
<div class="mission-content">
|
||||||
<p>
|
<p>
|
||||||
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span
|
以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 <span
|
||||||
class="highlight">專業的視覺策展</span> 宣傳成員魅力與 <span
|
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span
|
||||||
class="highlight">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span
|
class="mark_b">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="mark_b">靈感主軸</span>，延伸至
|
||||||
class="highlight">靈感主軸</span>，延伸至 <span class="highlight">網頁開發、視覺設計與內容企劃</span>
|
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
|
||||||
等多重領域，將對偶像的喜愛轉化為 <span class="highlight">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
|
等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
|
||||||
class="highlight">傳奇軌跡</span>，更能見證追星如何激發 <span class="highlight">創作潛能</span>。
|
class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="logo-concept">
|
<div class="logo-concept">
|
||||||
<h3>LOGO 設計理念</h3>
|
<h3>LOGO 設計理念</h3>
|
||||||
<div class="logo-concept-media-row">
|
<div class="logo-concept-media-row">
|
||||||
<p>
|
<p>
|
||||||
<span class="highlight">「晶」</span>字發想來自<span
|
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>，為了強調水晶男孩<span
|
||||||
class="highlight">六角形的水晶</span>，為了強調水晶男孩<span
|
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
|
||||||
class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字
|
6</span>，搭配演唱會必備的<span class="mark_b">手燈圖案</span>，代表粉絲和水晶<span
|
||||||
6</span>，搭配演唱會必備的<span class="highlight">手燈圖案</span>，代表粉絲和水晶<span
|
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
|
||||||
class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
|
class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
|
||||||
class="highlight highlight-stage-flash">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
|
class="mark_b">黃色海洋</span>。以此片段為契機，設計成<span
|
||||||
class="highlight">黃色海洋</span>。以此片段為契機，設計成<span
|
class="mark_b">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
|
||||||
class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
|
|
||||||
</p>
|
</p>
|
||||||
<div class="mission-moment-wrap">
|
<div class="mission-moment-wrap">
|
||||||
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
|
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
|
||||||
@@ -84,7 +84,7 @@
|
|||||||
<img src="./img/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
|
<img src="./img/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
|
||||||
</div>
|
</div>
|
||||||
<span class="caption">
|
<span class="caption">
|
||||||
<span class="arrow-icon" aria-hidden="true">↓</span>
|
<span class="arrow-icon" aria-hidden="true">↑</span>
|
||||||
回歸演唱會的動人瞬間-黃色氣球海
|
回歸演唱會的動人瞬間-黃色氣球海
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -94,8 +94,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="quote-box">
|
<div class="quote-box">
|
||||||
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span
|
我們要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
|
||||||
class="highlight">守護的熱情</span>，讓現在的自己變得比追星前的自己還要厲害。」
|
class="mark_b">守護的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
+7
-1
@@ -7,7 +7,13 @@
|
|||||||
* 浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
|
* 浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
|
||||||
* 要調整詞句：改 NAV_SOON_PHRASES 即可。
|
* 要調整詞句：改 NAV_SOON_PHRASES 即可。
|
||||||
*/
|
*/
|
||||||
const NAV_SOON_PHRASES = ["奇蹟醞釀中", "感動載入中"];
|
const NAV_SOON_PHRASES = ["奇蹟醞釀中", // 頁面準備中，呼應黃色奇蹟的誕生
|
||||||
|
"感動載入中", // 資料讀取中，連結入坑時的悸動
|
||||||
|
"初心校準中", // 結構調整中，呼應 LOGO 的六人設計核心
|
||||||
|
"黃海漫延中", // 視覺填充中，發想自黃色海洋填滿漆黑的過程
|
||||||
|
"傳奇編排中", // 內容整理中，記錄 1999 年榮譽與歷史軌跡
|
||||||
|
"夢想航行中", // 未來規劃中，期待水晶男孩的下一個十年
|
||||||
|
];
|
||||||
|
|
||||||
function pickSoonPhrase() {
|
function pickSoonPhrase() {
|
||||||
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
|
||||||
|
|||||||
@@ -406,13 +406,13 @@ section {
|
|||||||
|
|
||||||
/* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */
|
/* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */
|
||||||
.mission-section>.section-title {
|
.mission-section>.section-title {
|
||||||
margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-section .mission-layout {
|
.mission-section .mission-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr);
|
grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr);
|
||||||
gap: clamp(1.5rem, 4vw, 3rem);
|
gap: 2rem;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -446,7 +446,7 @@ section {
|
|||||||
.mission-section .logo-concept-media-row {
|
.mission-section .logo-concept-media-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(240px, 46%);
|
grid-template-columns: minmax(0, 1fr) minmax(240px, 46%);
|
||||||
gap: clamp(1rem, 3vw, 1.85rem);
|
gap: 1.5rem;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -478,25 +478,29 @@ section {
|
|||||||
.mission-section .mission-visual .caption,
|
.mission-section .mission-visual .caption,
|
||||||
.mission-section .mission-moment-wrap .caption {
|
.mission-section .mission-moment-wrap .caption {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.2rem;
|
justify-content: center;
|
||||||
|
gap: 0.35rem;
|
||||||
margin-top: 0.65rem;
|
margin-top: 0.65rem;
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
color: #6a6a6a;
|
color: #6a6a6a;
|
||||||
max-width: 16rem;
|
max-width: 16rem;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-section .mission-visual .arrow-icon,
|
.mission-section .mission-visual .arrow-icon,
|
||||||
.mission-section .mission-moment-wrap .arrow-icon {
|
.mission-section .mission-moment-wrap .arrow-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mission-section .highlight-stage-flash {
|
/* 全站：黃色光暈強調（可與 .mark_b 並用） */
|
||||||
|
.mark_y {
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.06em;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-shadow:
|
text-shadow:
|
||||||
@@ -505,12 +509,12 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
.mission-section .highlight-stage-flash {
|
.mark_y {
|
||||||
animation: mission-stage-flash-pulse 2.8s ease-in-out infinite;
|
animation: mark_y-pulse 2.8s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mission-stage-flash-pulse {
|
@keyframes mark_y-pulse {
|
||||||
|
|
||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
@@ -527,7 +531,7 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.mission-section .highlight-stage-flash {
|
.mark_y {
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -536,7 +540,7 @@ section {
|
|||||||
.mission-section>.quote-box {
|
.mission-section>.quote-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 44rem;
|
max-width: 44rem;
|
||||||
margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
|
margin: 2rem auto 0;
|
||||||
padding: 1rem 1.25rem;
|
padding: 1rem 1.25rem;
|
||||||
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff7da 100%);
|
background: linear-gradient(135deg, var(--surface-soft) 0%, #fff7da 100%);
|
||||||
border-left: 4px solid var(--primary);
|
border-left: 4px solid var(--primary);
|
||||||
@@ -849,7 +853,8 @@ footer {
|
|||||||
padding: 50px 0 20px;
|
padding: 50px 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight {
|
/* 全站：深色字重點（棕黃字色，與 <b> 不同於「顏色」） */
|
||||||
|
.mark_b {
|
||||||
color: var(--dark-yellow);
|
color: var(--dark-yellow);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-9
@@ -8,16 +8,16 @@
|
|||||||
|
|
||||||
nav,
|
nav,
|
||||||
.portal-nav {
|
.portal-nav {
|
||||||
padding-left: clamp(14px, 3.5vw, 32px) !important;
|
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||||
padding-right: clamp(14px, 3.5vw, 32px) !important;
|
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||||
row-gap: 12px;
|
row-gap: 12px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-page .portal-nav {
|
.map-page .portal-nav {
|
||||||
padding-left: clamp(14px, 3.5vw, 32px) !important;
|
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||||
padding-right: clamp(14px, 3.5vw, 32px) !important;
|
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portal-nav .logo {
|
.portal-nav .logo {
|
||||||
@@ -50,21 +50,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: clamp(1.75rem, 4.5vw, 2.35rem);
|
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero p {
|
.hero p {
|
||||||
font-size: clamp(1rem, 2.8vw, 1.15rem);
|
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container,
|
.container,
|
||||||
.content-container {
|
.content-container {
|
||||||
padding-left: clamp(14px, 3vw, 22px);
|
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||||
padding-right: clamp(14px, 3vw, 22px);
|
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page .container {
|
||||||
|
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||||
|
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
padding: clamp(26px, 5vw, 36px) clamp(16px, 4vw, 28px) !important;
|
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.story-grid {
|
.story-grid {
|
||||||
|
|||||||
Reference in New Issue
Block a user