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

feat 全站頂欄標題改 site-header-inner class 首頁保留 100vh

Browse Source
This commit is contained in:
jekkinoopy
2026-05-16 17:11:10 +08:00
parent 0aa8335a7b
commit 39e47925ac
17 changed files with 34 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/concert.css
+1 -35
View File
@@ -4,41 +4,7 @@ body.concert-page {
padding: 0;
}
/* 頂部 banner 版面見 style.css .concert-archive-header（與 .map-archive-header 共用） */
.main-title {
font-size: 3.5rem;
font-weight: 900;
color: var(--yellow);
margin: 0;
letter-spacing: 8px;
text-transform: uppercase;
text-shadow: 0 0 30px rgba(255, 221, 0, 0.75);
}
.subtitle-wrap {
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.subtitle-wrap::before,
.subtitle-wrap::after {
content: "";
flex: 1;
height: 3px;
background-color: #ffcc00;
/* 水晶黃 */
max-width: 60px;
}
.sub-title {
font-size: 1rem;
color: #d4d4d4;
letter-spacing: 6px;
margin: 0 25px;
}
/* 頂部 banner 主標／副標：style.css .site-header-inner（HTML 加在 .header-inner 上） */
.concert-page .concert-container {
padding: 50px 0;
assets/css/index.css
+1 -40
View File
@@ -156,46 +156,7 @@ section.archive-intro p {
/* ---------- 首頁 home-page：閱讀寬度與字級（弱化對 vw 的依賴） ---------- */
/* 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);
}
/* 首頁頂欄主標／副標：與內頁相同，見 style.css .site-header-inner（#origin 僅保留 100vh 全屏） */
.home-page .container {
max-width: min(1200px, calc(100% - 2rem));
assets/css/style.css
+14 -12
View File
@@ -513,12 +513,7 @@ footer {
padding: 0.5rem;
}
.hero h1 {
font-size: 2.5rem;
line-height: 1.2;
color: var(--primary);
text-shadow: 0 0 30px rgba(255, 221, 0, 0.8);
}
/* 頂欄主標／副標字級與色見 .site-header-inner（對齊 extra/totoga2-copy-ebook.html） */
.hero p {
font-size: 1.2rem;
@@ -1563,7 +1558,8 @@ header.map-archive-header {
box-sizing: border-box;
}
.map-archive-header .main-title {
/* 全站頂欄標題語彙（母本：extra/totoga2-copy-ebook.html → .header-inner.site-header-inner） */
.site-header-inner .main-title {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 900;
color: var(--yellow, var(--primary));
@@ -1573,21 +1569,27 @@ header.map-archive-header {
text-shadow: 0 0 30px rgba(255, 221, 0, 0.75);
}
.map-archive-header .subtitle-wrap {
.site-header-inner .subtitle-wrap {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.map-archive-header .subtitle-wrap::before,
.map-archive-header .subtitle-wrap::after {
.site-header-inner .subtitle-wrap::before,
.site-header-inner .subtitle-wrap::after {
content: "";
flex: 1;
height: 3px;
background-color: #ffcc00;
max-width: 56px;
}
.map-archive-header .sub-title {
.site-header-inner .sub-title {
font-size: 0.92rem;
letter-spacing: 4px;
color: #d4d4d4;
margin: 0;
}
.map-layout {
@@ -1892,7 +1894,7 @@ header.map-archive-header {
}
@media (max-width: 920px) {
.map-archive-header .main-title {
.site-header-inner .main-title {
letter-spacing: 4px;
}
assets/css/tablet.css
+1 -1
View File
@@ -134,7 +134,7 @@
padding: clamp(18px, 4vw, 22px);
}
.map-archive-header .main-title {
.site-header-inner .main-title {
letter-spacing: clamp(3px, 1vw, 6px);
}
concert/concert.html
+1 -1
View File
@@ -14,7 +14,7 @@
<body class="concert-page">
<!-- HTML 結構 -->
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">巡迴演唱會列表</h1>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES CONCERT ARCHIVE</span>
extra/minister_ge.html
+1 -1
View File
@@ -13,7 +13,7 @@
<body class="home-page minister-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">視覺進化論</h1>
<div class="subtitle-wrap">
<span class="sub-title">FROM CURIOSITY TO FULL-STACK</span>
extra/site-guide.html
+1 -1
View File
@@ -68,7 +68,7 @@
<body class="site-guide-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">全站導覽</h1>
<div class="subtitle-wrap">
<span class="sub-title">SITE MAP · 一表為主</span>
extra/sunghoon.html
+1 -1
View File
@@ -12,7 +12,7 @@
<body class="chronicle-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">消失的真相</h1>
<div class="subtitle-wrap">
<span class="sub-title">VOICE · RAIN · NARRATIVE</span>
extra/totoga2 copy.html
+1 -1
View File
@@ -13,7 +13,7 @@
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">水晶男孩回來啦！</span>
extra/totoga2-copy-ebook.html
+1 -1
View File
@@ -13,7 +13,7 @@
<body class="ebook-ssg2-page totoga2-page totoga2-ebook-copy-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">水晶男孩回來啦！</span>
extra/totoga2-copy-timeline.html
+1 -1
View File
@@ -13,7 +13,7 @@
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">水晶男孩回來啦！</span>
fallen/totoga2.html
+1 -1
View File
@@ -162,7 +162,7 @@
<body class="ebook-ssg2-page totoga2-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
<div class="subtitle-wrap">
<span class="sub-title">水晶男孩回來啦！</span>
index.html
+3 -1
View File
@@ -15,10 +15,12 @@
<body class="home-page">
<header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<div class="header-inner site-header-inner">
<h1 class="main-title">SECHSKIES<br>水晶男孩</h1>
<div class="subtitle-wrap">
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
</div>
</div>
<a href="#start" class="btn">從這裡開始淪陷</a>
</div>
</header>
member/member.html
+1 -1
View File
@@ -12,7 +12,7 @@
<body class="member-crystal-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">六顆水晶</h1>
<div class="subtitle-wrap">
<span class="sub-title">BLACK KIES · WHITE KIES</span>
variety/variety.html
+1 -1
View File
@@ -12,7 +12,7 @@
<body class="chronicle-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">瘋子與天才</h1>
<div class="subtitle-wrap">
<span class="sub-title">EUN JI-WON × VARIETY GRAVITY</span>
yellow-note/map.html
+1 -1
View File
@@ -14,7 +14,7 @@
<!-- 備註：本頁一定要是完整 HTML 文件（含 head 與 style.css），
否則會變成瀏覽器的「片段模式」，樣式常常吃不到或跑版。 -->
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">台灣行程列表</h1>
<div class="subtitle-wrap">
<span class="sub-title">SECHSKIES TAIWAN ARCHIVE</span>
yellow-note/minister.html
+1 -1
View File
@@ -12,7 +12,7 @@
<body class="chronicle-page minister-page">
<header class="map-archive-header">
<div class="header-inner">
<div class="header-inner site-header-inner">
<h1 class="main-title">視覺進化論</h1>
<div class="subtitle-wrap">
<span class="sub-title">FROM CURIOSITY TO FULL-STACK</span>