diff --git a/assets/css/style.css b/assets/css/style.css index 0c0e421..c9692af 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -205,13 +205,14 @@ nav a { color: #3a300a; } -/* 淪陷瞬間 · 全員發瘋:僅第一層選單向下;第二層起向右飛出(≥1025px),小螢幕改直向堆疊 */ +/* 淪陷瞬間 · 全員發瘋:第一層向下;第二/三層向右飛出(≤1024px 改直向堆疊) */ .portal-nav .portal-submenu .portal-nav__subgroup { position: relative; z-index: 0; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, 0.07); + list-style: none; } .portal-nav .portal-submenu .portal-nav__subgroup:hover { @@ -227,6 +228,7 @@ nav a { font-size: 0.84rem; font-weight: 700; letter-spacing: 0; + white-space: nowrap; } .portal-nav .portal-submenu .portal-nav__subgroup-head::after { @@ -249,14 +251,18 @@ nav a { flex-direction: column; gap: 4px; position: absolute; - left: calc(100% + 3px); + left: calc(100% + 6px); top: 0; min-width: 216px; + width: max-content; + max-width: min(280px, 92vw); background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.06); z-index: 96; + overflow: visible; + box-sizing: border-box; } .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested, @@ -266,6 +272,14 @@ nav a { .portal-nav .portal-submenu-nested li { padding-bottom: 0; + list-style: none; +} + +.portal-nav .portal-submenu-nested a { + display: block; + width: 100%; + white-space: nowrap; + box-sizing: border-box; } .portal-nav .portal-submenu .portal-nav__subgroup--nested { @@ -274,6 +288,7 @@ nav a { margin: 0; padding: 0; border: 0; + list-style: none; } .portal-nav .portal-submenu .portal-nav__subgroup--nested:hover { @@ -288,6 +303,7 @@ nav a { font-size: 0.82rem; color: #4a4a4a; font-weight: 700; + white-space: nowrap; } .portal-nav .portal-nav__subgroup-head--nested::after { @@ -310,14 +326,17 @@ nav a { flex-direction: column; gap: 2px; position: absolute; - left: calc(100% + 3px); + left: calc(100% + 6px); top: 0; min-width: 200px; + width: max-content; + max-width: min(260px, 92vw); background: #fff; border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16); border: 1px solid rgba(0, 0, 0, 0.07); z-index: 102; + box-sizing: border-box; } .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3, @@ -336,9 +355,10 @@ nav a { .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested, .portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested { position: static; - display: flex !important; + display: none; width: 100%; min-width: 0; + max-width: none; margin: 8px 0 0; padding: 8px 0 8px 12px; border: 0; @@ -347,18 +367,30 @@ nav a { box-shadow: none; } + .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested, + .portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested { + display: flex; + } + .portal-nav .portal-submenu-nested--tier3, .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3, .portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 { position: static; - display: flex !important; + display: none; + width: 100%; + min-width: 0; + max-width: none; margin: 8px 0 0 10px; padding: 6px 0 6px 12px; border: 0; border-left: 2px solid rgba(255, 180, 0, 0.38); border-radius: 0; box-shadow: none; - min-width: 0; + } + + .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3, + .portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3 { + display: flex; } } @@ -471,9 +503,9 @@ a.btn[data-coming-soon="true"], display: none !important; } -.portal-nav li:hover>.portal-submenu, -.portal-nav li:focus-within>.portal-submenu, -.portal-nav li.open>.portal-submenu { +.portal-nav>ul>li:hover>.portal-submenu, +.portal-nav>ul>li:focus-within>.portal-submenu, +.portal-nav>ul>li.open>.portal-submenu { display: grid; gap: 6px; } @@ -513,7 +545,7 @@ footer { padding: 0.5rem; } -/* 頂欄主標/副標字級與色見 .site-header-inner(對齊 extra/totoga2-copy-ebook.html) */ +/* 頂欄主標/副標見 .site-header-inner;首頁 #origin .hero 內已套相同 class */ .hero p { font-size: 1.2rem; @@ -1467,19 +1499,10 @@ footer a .mark_b { padding-right: 10px; } -.map-page .portal-nav .portal-submenu .portal-nav__subgroup-head::after { - right: auto; - left: 10px; -} - -.map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested { - left: auto; - right: calc(100% + 3px); -} - .map-page .portal-nav .portal-submenu-nested a { - align-items: flex-end; + display: block; text-align: right; + white-space: nowrap; } .map-page .portal-nav .portal-nav__subgroup-head--nested { @@ -1489,14 +1512,27 @@ footer a .mark_b { padding-right: 10px; } -.map-page .portal-nav .portal-nav__subgroup-head--nested::after { - right: auto; - left: 8px; -} +@media (min-width: 1025px) { -.map-page .portal-nav .portal-submenu-nested--tier3 { - left: auto; - right: calc(100% + 3px); + .map-page .portal-nav .portal-submenu .portal-nav__subgroup-head::after { + right: auto; + left: 10px; + } + + .map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested { + left: auto; + right: calc(100% + 6px); + } + + .map-page .portal-nav .portal-nav__subgroup-head--nested::after { + right: auto; + left: 8px; + } + + .map-page .portal-nav li.portal-nav__subgroup--nested>.portal-submenu-nested--tier3 { + left: auto; + right: calc(100% + 6px); + } } @media (max-width: 1024px) { @@ -1558,7 +1594,15 @@ header.map-archive-header { box-sizing: border-box; } -/* 全站頂欄標題語彙:黃色氣球底圖上用深灰字(易讀);套在 .header-inner.site-header-inner,首頁 #origin 內亦然 */ +/* 全站頂欄標題語彙:黃色氣球底圖上用深灰字;.header-inner.site-header-inner(首頁 #origin .hero 內同 class) */ +.site-header-inner { + width: 100%; + max-width: min(40rem, 94vw); + margin-inline: auto; + text-align: center; + box-sizing: border-box; +} + .site-header-inner .main-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; @@ -1569,26 +1613,33 @@ header.map-archive-header { } .site-header-inner .subtitle-wrap { - margin-top: 20px; + width: 100%; + margin: 20px auto 0; + padding: 0 0.75rem; display: flex; align-items: center; justify-content: center; + box-sizing: border-box; } .site-header-inner .subtitle-wrap::before, .site-header-inner .subtitle-wrap::after { content: ""; - flex: 1; + display: block; + flex: 1 1 56px; + min-width: 28px; height: 3px; background-color: #5c5c5c; max-width: 56px; + opacity: 1; } .site-header-inner .sub-title { + flex: 0 0 auto; font-size: 0.92rem; letter-spacing: 4px; color: var(--text-muted, #888); - margin: 0; + margin: 0 18px; text-transform: uppercase; }