feat 整合多頁面 導覽列
This commit is contained in:
@@ -103,6 +103,117 @@ nav a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.portal-nav li {
|
||||
position: relative;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.portal-nav {
|
||||
position: relative;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.portal-nav .portal-submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% - 2px);
|
||||
left: 0;
|
||||
min-width: 220px;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
.portal-nav .portal-submenu li {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.portal-nav .portal-submenu a {
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
color: #5f5f5f;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.portal-nav .portal-submenu a:hover {
|
||||
background: #fff8df;
|
||||
color: #3a300a;
|
||||
}
|
||||
|
||||
.portal-nav a.nav-current {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li.coming-soon>a {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
color: #c8a66a !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li.coming-soon>a::after {
|
||||
content: "建置中";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -8px;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.5px;
|
||||
color: #fff;
|
||||
background: #a66a2d;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.portal-nav a[data-coming-soon="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.portal-nav li.coming-soon>.portal-submenu {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.portal-nav .portal-submenu a[data-coming-soon="true"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.portal-nav .portal-submenu a[data-coming-soon="true"]::after {
|
||||
content: "建置中";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -78px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.5px;
|
||||
color: #fff;
|
||||
background: #a66a2d;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.portal-nav .portal-submenu a[data-coming-soon="true"]:hover::after,
|
||||
.portal-nav .portal-submenu a[data-coming-soon="true"]:focus-visible::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.portal-nav li:hover>.portal-submenu,
|
||||
.portal-nav li:focus-within>.portal-submenu,
|
||||
.portal-nav li.open>.portal-submenu {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#particles {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -169,11 +280,18 @@ footer {
|
||||
|
||||
/* 區塊容器 */
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--primary);
|
||||
text-align: center;
|
||||
@@ -457,19 +575,136 @@ footer {
|
||||
}
|
||||
|
||||
/* map.html */
|
||||
.map-page .map-archive-header,
|
||||
.map-page .portal-nav,
|
||||
.map-page .member-tabs,
|
||||
.map-page #itinerary-search,
|
||||
.map-page .map-layout,
|
||||
.map-page footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.concert-page .concert-archive-header,
|
||||
.concert-page .portal-nav,
|
||||
.concert-page .search-section,
|
||||
.concert-page .concert-container,
|
||||
.concert-page footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.map-page .portal-nav {
|
||||
width: 100%;
|
||||
margin: 0 0 14px;
|
||||
padding: 0.8rem 100px;
|
||||
background-color: var(--black);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
overflow: visible;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.map-page .portal-nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.map-page .portal-nav>ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.map-page .portal-nav>ul>li {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.map-page .portal-nav>ul>li>a {
|
||||
display: inline-block;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 1px;
|
||||
white-space: nowrap;
|
||||
padding: 4px 2px;
|
||||
border-bottom: 0;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.map-page .portal-nav>ul>li>a:hover,
|
||||
.map-page .portal-nav>ul>li:focus-within>a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.map-page .portal-nav .portal-submenu {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: calc(100% + 8px);
|
||||
min-width: 240px;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
|
||||
display: none;
|
||||
gap: 6px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.map-page .portal-nav>ul>li:hover .portal-submenu,
|
||||
.map-page .portal-nav>ul>li:focus-within .portal-submenu {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.map-page .portal-nav .portal-submenu a {
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.84rem;
|
||||
color: #5f5f5f;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.map-page .portal-nav .portal-submenu a:hover {
|
||||
background: #fff8df;
|
||||
color: #3a300a;
|
||||
}
|
||||
|
||||
.map-archive-header {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100dvh;
|
||||
background-image: url('img/header.jpg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 108%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 90px 20px 38px;
|
||||
background: #fcfaf2;
|
||||
padding: 0 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-archive-header .main-title {
|
||||
font-size: clamp(2rem, 4.5vw, 3.2rem);
|
||||
font-weight: 900;
|
||||
color: #333;
|
||||
letter-spacing: 8px;
|
||||
color: var(--yellow);
|
||||
letter-spacing: 6px;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 30px rgba(255, 221, 0, 0.75);
|
||||
}
|
||||
|
||||
.map-archive-header .subtitle-wrap {
|
||||
@@ -484,9 +719,9 @@ footer {
|
||||
}
|
||||
|
||||
.map-archive-header .sub-title {
|
||||
font-size: 0.96rem;
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 4px;
|
||||
color: #8a8a8a;
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
@@ -498,12 +733,13 @@ footer {
|
||||
}
|
||||
|
||||
.member-tabs {
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin: 14px auto 14px;
|
||||
margin: 18px auto 14px;
|
||||
max-width: 1100px;
|
||||
padding: 4px 20px;
|
||||
}
|
||||
@@ -763,7 +999,8 @@ footer {
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.map-archive-header {
|
||||
padding: 76px 16px 30px;
|
||||
background-size: cover;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.map-archive-header .main-title {
|
||||
@@ -774,6 +1011,25 @@ footer {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.map-page .portal-nav>ul {
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.map-page .portal-nav {
|
||||
padding: 0.8rem 16px;
|
||||
}
|
||||
|
||||
.map-page .portal-nav .portal-submenu {
|
||||
position: static;
|
||||
min-width: 0;
|
||||
margin-top: 6px;
|
||||
display: grid;
|
||||
box-shadow: none;
|
||||
background: #fffaf0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#itinerary-search {
|
||||
width: calc(100% - 28px);
|
||||
}
|
||||
@@ -805,4 +1061,97 @@ footer {
|
||||
.detail-content {
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chronicle (webcomic-like reader) */
|
||||
.chronicle-controls {
|
||||
max-width: 1200px;
|
||||
margin: 24px auto 10px;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
border: 0;
|
||||
background: #2a2a2a;
|
||||
color: #ffe9a8;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--primary);
|
||||
color: #161616;
|
||||
}
|
||||
|
||||
.chronicle-reader {
|
||||
max-width: 960px;
|
||||
margin: 0 auto 24px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.chronicle-chapter {
|
||||
background: #fffdf6;
|
||||
border-radius: 16px;
|
||||
padding: 24px 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.chronicle-chapter h2 {
|
||||
margin: 0 0 12px;
|
||||
color: #252525;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.chronicle-chapter p {
|
||||
margin: 0 0 10px;
|
||||
line-height: 1.9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chronicle-pager {
|
||||
max-width: 960px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#chapter-indicator {
|
||||
min-width: 64px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: #f6d66f;
|
||||
}
|
||||
|
||||
.chronicle-pager .btn {
|
||||
border: 0;
|
||||
background: #171717;
|
||||
color: #fff2bf;
|
||||
padding: 9px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chronicle-pager .btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.chronicle-chapter {
|
||||
padding: 18px 14px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user