diff --git a/archive.html b/archive.html index ca92afb..759ca63 100644 --- a/archive.html +++ b/archive.html @@ -21,48 +21,7 @@ - + diff --git a/chronicle.html b/chronicle.html index e9233da..8ef2ae1 100644 --- a/chronicle.html +++ b/chronicle.html @@ -20,48 +20,7 @@ - + diff --git a/classic.html b/classic.html index 6d19dc7..390815c 100644 --- a/classic.html +++ b/classic.html @@ -19,48 +19,7 @@ - + diff --git a/concert.html b/concert.html index 9e3f0ca..c3347ba 100644 --- a/concert.html +++ b/concert.html @@ -21,48 +21,7 @@ - +
diff --git a/img/2023_電子書_無限挑戰六六歌2_final跨頁.pdf b/img/2023_電子書_無限挑戰六六歌2_final跨頁.pdf new file mode 100644 index 0000000..d1b2a3c Binary files /dev/null and b/img/2023_電子書_無限挑戰六六歌2_final跨頁.pdf differ diff --git a/img/志源生日.jpg b/img/志源生日.jpg new file mode 100644 index 0000000..fa11d60 Binary files /dev/null and b/img/志源生日.jpg differ diff --git a/img/水晶男孩推廣部FB.jpg b/img/水晶男孩推廣部FB.jpg new file mode 100644 index 0000000..e6128fe Binary files /dev/null and b/img/水晶男孩推廣部FB.jpg differ diff --git a/index.html b/index.html index a6c8232..f704fbc 100644 --- a/index.html +++ b/index.html @@ -21,48 +21,7 @@
- + @@ -75,12 +34,11 @@ 身為在回歸後才被這場 「黃色奇蹟」 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。

- 水晶男孩（SECHSKIES）的魔力在於：即便錯過他們第一次站上大型舞台的年代，依然會被他們 熱血、真誠且專業 - 的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 反差，把「現在入坑」變成一種完全被允許的日常。 + 這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。 + 即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。

- 經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。加入我們，一起把手上的應援色舉高一點。 + 對我來說，經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。這種從路人轉化為深陷其中的過程，證明了魅力可以跨越時間，也正是這一切好奇的起點。

@@ -89,13 +47,23 @@

- 本站是以 SECHSKIES 水晶男孩 為核心的數位推廣部，旨在透過 專業的視覺策展 宣傳成員魅力與 小黃們的應援活動。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 靈感主軸，延伸至 網頁開發、視覺設計與內容企劃 等多重領域，將對偶像的喜愛轉化為 實質的專業養分。在這裡，你不只能探索他們的 傳奇軌跡，更能見證追星如何激發 創作潛能。 + 本站是以 SECHSKIES 水晶男孩 為核心的數位推廣部，旨在透過 專業的視覺策展 宣傳成員魅力與 小黃們的應援活動。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 靈感主軸，延伸至 網頁開發、視覺設計與內容企劃 + 等多重領域，將對偶像的喜愛轉化為 實質的專業養分。在這裡，你不只能探索他們的 傳奇軌跡，更能見證追星如何激發 創作潛能。

LOGO 設計理念

- 「晶」字發想來自六角形的水晶，為了強調水晶男孩初心為六人。上半部形似數字 6，搭配演唱會必備的手燈圖案，代表粉絲和水晶密不可分的關係。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片黃色海洋。以此片段為契機，設計成黑色系與黃色系的色彩搭配，來記錄那瞬間的感動。 + 「晶」字發想來自六角形的水晶，為了強調水晶男孩初心為六人。上半部形似數字 6，搭配演唱會必備的手燈圖案，代表粉絲和水晶密不可分的關係。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片黃色海洋。以此片段為契機，設計成黑色系與黃色系的色彩搭配，來記錄那瞬間的感動。

@@ -112,7 +80,8 @@
- 「我們要用這座藝廊般的網站證明：追星的孩子不僅不會變壞，更會因為那份守護的熱情，讓現在的自己變得比追星前的自己還要厲害。」 + 「我們要用這座藝廊般的網站證明：追星的孩子不僅不會變壞，更會因為那份守護的熱情，讓現在的自己變得比追星前的自己還要厲害。」
@@ -160,6 +129,9 @@ 像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，隨時可切到完整紀實長文。 開啟完整紀實篇章

