gch3n/val-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: cinematic polish for first chapter (title card, immersive UI suppression, camera typography)
All checks were successful
Deploy / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Chen Gu
2026-04-24 11:19:15 +08:00
parent df1732c54c
commit 4c2e36ecb0
5 changed files with 409 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
themes/dreamscape/assets/css/dreamscape.css
View File

@@ -30,6 +30,20 @@ body {
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.18;
background-image:
radial-gradient(circle at 20% 18%, rgba(255,255,255,0.10), transparent 40%),
radial-gradient(circle at 78% 72%, rgba(125, 211, 252, 0.12), transparent 44%),
linear-gradient(120deg, rgba(123,104,238,0.05), rgba(34,211,238,0.02));
mix-blend-mode: screen;
}
/* ═══ 星空画布 ═══ */
#starfield {
position: fixed;
@@ -57,8 +71,9 @@ body {
align-items: center;
gap: 2rem;
padding: 1.2rem;
background: linear-gradient(180deg, rgba(3,3,8,0.95) 0%, transparent 100%);
background: linear-gradient(180deg, rgba(3,3,8,0.85) 0%, rgba(3,3,8,0.28) 60%, transparent 100%);
backdrop-filter: blur(8px);
transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease;
}
.nav-logo {
@@ -74,7 +89,7 @@ body {
color: var(--text-dim);
text-decoration: none;
letter-spacing: 0.5px;
transition: color 0.3s, text-shadow 0.3s;
transition: color 0.3s, text-shadow 0.3s, opacity 0.3s;
}
.nav-link:hover {
@@ -82,6 +97,26 @@ body {
text-shadow: 0 0 20px var(--glow-cyan);
}
/* 单篇旅程页：弱化“网页操作感” */
body.immersive-single .nav {
justify-content: flex-start;
gap: 0.8rem;
padding: 0.7rem 0.9rem;
background: linear-gradient(180deg, rgba(3,3,8,0.45) 0%, rgba(3,3,8,0.10) 65%, transparent 100%);
}
body.immersive-single .nav-link {
font-size: 0.72rem;
opacity: 0;
pointer-events: none;
}
body.immersive-single .nav:hover .nav-link,
body.immersive-single .nav:focus-within .nav-link {
opacity: 0.75;
pointer-events: auto;
}
/* ═══ 主内容 ═══ */
main {
flex: 1;
@@ -91,6 +126,11 @@ main {
width: 100%;
}
body.immersive-single main {
max-width: min(980px, 100%);
padding-top: 3.6rem;
}
/* ═══ 首页英雄区 ═══ */
.dream-home { padding-top: 8vh; }
@@ -353,6 +393,56 @@ body[data-scene="calling"] .scene-veil {
transition: width 0.08s linear;
}
.title-card {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at center, rgba(3,3,8,0.55), rgba(3,3,8,0.88));
}
.title-card-inner {
text-align: center;
letter-spacing: 0.06em;
transform: translateY(10px) scale(0.98);
filter: blur(2px);
}
.title-card-kicker {
display: block;
font-size: 0.72rem;
color: rgba(232,232,248,0.62);
margin-bottom: 0.9rem;
font-family: var(--font-sans);
}
.title-card strong {
display: block;
font-size: clamp(1.5rem, 4.8vw, 2.8rem);
color: #f4f4ff;
text-shadow: 0 0 24px rgba(123,104,238,0.45);
}
.title-card em {
display: block;
margin-top: 0.75rem;
font-style: normal;
font-size: 0.8rem;
color: rgba(232,232,248,0.62);
}
body.immersive-single .title-card.show {
animation: titleCardIn 1.35s cubic-bezier(.19,.8,.25,1) forwards;
}
body.immersive-single .title-card.fade {
animation: titleCardOut 0.8s ease forwards;
}
/* 场景段落：像旅程节点 */
.article-body > p {
position: relative;
@@ -416,13 +506,17 @@ body.scene-shift .scene-veil {
/* 降级策略：用户偏好减少动画 */
@media (prefers-reduced-motion: reduce) {
#starfield,
body::before,
.story-orb,
.story-progress-bar,
.scene-veil,
.title-card,
.reveal,
.js-ready .article-body p {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
@@ -438,6 +532,27 @@ body.scene-shift .scene-veil {
margin-bottom: 3rem;
}
body.immersive-single .article-hero {
padding-top: 1.2rem;
margin-bottom: 1.6rem;
border-bottom-color: rgba(123,104,238,0.06);
}
body.immersive-single .article-glyph,
body.immersive-single .article-title,
body.immersive-single .article-meta {
opacity: 0.14;
filter: blur(0.2px);
transition: opacity 0.4s ease;
}
body.immersive-single .article-hero:hover .article-glyph,
body.immersive-single .article-hero:hover .article-title,
body.immersive-single .article-hero:hover .article-meta {
opacity: 0.75;
}
.article-glyph {
font-size: 2rem;
color: var(--glow-purple);
@@ -467,12 +582,19 @@ body.scene-shift .scene-veil {
/* ═══ 文章正文 — 沉浸式排版 ═══ */
.article-body {
font-size: 1.1rem;
line-height: 2;
max-width: 680px;
font-size: clamp(1.06rem, 1.2vw, 1.2rem);
line-height: 2.08;
max-width: 700px;
margin: 0 auto;
position: relative;
}
body.immersive-single .article-body {
max-width: min(740px, 92vw);
letter-spacing: 0.018em;
}
.article-body p {
margin-bottom: 1.8rem;
text-align: justify;
@@ -572,6 +694,17 @@ body.scene-shift .scene-veil {
font-size: 0.9rem;
}
body.immersive-single .article-nav {
opacity: 0.2;
filter: blur(0.1px);
transition: opacity 0.3s ease;
}
body.immersive-single .article-nav:hover {
opacity: 0.85;
}
.article-nav a {
color: var(--text-dim);
text-decoration: none;
@@ -627,6 +760,16 @@ body.scene-shift .scene-veil {
border-top: 1px solid rgba(123,104,238,0.1);
}
body.immersive-single .footer {
border-top-color: transparent;
color: rgba(136,136,170,0.35);
opacity: 0.45;
}
body.immersive-single .footer:hover {
opacity: 0.85;
}
/* ═══ 动画 ═══ */
@keyframes pulse {
0%, 100% { opacity: 0.6; }
@@ -653,6 +796,18 @@ body.scene-shift .scene-veil {
to { opacity: 1; transform: translateY(0); }
}
@keyframes titleCardIn {
0% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes titleCardOut {
from { opacity: 1; }
to { opacity: 0; }
}
.reveal {
opacity: 1;
transform: none;
@@ -677,4 +832,17 @@ body.scene-shift .scene-veil {
.hero-title { font-size: 2rem; }
.article-body { font-size: 1rem; }
.card-constellation { grid-template-columns: 1fr; }
body.immersive-single .nav {
gap: 0.45rem;
padding: 0.45rem 0.65rem;
}
body.immersive-single .nav-link {
font-size: 0.64rem;
}
body.immersive-single main {
padding-top: 3rem;
}
}