diff --git a/assets/css/style.css b/assets/css/style.css index 6b3ed12..588ce28 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -3480,6 +3480,11 @@ body.site-guide-page .site-guide-legend__off { font-weight: 700; } +body.site-guide-page .site-guide-legend__extra { + color: #8a8a8a; + font-weight: 700; +} + body.site-guide-page .site-guide-nav-table-wrap { width: 100%; overflow-x: auto; @@ -3590,6 +3595,142 @@ body.site-guide-page .site-guide-mini-table a { text-decoration: none; } +/* 主選單樹：心智圖巢狀清單（取代原表格），主選單→次選單→子節點以連接線呈現 */ +body.site-guide-page .site-guide-nav-caption--standalone { + text-align: center; + padding: 0 0.5rem 0.65rem; + font-size: 0.8rem; + color: #777; + line-height: 1.4; +} + +body.site-guide-page .site-guide-mindmap, +body.site-guide-page .site-guide-mindmap ul { + list-style: none; + margin: 0; + padding: 0; +} + +body.site-guide-page .site-guide-mindmap { + padding: 0.5rem 0.75rem 0.5rem 0.25rem; + min-width: 20rem; +} + +body.site-guide-page .site-guide-mindmap ul { + margin-left: 1.5rem; +} + +body.site-guide-page .site-guide-mindmap li { + position: relative; + padding: 0.32rem 0 0.32rem 1.35rem; +} + +body.site-guide-page .site-guide-mindmap li::before, +body.site-guide-page .site-guide-mindmap li::after { + content: ""; + position: absolute; + left: 0; +} + +/* 節點到垂直線的橫向短連接線 */ +body.site-guide-page .site-guide-mindmap li::before { + top: 1.1rem; + width: 1.15rem; + height: 0; + border-top: 2px solid rgba(150, 115, 20, 0.4); +} + +/* 同層兄弟節點間的垂直連接線 */ +body.site-guide-page .site-guide-mindmap li::after { + top: 0; + bottom: 0; + width: 0; + border-left: 2px solid rgba(150, 115, 20, 0.4); +} + +/* 每層最後一個節點：垂直線只畫到分支點，不繼續往下延伸 */ +body.site-guide-page .site-guide-mindmap li:last-child::after { + height: 1.1rem; + bottom: auto; +} + +body.site-guide-page .sg-node { + display: inline-flex; + align-items: center; + padding: 0.3em 0.85em; + border-radius: 999px; + font-size: 0.88rem; + line-height: 1.3; + background: #fff; + border: 1px solid rgba(255, 204, 0, 0.45); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +body.site-guide-page .sg-node a { + color: #5c4010; + font-weight: 700; + text-decoration: none; +} + +body.site-guide-page .sg-node a:hover { + text-decoration: underline; +} + +body.site-guide-page .sg-node--nolink { + border-style: dashed; + border-color: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.03); + color: #959595; + font-weight: 600; +} + +/* 不在頂欄的延伸內容（頁內錨點／草稿／備查）：灰色虛線，與頂欄真實連結區隔 */ +body.site-guide-page .sg-node--extra { + border-style: dashed; + border-color: rgba(0, 0, 0, 0.22); + background: rgba(0, 0, 0, 0.02); +} + +body.site-guide-page .sg-node--extra a { + color: #6e6e6e; +} + +body.site-guide-page .sg-node--extra code { + font-size: 0.85em; + color: #7a6a30; +} + +body.site-guide-page .sg-node--extra.sg-node--nolink { + color: #9a9a9a; + font-style: italic; +} + +body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="1"] > .sg-node { + font-weight: 800; + font-size: 0.98rem; + background: rgba(255, 220, 150, 0.55); + border-color: rgba(255, 204, 0, 0.6); +} + +body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="2"] > .sg-node { + background: rgba(255, 238, 200, 0.55); +} + +body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="3"] > .sg-node { + background: #fffaf2; +} + +body.site-guide-page .site-guide-mindmap li[data-site-guide-depth="4"] > .sg-node { + background: #f5f8ff; + font-size: 0.82rem; +} + +/* 延伸內容維持灰色虛線，不隨深度套用金黃底色（放在深度規則之後以蓋過同層底色） */ +body.site-guide-page .site-guide-mindmap li[data-site-guide-depth] > .sg-node--extra { + background: rgba(0, 0, 0, 0.02); + border-color: rgba(0, 0, 0, 0.22); +} + body.site-guide-page .site-guide-nav-nolink { color: #959595; font-weight: 600; diff --git a/extra/site-guide.html b/extra/site-guide.html index ea468a6..608b9a4 100644 --- a/extra/site-guide.html +++ b/extra/site-guide.html @@ -23,57 +23,7 @@ overflow: visible; } - /* 主選單樹巢狀：data-site-guide-depth + .site-guide-nav-name */ - body.site-guide-page .site-guide-nav-table .site-guide-nav-menu-cell { - text-align: left; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="1"] .site-guide-nav-menu-cell { - padding-left: 0.65rem; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="2"] .site-guide-nav-menu-cell { - padding-left: 1.1rem; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="3"] .site-guide-nav-menu-cell { - padding-left: 1.85rem; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="4"] .site-guide-nav-menu-cell { - padding-left: 2.6rem; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="2"] .site-guide-nav-name::before { - content: "——\00a0"; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="3"] .site-guide-nav-name::before { - content: "————\00a0"; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth="4"] .site-guide-nav-name::before { - content: "——————\00a0"; - } - - body.site-guide-page .site-guide-nav-table tr[data-site-guide-depth] .site-guide-nav-name::before { - display: inline; - font-family: inherit; - font-size: 0.92em; - color: rgba(0, 0, 0, 0.38); - letter-spacing: 0.02em; - } - - /* 選單名稱（短字層）：單行不斷行；欄寬不足時由表格外層橫向捲動 */ - body.site-guide-page .site-guide-nav-table td.site-guide-nav-menu-cell { - white-space: nowrap; - width: 1%; - } - - body.site-guide-page .site-guide-nav-table .site-guide-nav-name, - body.site-guide-page .site-guide-nav-table .site-guide-nav-name a { - white-space: nowrap; - } + /* 主選單樹已改心智圖巢狀清單，樣式集中於 assets/css/style.css 的 .site-guide-mindmap 規則 */ @@ -100,194 +50,136 @@

主選單樹

- ● 有連結 - ● 無連結 + ● 實線金框：頂欄真實連結 + ● 虛線框：頂欄有此項但無連結／籌備中 + ● 灰色虛線：不在頂欄，頁面內錨點／草稿／備查

+

路徑相對站根；主選單→次選單→子節點→延伸內容，全部收在同一張心智圖裡，不用再往下翻分散的表格。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
路徑相對站根。
選單名稱頁面簡介連結
淪陷瞬間Hero、入坑敘事與站方初衷；LOGO 理念、宣言與跨時空軌跡時間軸。index.html -
傳奇的轉折（六六歌2）四種入口（順序）：時間軸、電子書為獨立單頁；網頁版為 TOTOGA2 整合長頁（章節錨點）；影片為嵌入單頁。—
時間軸時間軸與紀實八章長文單頁。totoga2/timeline.html -
電子書紀實電子書內容獨立成頁。totoga2/ebook.html
圖文好讀版單頁整合：影片／電子書／長文模式切換與八章錨點。totoga2/readable.html
圖文好讀版 · 複本與正式版同結構之草稿複本。totoga2/readable copy.html -
圖文好讀版 · 複本 2與正式版同結構之草稿複本。totoga2/readable copy 2.html -
影片無限挑戰 · 六六歌2 嵌入影片單頁。totoga2/video.html
世紀級寶藏—variety/bangxiao.html
爆笑養老院（計量器）甜蜜負擔計量器；勾本命算出要補幾個節目。variety/bangxiao.html -
節目存檔表綜藝節目存檔表；含隊長帶弟弟、各自暴走等區塊錨點。variety/variety-shows.html -
隊長帶弟弟綜藝頁「瘋狂出演中」主區；與頂欄「隊長帶弟弟」同頁錨點。variety/variety.html#variety -
各自暴走——
新西遊記與鬼神同行企劃文案、六人介紹與 OB／YB 雙隊版面。variety/NJTW/NJTW5.html
完整的六顆黑／白水晶六人海報板、團名典故與成員靜態介紹。member/member.html
現場的震撼巡迴場次、場館與曲目展開；搜尋曲目或場次。concert/concert.html
集結水晶巡迴場次、場館與曲目展開；搜尋曲目或場次。concert/concert.html
隊長的氣場——
黃色留聲機導聽文案；新篇章與全盛期年表、深水連結與曲目表。albums/albums.html
啟動新篇章回歸後數位單曲／專輯敘事與代表曲目表。albums/albums.html#new
輝煌全盛期1997–1999 全盛期年表、專輯列與主打記憶整理。albums/albums.html#classic -
Yellow Note台灣行程表、成員行程篩選、搜尋與地圖主體。yellow-note/map.html
視覺進化論「從好奇到全端」自述與時間軸式章節段落。yellow-note/minister.html
聖地巡禮台灣行程表、成員行程篩選、搜尋與地圖主體。yellow-note/map.html
+

一般頁籌備中（掃一眼）

@@ -311,238 +203,8 @@ -

綜藝主頁：variety.html

-
-

淪陷瞬間 站根

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
頁／錨點用途
index.html首頁 Hero
#start 等區塊錨點（#story 不在頂欄白名單）
時間軸平行單頁 · totoga2/timeline.html
電子書平行單頁 · totoga2/ebook.html
圖文好讀版整合長頁 · totoga2/readable.html
圖文好讀版 · 複本 等草稿複本 · readable copy.html／readable copy 2.html
影片平行單頁 · totoga2/video.html
-
-
- -
-
- -
-

完整的六顆

-
- - - - - - - - - - - -
頁member/member.html
錨點#crystal-board
-
-
- -
-

現場的震撼

-
- - - - - - - - - - - -
集結水晶concert.html · #stage-now · #stage-past
隊長的氣場—
-
-
- -
-

黃色留聲機

-
- - - - - - - - - - - -
典藏albums.html · #new · #classic
歌詞extra/lyrics.html（未列主欄）
-
-
- -
-

Yellow Note

-
- - - - - - - - - - - - - - - -
視覺yellow-note/minister.html
minister 長版minister_ge.html（備份；未列頂欄）
地圖map.html · #taipei · #global
-
-
- -
-

variety/（無主欄）

-
- - - - - - - - - - - - - - - - - - - -
主頁variety.html · #variety
世紀級寶藏bangxiao.html
節目存檔表variety-shows.html · #variety-shows · #captain-brothers · #each-rampage
NJTW5NJTW5.html
-
-
- -
-

extra/ 其餘

-

未列頂欄主模板之草稿／實驗頁。主選單對應頁面已移至 - member/、yellow-note/、variety/ 等資料夾；六六歌2 圖文好讀版之草稿複本在 - totoga2/readable copy*.html（主選單樹第四層與正式版並列）。 -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
檔案備註
site-guide.html全站導覽（本頁）
grok.html實驗單頁
Untitled-1.html草稿
sunghoon.html—
minister_ge.htmlminister 長版備份（Yellow Note 小節亦列）
hw-bootstrap.html精華牆：站內單頁 Bootstrap 5 導覽／格線／輪播練習（學校作業，非主線導覽項目）
bootstrap-navbar-carousel.html跨時空精選：另一份 Bootstrap 5 作業（Hero＋錨點導覽＋雙 Carousel＋Grid，非主線導覽項目）
-
-