Files
sechskies/assets/css/tablet.css
T

221 lines
4.8 KiB
CSS
Raw Normal View History

2026-05-14 09:20:10 +08:00
/* iPad/平板 RWD — max-width ≤1180px(含 iPad 直/橫與小平板/小筆電) */
@media (max-width: 1180px) {
html:has(body.map-page) {
scroll-padding-top: clamp(52px, 12vw, 76px);
}
nav,
.portal-nav {
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
row-gap: 12px;
flex-wrap: wrap;
align-items: flex-start;
}
.map-page .portal-nav {
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
}
.portal-nav .logo {
width: min(240px, 38vw);
max-width: 100%;
flex-shrink: 0;
}
.portal-nav>ul {
flex-wrap: wrap;
gap: clamp(12px, 2vw, 18px);
justify-content: flex-end;
min-width: 0;
flex: 1 1 280px;
}
.portal-nav>ul>li>a {
min-height: 44px;
display: inline-flex;
2026-05-14 11:05:12 +08:00
flex-direction: column;
2026-05-14 09:20:10 +08:00
align-items: center;
2026-05-14 11:05:12 +08:00
justify-content: center;
2026-05-14 09:20:10 +08:00
}
nav ul {
gap: clamp(12px, 2vw, 20px);
}
header {
background-size: cover;
background-position: center center;
}
.hero h1 {
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
}
.hero p {
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
}
.container,
.content-container {
padding-left: clamp(14px, 1.5vw + 10px, 22px);
padding-right: clamp(14px, 1.5vw + 10px, 22px);
}
.home-page .container {
padding-left: clamp(14px, 1.5vw + 10px, 22px);
padding-right: clamp(14px, 1.5vw + 10px, 22px);
}
section {
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
}
.story-grid {
gap: clamp(18px, 4vw, 28px);
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.card {
padding: clamp(18px, 4vw, 26px);
}
table {
font-size: 0.92rem;
}
table th,
table td {
padding: clamp(10px, 2vw, 14px);
}
/* 首頁/跨時空軌跡:鑽石主軸在平板改左側縱線(對齊舊 ≤900px 邏輯) */
.merged-storyline::before {
left: 18px;
transform: none;
}
.merged-storyline .story-node {
width: calc(100% - 44px);
margin-left: 44px;
margin-right: 0;
}
.merged-storyline .story-node:nth-of-type(odd),
.merged-storyline .story-node:nth-of-type(even) {
margin-left: 44px;
margin-right: 0;
}
.merged-storyline .story-node::before {
left: -39px;
right: auto;
}
.merged-storyline .story-node::after {
left: 14px;
right: auto;
transform: rotate(-8deg);
}
/* 紀實長卷/pillar 段落 */
.chronicle-reader,
.chronicle-pager {
max-width: min(920px, 100%);
}
.variety-block {
padding: clamp(18px, 4vw, 22px);
}
.map-archive-header .main-title,
.concert-archive-header .main-title {
letter-spacing: clamp(3px, 1vw, 6px);
}
.map-layout {
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
gap: clamp(16px, 3vw, 22px);
}
.map-my-maps-frame {
height: min(52vh, 520px);
min-height: 360px;
}
.map-embed-all {
gap: 12px;
}
/* 重逢區兩張演唱會大卡之間留白 */
#stage-now {
gap: clamp(36px, 5vw, 50px);
}
/* 演唱會卡片內距 */
.con-1,
.con-2,
.con-3,
.con-4,
#yellownote-stage {
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
}
.title {
margin: clamp(24px, 5vw, 40px) !important;
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
}
.concert-container {
padding-left: clamp(12px, 3vw, 20px);
padding-right: clamp(12px, 3vw, 20px);
}
.search-input:focus {
max-width: 100%;
}
.concert-page .search-input:focus {
width: min(100%, 440px);
}
.concert-page img[src*="assets/images/concert/"] {
width: min(560px, 88%);
max-width: 100%;
}
/* 歌詞頁 */
body.lyrics-page {
margin: clamp(24px, 5vw, 56px) !important;
box-sizing: border-box;
overflow-x: hidden;
}
html:has(body.lyrics-page) {
font-size: 118.75% !important;
}
body.lyrics-page .lyrics-main-table {
border-spacing: clamp(12px, 3vw, 24px) !important;
max-width: 100%;
}
body.lyrics-page .main-left {
width: 100% !important;
display: block;
box-sizing: border-box;
}
body.lyrics-page .lyrics-main-table p {
font-size: 1.2rem !important;
max-width: none;
}
body.lyrics-page h1 {
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
}
}