diff --git a/assets/css/index.css b/assets/css/index.css index a3b6ffe..2808752 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -156,7 +156,45 @@ section.archive-intro p { /* ---------- 首頁 home-page:閱讀寬度與字級(弱化對 vw 的依賴) ---------- */ -/* 首頁頂欄主標/副標:與內頁相同,見 style.css .site-header-inner(#origin 僅保留 100vh 全屏) */ +/* + * 首頁 hero 主標/副標:與全站 .site-header-inner 相同(index.css 在 style.css 之後載入)。 + * 若留舊版 .home-page header .hero h1 { color: var(--primary); text-shadow: … } 會蓋過 style.css。 + */ +.home-page header#origin .site-header-inner .main-title { + font-size: clamp(2rem, 4.5vw, 3.2rem); + font-weight: 900; + color: var(--text-main, #333); + letter-spacing: 6px; + margin: 0; + text-shadow: none; +} + +.home-page header#origin .site-header-inner .sub-title { + font-size: 0.92rem; + letter-spacing: 4px; + color: var(--text-muted, #888); + text-transform: uppercase; +} + +/* 首頁 Hero 副標雙線:僅 header#origin 內 .site-header-inner(不影響 portal-nav、#timeline 等區塊 .subtitle-wrap) */ +header#origin .site-header-inner .subtitle-wrap { + width: 100%; + max-width: min(40rem, 94vw); + margin: 20px auto 0; +} + +header#origin .site-header-inner .subtitle-wrap::before, +header#origin .site-header-inner .subtitle-wrap::after { + content: ""; + display: block; + flex: 0 0 56px; + width: 56px; + min-width: 56px; + max-width: 56px; + height: 3px; + background-color: #5c5c5c; + opacity: 1; +} .home-page .container { max-width: min(1200px, calc(100% - 2rem)); diff --git a/assets/css/style.css b/assets/css/style.css index c9692af..776b52d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -205,7 +205,7 @@ nav a { color: #3a300a; } -/* 淪陷瞬間 · 全員發瘋:第一層向下;第二/三層向右飛出(≤1024px 改直向堆疊) */ +/* 淪陷瞬間 · 全員發瘋:第一層向下;第二/三層向右飛出(僅 ≤767px 直向堆疊,避免 1024 平板也壓成直排) */ .portal-nav .portal-submenu .portal-nav__subgroup { position: relative; z-index: 0; @@ -344,7 +344,24 @@ nav a { display: flex; } -@media (max-width: 1024px) { +@media (min-width: 768px) { + + .portal-nav .portal-nav__subgroup>.portal-submenu-nested { + position: absolute !important; + left: calc(100% + 6px) !important; + top: 0 !important; + right: auto !important; + } + + .portal-nav .portal-submenu-nested--tier3 { + position: absolute !important; + left: calc(100% + 6px) !important; + top: 0 !important; + right: auto !important; + } +} + +@media (max-width: 767px) { .portal-nav .portal-submenu .portal-nav__subgroup-head::after, .portal-nav .portal-nav__subgroup-head--nested::after { @@ -354,7 +371,7 @@ nav a { .portal-nav .portal-nav__subgroup>.portal-submenu-nested, .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested, .portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested { - position: static; + position: static !important; display: none; width: 100%; min-width: 0; @@ -365,6 +382,7 @@ nav a { border-left: 2px solid rgba(255, 204, 0, 0.45); border-radius: 0; box-shadow: none; + left: auto !important; } .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested, @@ -375,7 +393,7 @@ nav a { .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; + position: static !important; display: none; width: 100%; min-width: 0; @@ -386,6 +404,7 @@ nav a { border-left: 2px solid rgba(255, 180, 0, 0.38); border-radius: 0; box-shadow: none; + left: auto !important; } .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3, @@ -1512,7 +1531,7 @@ footer a .mark_b { padding-right: 10px; } -@media (min-width: 1025px) { +@media (min-width: 768px) { .map-page .portal-nav .portal-submenu .portal-nav__subgroup-head::after { right: auto; @@ -1520,8 +1539,8 @@ footer a .mark_b { } .map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested { - left: auto; - right: calc(100% + 6px); + left: auto !important; + right: calc(100% + 6px) !important; } .map-page .portal-nav .portal-nav__subgroup-head--nested::after { @@ -1530,12 +1549,12 @@ footer a .mark_b { } .map-page .portal-nav li.portal-nav__subgroup--nested>.portal-submenu-nested--tier3 { - left: auto; - right: calc(100% + 6px); + left: auto !important; + right: calc(100% + 6px) !important; } } -@media (max-width: 1024px) { +@media (max-width: 767px) { .map-page .portal-nav .portal-nav__subgroup>.portal-submenu-nested, .map-page .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,