admin/notebook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(notebook): flatten cards and add side physics doodles
notebook-ci / build-push-deploy (push) Successful in 36s
Details

Browse Source 
Remove panel/card borders and shadows for a flatter reading layout.
Add SideDoodles with physics formulas/curves, random angles on load.
This commit is contained in:
secret-deus
2026-07-16 20:01:52 +08:00
parent 4186647222
commit 15cdabb647
11 changed files with 501 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+3 -1
View File
@@ -14,7 +14,9 @@ const year = new Date().getFullYear();
<style>
footer {
border-top: 1px solid rgb(var(--line));
position: relative;
z-index: 1;
border-top: 1px solid color-mix(in srgb, rgb(var(--line)) 55%, transparent);
padding: 1.75rem 1rem 2.75rem;
text-align: center;
color: rgb(var(--muted));
src/components/Header.astro
+2 -2
View File
@@ -22,8 +22,8 @@ import HeaderLink from './HeaderLink.astro';
z-index: 20;
backdrop-filter: blur(10px);
background: rgba(var(--surface), 0.86);
border-bottom: 1px solid rgb(var(--line));
transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 55%, transparent);
transition: background var(--dur) var(--ease-out);
}
nav {
width: var(--wide);
src/components/SideDoodles.astro
+432
View File
@@ -0,0 +1,432 @@
---
/**
* 大屏两侧随性手绘：物理公式 / 曲线。
* 摆放与角度在客户端随机，每次刷新略有不同。
*/
---
<div class="side-doodles" aria-hidden="true">
<svg class="doodle left-stack" viewBox="0 0 170 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 薛定谔 -->
<g class="piece" data-x="2" data-y="8">
<text class="eq" x="2" y="26" font-size="13">iℏ ∂ψ/∂t = Ĥψ</text>
<path
d="M6 34 q28 9 58 2 t52 -1"
stroke="currentColor"
stroke-width="1.1"
stroke-linecap="round"
opacity="0.4"></path>
<text class="eq scrawl" x="10" y="52" font-size="9">wave fn…?</text>
</g>
<!-- 双缝 -->
<g class="piece" data-x="18" data-y="70">
<path d="M10 8 v70" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.55"></path>
<path d="M10 20 h8 M10 48 h8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"></path>
<path
d="M22 20 c8 -10 14 -9 22 0 s16 11 24 1 14 -10 22 0 12 8 18 2"
stroke="currentColor"
stroke-width="1.35"
stroke-linecap="round"
fill="none"></path>
<path
d="M22 48 c9 -8 15 -7 21 2 s15 9 23 0 13 -9 21 1 14 7 20 0"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
fill="none"
opacity="0.85"></path>
<path d="M112 8 v62" stroke="currentColor" stroke-width="1.15" opacity="0.5"></path>
<path
d="M116 14 v6 M116 28 v10 M116 46 v5 M116 58 v8"
stroke="currentColor"
stroke-width="2.4"
stroke-linecap="round"
opacity="0.7"></path>
<text class="eq scrawl" x="18" y="86" font-size="10">Young · 2 slits</text>
</g>
<!-- 麦克斯韦 -->
<g class="piece" data-x="-2" data-y="195">
<text class="eq" x="4" y="18" font-size="11">∇·E = ρ/ε₀</text>
<text class="eq" x="12" y="36" font-size="11">∇·B = 0</text>
<text class="eq" x="6" y="54" font-size="11">∇×E = −∂B/∂t</text>
<text class="eq" x="10" y="72" font-size="11">∇×B = μ₀J + μ₀ε₀∂E/∂t</text>
<path
d="M8 80 c20 6 40 -2 70 4 18 4 30 1 48 -3"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
opacity="0.35"></path>
</g>
<!-- 势阱 -->
<g class="piece" data-x="28" data-y="300">
<path
d="M18 20 v55 h70 v-55"
stroke="currentColor"
stroke-width="1.55"
stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M18 75 q18 4 35 -1 t35 2" stroke="currentColor" stroke-width="1.2" opacity="0.45"></path>
<path d="M28 62 h50 M32 48 h42 M38 34 h30" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"></path>
<path
d="M30 62 c8 -14 18 -14 26 0 s16 12 24 -2"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
fill="none"
opacity="0.8"></path>
<path
d="M34 48 c6 -10 12 -9 18 1 6 9 12 8 20 -1"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
fill="none"
opacity="0.65"></path>
<text class="eq scrawl" x="12" y="98" font-size="10">Eₙ = n²π²ℏ²/2mL²</text>
</g>
<!-- E=mc² -->
<g class="piece" data-x="8" data-y="430">
<text class="eq" x="6" y="28" font-size="20">E = mc²</text>
<path d="M10 36 q30 8 55 0" stroke="currentColor" stroke-width="1.1" opacity="0.4"></path>
<text class="eq scrawl" x="8" y="54" font-size="9">…or rest energy</text>
</g>
<!-- 摆线 -->
<g class="piece" data-x="20" data-y="500">
<path d="M8 18 h110 M12 12 v55" stroke="currentColor" stroke-width="1.05" opacity="0.45" stroke-linecap="round"></path>
<path
d="M14 22 c8 0 12 18 20 28 6 8 12 12 18 12 8 0 12 -10 18 -22 6 -12 10 -18 18 -18 6 0 10 8 14 16"
stroke="currentColor"
stroke-width="1.55"
stroke-linecap="round"
fill="none"></path>
<circle cx="34" cy="38" r="11" stroke="currentColor" stroke-width="1.15" opacity="0.55"></circle>
<path d="M34 38 l7 -6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" opacity="0.7"></path>
<text class="eq scrawl" x="50" y="78" font-size="10">cycloid</text>
</g>
<!-- 拉格朗日 -->
<g class="piece" data-x="-4" data-y="610">
<text class="eq" x="4" y="22" font-size="13">L = T − V</text>
<text class="eq" x="8" y="44" font-size="11">d/dt(∂L/∂q̇) = ∂L/∂q</text>
<path
d="M6 54 c25 7 48 -3 78 5"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
opacity="0.35"></path>
<path
d="M100 28 c8 -6 16 -2 14 8 -2 10 -14 12 -18 4 -3 -6 0 -10 4 -12"
stroke="currentColor"
stroke-width="1.25"
stroke-linecap="round"
fill="none"
opacity="0.7"></path>
</g>
<!-- 热方程 -->
<g class="piece" data-x="16" data-y="700">
<text class="eq" x="4" y="22" font-size="12">∂u/∂t = κ ∇²u</text>
<path
d="M10 48 c18 -22 36 -24 52 -4 14 18 28 16 42 -2"
stroke="currentColor"
stroke-width="1.35"
stroke-linecap="round"
fill="none"></path>
<path
d="M12 52 c16 -12 34 -14 48 -2 12 10 26 10 40 0"
stroke="currentColor"
stroke-width="1.1"
stroke-linecap="round"
opacity="0.55"
fill="none"></path>
<path
d="M14 56 c14 -6 30 -6 42 0 12 6 24 4 36 0"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
opacity="0.4"
fill="none"></path>
</g>
<!-- ℏ c G -->
<g class="piece" data-x="30" data-y="820">
<text class="eq" x="0" y="20" font-size="14">ℏ · c · G</text>
<path d="M4 28 q20 6 40 -2 t36 4" stroke="currentColor" stroke-width="1" opacity="0.4" stroke-linecap="round"></path>
<path
d="M90 12 l2 5 5 1 -4 3 1 5 -4 -3 -4 3 1 -5 -4 -3 5 -1 z"
stroke="currentColor"
stroke-width="0.9"
stroke-linejoin="round"
opacity="0.6"></path>
<circle cx="108" cy="28" r="1.8" stroke="currentColor" stroke-width="1" opacity="0.5"></circle>
<circle cx="118" cy="14" r="1.2" stroke="currentColor" stroke-width="1" opacity="0.45"></circle>
</g>
</svg>
<svg class="doodle right-stack" viewBox="0 0 170 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Lissajous -->
<g class="piece" data-x="10" data-y="4">
<path
d="M12 12 h95 v70 h-95 z"
stroke="currentColor"
stroke-width="1.1"
stroke-linejoin="round"
opacity="0.4"></path>
<path
d="M30 48 c0 -18 12 -28 28 -28 14 0 22 10 22 22 0 16 -12 20 -22 20 -14 0 -28 -8 -28 -22 0 -12 10 -18 20 -18 12 0 18 8 18 16 0 10 -8 14 -16 14 -8 0 -14 -4 -14 -12"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
fill="none"></path>
<path
d="M42 30 c18 4 28 16 30 32 -2 14 -14 22 -28 20 -12 -2 -20 -12 -18 -24 2 -10 12 -16 22 -14"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
opacity="0.55"
fill="none"></path>
<text class="eq scrawl" x="20" y="102" font-size="10">Lissajous · 3∶2</text>
</g>
<!-- 洛伦兹 + 光锥 -->
<g class="piece" data-x="22" data-y="130">
<text class="eq" x="4" y="20" font-size="12">γ = 1/√(1−v²/c²)</text>
<text class="eq" x="10" y="42" font-size="11">t′ = γ(t − vx/c²)</text>
<path
d="M70 88 l-28 -36 M70 88 l28 -36 M42 52 h56"
stroke="currentColor"
stroke-width="1.25"
stroke-linecap="round"
opacity="0.75"></path>
<path d="M70 88 v-48" stroke="currentColor" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"></path>
<text class="eq scrawl" x="78" y="58" font-size="9">light cone</text>
</g>
<!-- Bohr -->
<g class="piece" data-x="4" data-y="250">
<ellipse cx="55" cy="48" rx="42" ry="36" stroke="currentColor" stroke-width="1.2" opacity="0.5"></ellipse>
<ellipse cx="55" cy="48" rx="30" ry="24" stroke="currentColor" stroke-width="1.25" opacity="0.7"></ellipse>
<ellipse cx="55" cy="48" rx="18" ry="14" stroke="currentColor" stroke-width="1.3"></ellipse>
<circle cx="55" cy="48" r="4" stroke="currentColor" stroke-width="1.4"></circle>
<circle cx="84" cy="40" r="2.5" stroke="currentColor" stroke-width="1.2"></circle>
<path d="M78 36 q10 -8 14 2" stroke="currentColor" stroke-width="1" opacity="0.5" stroke-linecap="round"></path>
<text class="eq scrawl" x="18" y="100" font-size="10">Bohr · n=1,2,3…</text>
</g>
<!-- Fourier -->
<g class="piece" data-x="26" data-y="370">
<path
d="M8 40 h16 v-22 h22 v44 h22 v-44 h22 v22 h16"
stroke="currentColor"
stroke-width="1.45"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"></path>
<path
d="M8 78 c8 -12 12 -12 18 0 s12 12 18 0 12 -12 18 0 12 12 18 0 12 -12 18 0 12 10 16 2"
stroke="currentColor"
stroke-width="1.25"
stroke-linecap="round"
fill="none"
opacity="0.75"></path>
<path
d="M8 92 c4 -6 6 -6 10 0 s8 6 12 0 6 -6 10 0 8 6 12 0 6 -6 10 0 8 6 12 0 6 -5 10 0 6 5 10 0"
stroke="currentColor"
stroke-width="1.05"
stroke-linecap="round"
opacity="0.5"
fill="none"></path>
<text class="eq scrawl" x="14" y="118" font-size="10">Fourier · Σ sin</text>
</g>
<!-- 概率云 -->
<g class="piece" data-x="12" data-y="510">
<path
d="M40 50 c-18 -22 -8 -42 12 -40 18 2 26 18 20 34 -4 12 -18 16 -28 10 -8 -4 -10 -12 -4 -18 4 -5 12 -4 14 2"
stroke="currentColor"
stroke-width="1.4"
stroke-linecap="round"
fill="none"></path>
<path
d="M52 42 c12 -8 28 -2 30 14 2 14 -10 26 -24 24 -10 -1 -16 -10 -12 -18"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
opacity="0.65"
fill="none"></path>
<path
d="M28 58 c-6 10 0 24 14 26 12 2 20 -8 16 -18"
stroke="currentColor"
stroke-width="1.15"
stroke-linecap="round"
opacity="0.55"
fill="none"></path>
<circle cx="48" cy="48" r="1.5" fill="currentColor" opacity="0.5"></circle>
<text class="eq scrawl" x="8" y="100" font-size="10">|ψ|² · orbital mess</text>
</g>
<!-- 波动方程 -->
<g class="piece" data-x="30" data-y="620">
<text class="eq" x="2" y="22" font-size="12">∂²u/∂t² = c² ∇²u</text>
<path
d="M6 48 c10 -16 18 -16 28 0 s20 16 30 0 18 -14 28 0 16 12 24 2"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
fill="none"></path>
<path
d="M10 58 c9 -12 16 -12 24 0 s16 12 24 0 14 -10 22 0 12 8 18 1"
stroke="currentColor"
stroke-width="1.15"
stroke-linecap="round"
opacity="0.5"
fill="none"></path>
<text class="eq scrawl" x="70" y="78" font-size="9">→ wave</text>
</g>
<!-- 黑体 -->
<g class="piece" data-x="0" data-y="720">
<path d="M10 70 h110 M14 16 v58" stroke="currentColor" stroke-width="1.05" opacity="0.45" stroke-linecap="round"></path>
<path
d="M16 66 c8 -2 14 -8 20 -28 6 -20 12 -36 22 -40 8 -3 14 4 20 18 8 18 16 36 28 42 8 4 16 4 28 2"
stroke="currentColor"
stroke-width="1.55"
stroke-linecap="round"
fill="none"></path>
<path
d="M18 66 c6 -1 12 -6 16 -18 5 -14 10 -24 18 -28 6 -3 10 2 14 12 6 14 12 26 22 30 8 3 16 2 26 0"
stroke="currentColor"
stroke-width="1.2"
stroke-linecap="round"
opacity="0.55"
fill="none"></path>
<path d="M48 18 v48" stroke="currentColor" stroke-width="1" stroke-dasharray="2 3" opacity="0.4"></path>
<text class="eq scrawl" x="20" y="90" font-size="10">Planck · blackbody</text>
<text class="eq scrawl" x="70" y="36" font-size="9">λ_max T≈const</text>
</g>
<!-- F=ma 划掉 -->
<g class="piece" data-x="18" data-y="840">
<text class="eq" x="0" y="18" font-size="12" opacity="0.45">F=ma</text>
<path d="M0 12 l38 10" stroke="currentColor" stroke-width="1.2" opacity="0.5" stroke-linecap="round"></path>
<text class="eq" x="8" y="40" font-size="12">F = dp/dt</text>
</g>
</svg>
</div>
<script>
function scatterDoodles() {
const root = document.querySelector('.side-doodles');
if (!root) return;
const pieces = root.querySelectorAll('.piece');
pieces.forEach((g) => {
const baseX = Number(g.getAttribute('data-x') || 0);
const baseY = Number(g.getAttribute('data-y') || 0);
// 角度：大约 ±20°，偶尔更大一点
const angle = (Math.random() * 40 - 20) * (Math.random() < 0.15 ? 1.35 : 1);
// 位移抖动
const jx = Math.random() * 22 - 11;
const jy = Math.random() * 18 - 9;
const op = 0.72 + Math.random() * 0.28;
g.setAttribute(
'transform',
`translate(${(baseX + jx).toFixed(1)}, ${(baseY + jy).toFixed(1)}) rotate(${angle.toFixed(1)})`,
);
g.style.opacity = String(op.toFixed(2));
});
// 整侧栏也略微随机歪一点
root.querySelectorAll('.doodle').forEach((svg, i) => {
const tilt = (Math.random() * 3.2 - 1.6) * (i === 0 ? -1 : 1);
const shiftY = Math.random() * 3 - 1.5;
svg.style.setProperty('--tilt', `${tilt.toFixed(2)}deg`);
svg.style.setProperty('--shift-y', `${shiftY.toFixed(1)}%`);
});
}
scatterDoodles();
document.addEventListener('astro:page-load', scatterDoodles);
</script>
<style>
.side-doodles {
display: none;
pointer-events: none;
user-select: none;
}
@media (min-width: 1280px) {
.side-doodles {
display: block;
}
}
.doodle {
position: fixed;
top: 48%;
width: clamp(96px, 9.5vw, 148px);
height: auto;
max-height: min(92vh, 920px);
/* --tilt / --shift-y 由脚本写入 */
transform: translateY(calc(-48% + var(--shift-y, 0%))) rotate(var(--tilt, 0deg));
color: var(--accent);
opacity: 0.17;
z-index: 0;
}
.left-stack {
left: max(0.2rem, calc((100vw - min(72rem, 100vw)) / 2 - 8.6rem));
}
.right-stack {
right: max(0.2rem, calc((100vw - min(72rem, 100vw)) / 2 - 8.6rem));
}
.eq {
fill: currentColor;
font-family: 'Segoe UI', 'Cambria Math', Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 500;
letter-spacing: -0.01em;
}
.eq.scrawl {
font-family: 'Segoe UI', 'Comic Sans MS', 'Bradley Hand', cursive, sans-serif;
font-style: italic;
font-weight: 400;
opacity: 0.85;
letter-spacing: 0.01em;
}
.piece {
opacity: 0.9;
transform-box: fill-box;
transform-origin: center;
}
@media (min-width: 1600px) {
.doodle {
opacity: 0.21;
width: clamp(118px, 10vw, 168px);
}
}
@media (prefers-color-scheme: dark) {
.doodle {
opacity: 0.19;
color: var(--accent-dark);
}
@media (min-width: 1600px) {
.doodle {
opacity: 0.24;
}
}
}
</style>
src/layouts/BaseLayout.astro
+2
View File
@@ -2,6 +2,7 @@
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import SideDoodles from '../components/SideDoodles.astro';
interface Props {
title: string;
@@ -19,6 +20,7 @@ const { title, description = '', wide = false } = Astro.props;
<BaseHead title={title} description={description} />
</head>
<body>
<SideDoodles />
<Header />
<main class:list={[{ wide, boarded: wide }]}>
<slot />
src/layouts/ProseLayout.astro
+1 -1
View File
@@ -208,7 +208,7 @@ const parentFolder =
.hero-image :global(img) {
width: 100%;
display: block;
box-shadow: var(--shadow);
box-shadow: none;
}
.prose :global(> *:first-child) {
margin-top: 0;
src/pages/index.astro
+11 -11
View File
@@ -214,8 +214,9 @@ const latestDate = (() => {
border: 1px solid var(--accent);
}
.btn-ghost {
border: 1px solid rgb(var(--line));
border: none;
color: rgb(var(--ink));
background: color-mix(in srgb, rgb(var(--code-bg)) 80%, transparent);
}
.metric.linkish {
text-decoration: none;
@@ -224,16 +225,15 @@ const latestDate = (() => {
}
.featured-panel {
padding: 0;
overflow: hidden;
overflow: visible;
}
.featured {
display: block;
padding: 1.1rem 1.15rem;
padding: 0.85rem 0.15rem 1rem;
text-decoration: none;
color: inherit;
background:
radial-gradient(ellipse 90% 80% at 100% 0%, var(--accent-soft), transparent 55%),
rgb(var(--surface-elevated));
background: transparent;
border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 70%, transparent);
}
.featured-top {
display: flex;
@@ -280,15 +280,15 @@ const latestDate = (() => {
display: flex;
justify-content: space-between;
gap: 0.4rem;
padding: 0.6rem 0.7rem;
border: 1px solid rgb(var(--line));
border-radius: 8px;
padding: 0.55rem 0.45rem;
border: none;
border-radius: 6px;
text-decoration: none;
color: inherit;
background: rgb(var(--code-bg));
background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
}
.folder-card:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: inherit;
}
.folder-card-name {
src/pages/posts/folder/[...folder].astro
+5 -5
View File
@@ -141,15 +141,15 @@ const crumbs = folder.split('/').filter(Boolean);
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.75rem;
border: 1px solid rgb(var(--line));
border-radius: 8px;
padding: 0.55rem 0.45rem;
border: none;
border-radius: 6px;
text-decoration: none;
color: inherit;
background: rgb(var(--code-bg));
background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
}
.folder-card:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: inherit;
}
.folder-card-name {
src/pages/posts/index.astro
+5 -5
View File
@@ -107,15 +107,15 @@ const rootEntries = posts.filter((n) => !n.id.includes('/'));
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.75rem;
border: 1px solid rgb(var(--line));
border-radius: 8px;
padding: 0.55rem 0.45rem;
border: none;
border-radius: 6px;
text-decoration: none;
color: inherit;
background: rgb(var(--code-bg));
background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
}
.folder-card:hover {
border-color: var(--accent);
background: var(--accent-soft);
color: inherit;
}
.folder-card-name {
src/pages/tags/index.astro
+3 -3
View File
@@ -125,9 +125,9 @@ const groups = groupTagsByInitial(allStats);
width: 100%;
margin-top: 0.85rem;
padding: 0.55rem 0.75rem;
border: 1px solid rgb(var(--line));
border-radius: 8px;
background: rgb(var(--surface));
border: none;
border-radius: 6px;
background: color-mix(in srgb, rgb(var(--code-bg)) 80%, transparent);
color: rgb(var(--ink));
font: inherit;
}
src/styles/board.css
+11 -9
View File
@@ -28,11 +28,11 @@
}
.panel {
border: 1px solid rgb(var(--line));
border-radius: var(--radius);
background: rgb(var(--surface-elevated));
box-shadow: var(--shadow);
padding: 0.85rem 0.95rem;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0.55rem 0.15rem 0.75rem;
}
.panel-head {
@@ -40,7 +40,9 @@
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.6rem;
margin-bottom: 0.55rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 70%, transparent);
}
.panel-head h2,
@@ -82,8 +84,8 @@
.metric {
padding: 0.5rem 0.55rem;
border-radius: 8px;
background: rgb(var(--code-bg));
border-radius: 6px;
background: color-mix(in srgb, rgb(var(--code-bg)) 70%, transparent);
}
.metric strong {
@@ -139,7 +141,7 @@
}
.dense-list > li + li {
border-top: 1px solid rgb(var(--line));
border-top: 1px solid color-mix(in srgb, rgb(var(--line)) 55%, transparent);
}
.dense-item {
src/styles/global.css
+26 -30
View File
@@ -12,9 +12,10 @@
--surface: 252, 251, 248;
--surface-elevated: 255, 255, 255;
--code-bg: 242, 241, 237;
--shadow: 0 1px 2px rgba(var(--ink), 0.04), 0 8px 24px rgba(var(--ink), 0.05);
--shadow-lift: 0 4px 12px rgba(var(--ink), 0.07), 0 14px 32px rgba(var(--ink), 0.08);
--radius: 10px;
/* 弱化卡片感：阴影默认关闭，仅极少数浮层可用 */
--shadow: none;
--shadow-lift: none;
--radius: 8px;
/* 阅读正文略宽一点；列表/首页用更宽壳，减少大屏两侧空旷 */
--content: 46rem;
--wide: min(72rem, calc(100vw - 3rem));
@@ -38,8 +39,8 @@
--surface: 18, 20, 22;
--surface-elevated: 26, 28, 31;
--code-bg: 34, 37, 42;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
--shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.28);
--shadow: none;
--shadow-lift: none;
}
}
@@ -71,9 +72,16 @@ body {
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
/* 大屏两侧极淡纸纹点缀，避免纯色空白 */
background-image:
radial-gradient(ellipse 42% 28% at 8% 18%, var(--accent-soft), transparent 70%),
radial-gradient(ellipse 36% 24% at 92% 72%, var(--accent-soft), transparent 68%);
background-attachment: fixed;
}
main {
position: relative;
z-index: 1;
width: var(--content);
max-width: 100%;
margin: 0 auto;
@@ -188,8 +196,7 @@ img {
}
.prose img:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
transform: translateY(-1px);
}
hr {
@@ -211,16 +218,10 @@ pre {
border-radius: var(--radius);
overflow-x: auto;
background: rgb(var(--code-bg));
border: 1px solid rgb(var(--line));
border: none;
margin: 0 0 1.2em;
font-size: 0.84em;
line-height: 1.55;
transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
pre:hover {
border-color: color-mix(in srgb, var(--accent) 35%, rgb(var(--line)));
box-shadow: var(--shadow);
}
pre > code {
@@ -293,14 +294,12 @@ blockquote:has(> p:first-child) {
line-height: 1.45;
transition:
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
transform var(--dur-fast) var(--ease-out);
}
.tag:hover {
background: rgba(31, 107, 90, 0.22);
background: color-mix(in srgb, var(--accent) 22%, transparent);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(31, 107, 90, 0.12);
color: var(--accent-dark);
}
@@ -352,30 +351,27 @@ blockquote:has(> p:first-child) {
.card {
display: block;
padding: 0.95rem 1.05rem;
border: 1px solid rgb(var(--line));
border-radius: var(--radius);
background: rgb(var(--surface-elevated));
padding: 0.85rem 0.35rem;
border: none;
border-radius: 6px;
background: transparent;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow);
box-shadow: none;
transition:
border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.card:hover {
border-color: color-mix(in srgb, var(--accent) 55%, rgb(var(--line)));
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
transform: none;
box-shadow: none;
color: inherit;
background: color-mix(in srgb, rgb(var(--surface-elevated)) 92%, var(--accent-soft));
background: var(--accent-soft);
}
.card:active {
transform: translateY(-1px);
transform: none;
transition-duration: var(--dur-fast);
}