Files
sechskies/index.css
T

216 lines
4.4 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
.story-timeline {
position: relative;
max-width: 1000px;
margin: 50px auto;
padding: 20px 0;
}
/* 中央貫穿軸線 */
.story-timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: var(--primary);
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
border-radius: 10px;
}
.timeline-box {
padding: 10px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}
/* 圓形節點 */
.timeline-box::after {
content: '\f3a5';
font-family: "Font Awesome 6 Free" !important;
position: absolute;
width: 10px;
height: 10px;
right: -20px;
top: 15px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
color: #FFD700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
/* 左右交錯控制 */
.left {
left: 0;
text-align: right;
}
.right {
left: 50%;
text-align: left;
}
/* 日期標籤(膠囊型) */
.date-tag {
display: inline-block;
padding: 8px 20px;
background: var(--accent);
color: var(--text);
border-radius: 50px;
font-weight: bold;
margin-bottom: 10px;
}
.content h3 {
color: var(--primary);
margin: 10px 0;
}
.content p {
color: var(--text-muted);
line-height: 1.6;
}
#stage .stage-teaser {
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#stage .stage-teaser:last-of-type {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
/* archive.html.archive-block 已改為 <section>,沿用 style.css 的 section 卡片版型 */
section.archive-block p {
color: #4a4a4a;
line-height: 1.7;
margin: 0 0 0.75rem;
}
section.archive-block p:last-child {
margin-bottom: 0;
}
/* archive.html:精選作品表(含封面欄) */
.archive-discography {
width: 100%;
margin-top: 1.25rem;
}
.archive-discography .album-cover-cell {
width: 96px;
vertical-align: middle;
text-align: center;
padding: 10px 8px;
}
.archive-discography .album-cover-cell img {
width: 76px;
height: 76px;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(255, 204, 0, 0.28);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
display: block;
margin: 0 auto;
background: #fff;
}
.archive-discography tbody tr.archive-row-spotify {
cursor: pointer;
}
.archive-discography tbody tr.archive-row-spotify:hover td {
background-color: rgba(255, 204, 0, 0.06);
}
.archive-discography tbody tr.archive-row-spotify:focus-visible {
outline: 2px solid rgba(255, 204, 0, 0.65);
outline-offset: -2px;
}
.landing-intro {
text-align: center;
padding: 28px 0 48px;
}
.landing-actions .btn {
margin: 8px 6px;
}
.archive-intro-lead {
text-align: center;
margin-top: 8px;
}
/* ---------- 首頁 home-page:閱讀寬度與字級(弱化對 vw 的依賴) ---------- */
/* 用 px 鎖上限,避免 72rem 隨根字級/無障礙字級變大(例如實測出 ~1390px) */
.home-page .container {
max-width: min(1200px, calc(100% - 2rem));
width: 100%;
margin-inline: auto;
padding: 2.5rem 1.25rem;
box-sizing: border-box;
}
.home-page #start .intro-text {
max-width: 42rem;
margin-inline: auto;
}
.home-page #start .intro-text p.intro-text,
.home-page #start .core-description,
.home-page #start .call-to-action {
font-size: 1.0625rem;
line-height: 1.75;
color: #4a4a4a;
margin: 0 0 1.125rem;
}
.home-page #start .intro-text p:last-child {
margin-bottom: 0;
}
.home-page #story > p.intro-text {
max-width: 44rem;
margin-inline: auto;
margin-bottom: 1.25rem;
font-size: 1.0625rem;
line-height: 1.75;
color: #4a4a4a;
}
.home-page .merged-storyline .story-node p {
font-size: 1rem;
line-height: 1.75;
}
.home-page .merged-storyline .story-node h3 {
font-size: 1.0625rem;
}
@media (max-width: 640px) {
.home-page .container {
padding: 1.75rem 1rem;
}
.home-page #start .intro-text p.intro-text,
.home-page #start .core-description,
.home-page #start .call-to-action,
.home-page #story > p.intro-text {
font-size: 1rem;
}
}