+
+ 開啟六六歌2 紀實電子書 +
diff --git a/jiwon.html b/jiwon.html index f317800..ca70baa 100644 --- a/jiwon.html +++ b/jiwon.html @@ -20,48 +20,7 @@
- + diff --git a/lyrics.css b/lyrics.css index 7d8c856..0d20247 100644 --- a/lyrics.css +++ b/lyrics.css @@ -36,6 +36,7 @@ body.lyrics-page .lyrics-main-table { width: 100%; max-width: 1100px; margin: 0 auto; + table-layout: fixed; border-collapse: separate; border-spacing: clamp(0.75rem, 2.5vw, 1.75rem); background: transparent !important; @@ -44,21 +45,41 @@ body.lyrics-page .lyrics-main-table { } body.lyrics-page .lyrics-main-table > tbody > tr > td { - padding: 0.35rem 0.5rem !important; + padding: 0 !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; +/* 兩欄等寬 + 同一套「卡片区」留白與邊框，左右才對稱 */ +body.lyrics-page .main-left, +body.lyrics-page .lyrics-text-cell, +body.lyrics-page .lyrics-map-cell, +body.lyrics-page .lyrics-contact-cell { + width: 50%; + max-width: none; + box-sizing: border-box; + padding: clamp(0.85rem, 2vw, 1.15rem) clamp(0.9rem, 2.2vw, 1.25rem) !important; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(0, 0, 0, 0.22); +} + +body.lyrics-page .main-left, +body.lyrics-page .lyrics-text-cell { vertical-align: top; } +body.lyrics-page .lyrics-map-cell { + vertical-align: top; +} + +body.lyrics-page .lyrics-contact-cell { + vertical-align: middle; +} + body.lyrics-page .main-left iframe { display: block; width: 100%; @@ -91,7 +112,14 @@ body.lyrics-page .lyrics-main-table p { line-height: 1.55; font-size: clamp(1rem, 2.2vw, 1.35rem); margin: 0; - max-width: 52ch; +} + +body.lyrics-page .lyrics-map-cell iframe { + box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); +} + +body.lyrics-page .lyrics-contact-cell .contact { + margin-top: 0; } body.lyrics-page a { @@ -108,7 +136,6 @@ body.lyrics-page .contact { color: var(--lyrics-paper); font-size: 0.95rem; line-height: 1.65; - max-width: 42ch; } body.lyrics-page .contact h3 { diff --git a/lyrics.html b/lyrics.html index da3bfd5..e5c1dd7 100644 --- a/lyrics.html +++ b/lyrics.html @@ -36,7 +36,7 @@
K-Pop
- +

다신 볼 수 없을 것만 같던
그대가 내 앞에 서 있네요
지킬 수 있을지 모르며 약속했던
@@ -91,16 +91,14 @@ - + - - - +

YG Entertainment logo

YG Entertainment

diff --git a/map.html b/map.html index 9cc5c2a..25188e4 100644 --- a/map.html +++ b/map.html @@ -22,48 +22,7 @@
- +
diff --git a/portal-nav.js b/portal-nav.js index 59093c1..71068fb 100644 --- a/portal-nav.js +++ b/portal-nav.js @@ -1,4 +1,55 @@ (() => { + /** 全站導覽 HTML — 僅修改此字串即可同步所有頁面 */ + const PORTAL_NAV_INNER_HTML = ` + + +`.trim(); + + document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => { + nav.innerHTML = PORTAL_NAV_INNER_HTML; + }); + const navs = Array.from(document.querySelectorAll(".portal-nav")); if (!navs.length) return; diff --git a/ssg2-ebook.html b/ssg2-ebook.html new file mode 100644 index 0000000..b42ba7f --- /dev/null +++ b/ssg2-ebook.html @@ -0,0 +1,59 @@ + + + + + + + 水晶男孩｜無限挑戰六六歌2 — 紀實電子書 + + + + + + +
+
+

無限挑戰 · 六六歌2

+
+ INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK +
+
+
+ + + + + +
+
+

紀實電子書

+

+ 以下為《無限挑戰》六六歌2 相關跨頁電子書（FlipHTML5）。若載入較慢，請稍候或重新整理；全螢幕閱讀請使用閱讀器內建控制項。 +

+
+ +
+
+ +
+
+ +

+ 回到首頁 · 傳奇的轉折 +

+
+ + + + + + + + diff --git a/style.css b/style.css index 2520243..038777c 100644 --- a/style.css +++ b/style.css @@ -384,7 +384,7 @@ section { } /* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */ -.mission-section > .section-title { +.mission-section>.section-title { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } @@ -395,7 +395,7 @@ section { align-items: start; } -.mission-content > p, +.mission-content>p, .mission-content .logo-concept p { color: #4a4a4a; font-size: 1rem; @@ -422,7 +422,7 @@ section { } /* 金句：獨立於雙欄之下，全區塊寬度內致中 */ -.mission-section > .quote-box { +.mission-section>.quote-box { width: 100%; max-width: 44rem; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; @@ -1317,4 +1317,68 @@ footer { .mode-btn { width: 100%; } +} + +/* 首頁 · 傳奇的轉折 — 電子書按鈕 */ +.story-ebook-cta { + text-align: center; + margin: 0 0 1.75rem; +} + +.story-ebook-btn { + display: inline-block; + padding: 12px 28px; + font-size: 0.95rem; + letter-spacing: 0.06em; +} + +/* 六六歌2 電子書頁 */ +body.ebook-ssg2-page .ebook-intro-lead { + text-align: center; + max-width: 42rem; + margin: 0 auto 1.5rem; + color: #4a4a4a; + line-height: 1.7; +} + +body.ebook-ssg2-page .ebook-main, +body.ebook-ssg2-page footer { + position: relative; + z-index: 1; +} + +body.ebook-ssg2-page .ebook-intro.section { + margin-bottom: 1.25rem; +} + +body.ebook-ssg2-page .flip-ebook-shell { + position: relative; + width: 100%; + max-width: 1100px; + margin: 0 auto 2rem; + border-radius: 14px; + overflow: hidden; + border: 1px solid rgba(255, 204, 0, 0.22); + box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22); +} + +body.ebook-ssg2-page .flip-ebook-aspect { + position: relative; + padding-top: max(60%, 324px); + width: 100%; + height: 0; +} + +body.ebook-ssg2-page .flip-ebook-aspect iframe { + position: absolute; + border: none; + width: 100%; + height: 100%; + left: 0; + top: 0; +} + +body.ebook-ssg2-page .ebook-back-link { + text-align: center; + margin: 0 0 2.5rem; } \ No newline at end of file diff --git a/sunghoon.html b/sunghoon.html index bb81da7..41e55ea 100644 --- a/sunghoon.html +++ b/sunghoon.html @@ -20,48 +20,7 @@
- +