From cfc9c82bfdfaf514fffa8ed04d331506326b349c Mon Sep 17 00:00:00 2001
From: secret-deus <1263403710@qq.com>
Date: Thu, 16 Jul 2026 22:01:35 +0800
Subject: [PATCH] fix(notebook): fluid five-col layout that survives zoom

Drop display:contents flattening that left a empty right side.
Use fr/clamp columns, hide doodles under 1200px, stack under 900px,
zero edge padding on mobile.
---
 src/components/Footer.astro      |   6 ++
 src/components/Header.astro      |  34 ++++++-
 src/components/SideDoodles.astro | 155 ++++++++++++++++---------------
 src/layouts/BaseLayout.astro     |  83 ++++++++++++++++-
 src/pages/index.astro            |  23 +++++
 src/styles/board.css             | 106 +++++++++++++++++----
 src/styles/global.css            |  28 +++++-
 7 files changed, 334 insertions(+), 101 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 9098a39..b98f0f4 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -26,4 +26,10 @@ const year = new Date().getFullYear();
 	footer p {
 		margin: 0.2rem 0;
 	}
+	@media (max-width: 720px) {
+		footer {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index b9ca9f9..a0b052a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -26,7 +26,7 @@ import HeaderLink from './HeaderLink.astro';
 		transition: background var(--dur) var(--ease-out);
 	}
 	nav {
-		width: var(--wide);
+		width: 100%;
 		max-width: 100%;
 		margin: 0 auto;
 		padding: 0 var(--page-pad-x);
@@ -35,6 +35,7 @@ import HeaderLink from './HeaderLink.astro';
 		justify-content: space-between;
 		gap: 1rem;
 		min-height: 3.1rem;
+		box-sizing: border-box;
 	}
 	.brand {
 		font-weight: 700;
@@ -97,5 +98,36 @@ import HeaderLink from './HeaderLink.astro';
 		font-weight: 700;
 		background: var(--accent-soft);
 	}
+
+	@media (max-width: 720px) {
+		nav {
+			min-height: 2.85rem;
+			gap: 0.45rem;
+			padding-left: 0;
+			padding-right: 0;
+		}
+		.brand {
+			font-size: 0.92em;
+			flex-shrink: 0;
+			max-width: 42%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.links {
+			gap: 0;
+			flex: 1;
+			justify-content: flex-end;
+			min-width: 0;
+		}
+		.links :global(a) {
+			padding: 0.35rem 0.4rem;
+			font-size: 0.82em;
+		}
+		.links :global(a::after) {
+			left: 0.4rem;
+			right: 0.4rem;
+		}
+	}
 </style>
 
diff --git a/src/components/SideDoodles.astro b/src/components/SideDoodles.astro
index af4faea..9f88a64 100644
--- a/src/components/SideDoodles.astro
+++ b/src/components/SideDoodles.astro
@@ -1,12 +1,18 @@
 ---
 /**
- * 大屏两侧随性手绘：物理公式 / 曲线。
- * 摆放与角度在客户端随机，每次刷新略有不同。
+ * 五列布局的左右图案列：物理公式 / 曲线涂鸦。
+ * rail=left|right；角度随机；无分界线。
  */
+interface Props {
+	rail?: 'left' | 'right';
+}
+const { rail = 'left' } = Astro.props;
 ---
 
-<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">
+<aside class={`doodle-rail doodle-${rail}`} aria-hidden="true" data-rail={rail}>
+	{rail === 'left' ? (
+		<>
+<svg class="doodle-svg" 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>
@@ -166,8 +172,10 @@
 			<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">
+		</>
+	) : (
+		<>
+<svg class="doodle-svg" 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
@@ -316,37 +324,33 @@
 			<text class="eq" x="8" y="40" font-size="12">F = dp/dt</text>
 		</g>
 	</svg>
-</div>
+		</>
+	)}
+</aside>
 
 <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)}%`);
+		document.querySelectorAll('.doodle-rail').forEach((root) => {
+			const pieces = root.querySelectorAll('.piece');
+			pieces.forEach((g) => {
+				const baseX = Number(g.getAttribute('data-x') || 0);
+				const baseY = Number(g.getAttribute('data-y') || 0);
+				const angle = (Math.random() * 40 - 20) * (Math.random() < 0.15 ? 1.35 : 1);
+				const jx = Math.random() * 18 - 9;
+				const jy = Math.random() * 14 - 7;
+				const op = 0.78 + Math.random() * 0.22;
+				g.setAttribute(
+					'transform',
+					`translate(${(baseX + jx).toFixed(1)}, ${(baseY + jy).toFixed(1)}) rotate(${angle.toFixed(1)})`,
+				);
+				g.style.opacity = String(op.toFixed(2));
+			});
+			const svg = root.querySelector('.doodle-svg');
+			if (svg) {
+				const side = root.getAttribute('data-rail') === 'left' ? -1 : 1;
+				const tilt = (Math.random() * 4 - 2) * side;
+				svg.style.setProperty('--tilt', `${tilt.toFixed(2)}deg`);
+			}
 		});
 	}
 
@@ -355,77 +359,76 @@
 </script>
 
 <style>
-	.side-doodles {
-		display: none;
+	.doodle-rail {
+		position: sticky;
+		top: 3.6rem;
+		align-self: start;
+		min-width: 0;
+		width: 100%;
+		max-width: 100%;
+		max-height: calc(100vh - 4.5rem);
+		overflow: hidden;
 		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));
+		border: none;
+		box-shadow: none;
+		background: transparent;
 		color: var(--accent);
-		opacity: 0.17;
+		opacity: 0.42;
 		z-index: 0;
+		box-sizing: border-box;
 	}
 
-	.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));
+	.doodle-svg {
+		display: block;
+		width: 100%;
+		height: auto;
+		max-width: 100%;
+		max-height: calc(100vh - 4.5rem);
+		transform: rotate(var(--tilt, 0deg));
+		transform-origin: 50% 20%;
 	}
 
 	.eq {
 		fill: currentColor;
 		font-family: 'Segoe UI', 'Cambria Math', Georgia, 'Times New Roman', serif;
 		font-style: italic;
-		font-weight: 500;
+		font-weight: 600;
 		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;
+		font-weight: 500;
+		opacity: 0.9;
 	}
 
 	.piece {
-		opacity: 0.9;
-		transform-box: fill-box;
-		transform-origin: center;
+		opacity: 0.95;
 	}
 
-	@media (min-width: 1600px) {
-		.doodle {
-			opacity: 0.21;
-			width: clamp(118px, 10vw, 168px);
+	@media (min-width: 1400px) {
+		.doodle-rail {
+			opacity: 0.48;
+		}
+	}
+
+	/* 中窄屏：藏图案，把宽度让给内容 */
+	@media (max-width: 1200px) {
+		.doodle-rail {
+			display: none !important;
 		}
 	}
 
 	@media (prefers-color-scheme: dark) {
-		.doodle {
-			opacity: 0.19;
+		.doodle-rail {
 			color: var(--accent-dark);
+			opacity: 0.46;
 		}
-
-		@media (min-width: 1600px) {
-			.doodle {
-				opacity: 0.24;
+		@media (min-width: 1400px) {
+			.doodle-rail {
+				opacity: 0.52;
 			}
 		}
 	}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 04eb706..bd752ff 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -20,20 +20,97 @@ const { title, description = '', wide = false } = Astro.props;
 		<BaseHead title={title} description={description} />
 	</head>
 	<body>
-		<SideDoodles />
 		<Header />
 		<main class:list={[{ wide, boarded: wide }]}>
-			<slot />
+			{
+				wide ? (
+					<div class="layout-5">
+						<SideDoodles rail="left" />
+						<div class="layout-5-center">
+							<slot />
+						</div>
+						<SideDoodles rail="right" />
+					</div>
+				) : (
+					<slot />
+				)
+			}
 		</main>
 		<Footer />
 	</body>
 </html>
 
 <style>
+	/*
+	 * 流体壳：任意缩放 / 开 DevTools 都能铺满。
+	 * 不用 display:contents，避免列错位与右侧大空白。
+	 */
 	main.boarded {
-		width: min(1180px, 100%);
+		width: 100%;
 		max-width: 100%;
+		box-sizing: border-box;
 		padding-left: var(--page-pad-x);
 		padding-right: var(--page-pad-x);
 	}
+
+	.layout-5 {
+		display: grid;
+		/* 图案 | 内容 | 图案 —— 中间永远吃满剩余宽度 */
+		grid-template-columns:
+			minmax(0, clamp(4.5rem, 9vw, 9rem))
+			minmax(0, 1fr)
+			minmax(0, clamp(4.5rem, 9vw, 9rem));
+		column-gap: clamp(0.4rem, 1.4vw, 1.15rem);
+		row-gap: 0;
+		align-items: start;
+		width: 100%;
+		max-width: 100%;
+		box-sizing: border-box;
+		border: none;
+		background: transparent;
+	}
+
+	.layout-5 > :global(*) {
+		min-width: 0;
+		max-width: 100%;
+	}
+
+	.layout-5-center {
+		min-width: 0;
+		width: 100%;
+		max-width: 100%;
+	}
+
+	/* 中等宽度：先收起图案，保三/两内容列可读 */
+	@media (max-width: 1200px) {
+		.layout-5 {
+			grid-template-columns: minmax(0, 1fr);
+			column-gap: 0;
+		}
+
+		.layout-5 :global(.doodle-rail) {
+			display: none !important;
+		}
+	}
+
+	/* 窄屏：内容区已是单列（board.css），这里只保证壳层不挡 */
+	@media (max-width: 900px) {
+		.layout-5 {
+			display: block;
+			width: 100%;
+		}
+
+		.layout-5-center {
+			display: block;
+			width: 100%;
+		}
+	}
+
+	/* 手机：左右贴边归零 */
+	@media (max-width: 720px) {
+		main.boarded {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1062bea..ff06e11 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -317,4 +317,27 @@ const latestDate = (() => {
 			color: #0b1a16;
 		}
 	}
+
+	@media (max-width: 720px) {
+		.site-name {
+			font-size: 1.28rem;
+		}
+		.folder-cards {
+			grid-template-columns: 1fr 1fr;
+			gap: 0.4rem;
+		}
+		.folder-card {
+			padding: 0.5rem 0.4rem;
+		}
+		.featured h2 {
+			font-size: 1.08rem;
+		}
+		.cta-row {
+			gap: 0.4rem;
+		}
+		.btn {
+			padding: 0.4rem 0.75rem;
+			font-size: 0.82rem;
+		}
+	}
 </style>
diff --git a/src/styles/board.css b/src/styles/board.css
index 25a216b..2f89bdf 100644
--- a/src/styles/board.css
+++ b/src/styles/board.css
@@ -1,30 +1,45 @@
-/* 全站信息板：用侧栏模块填内容，不是拉宽留白 */
+/* 信息板：流体比例列，任意缩放铺满；无分界线；不依赖 display:contents */
 
 .page-board {
 	display: grid;
-	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
-	gap: 0.9rem;
+	/* 主 + 右 */
+	grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
+	gap: clamp(0.5rem, 1.5vw, 1rem);
 	align-items: start;
-	width: min(1180px, 100%);
-	margin: 0 auto;
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	border: none;
+	box-sizing: border-box;
 }
 
 .page-board.with-left {
-	grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) minmax(240px, 300px);
+	/* 左 | 主 | 右 —— 全 fr，缩放时按比例伸缩 */
+	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.55fr) minmax(0, 0.95fr);
 }
 
-/* 首页也是三栏但中间更宽 */
+/* 首页：主栏略宽 */
 .page-board.home-board {
-	grid-template-columns: minmax(200px, 260px) minmax(0, 1.25fr) minmax(230px, 280px);
+	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr) minmax(0, 0.9fr);
+}
+
+.page-board > * {
+	min-width: 0;
+	max-width: 100%;
 }
 
 .page-board .board-main,
 .page-board .board-side,
 .page-board .board-left {
 	min-width: 0;
+	width: 100%;
+	max-width: 100%;
 	display: flex;
 	flex-direction: column;
 	gap: 0.75rem;
+	border: none;
+	box-shadow: none;
+	box-sizing: border-box;
 }
 
 .panel {
@@ -246,43 +261,95 @@
 	color: rgb(var(--muted));
 }
 
-/* 正文页：主栏阅读 + 右侧信息 */
+/* 正文页：主 + 侧，流体比例 */
 .prose-board {
 	display: grid;
-	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
-	gap: 1rem;
+	grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
+	gap: clamp(0.5rem, 1.5vw, 1.1rem);
 	align-items: start;
-	width: min(1120px, 100%);
-	margin: 0 auto;
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	border: none;
+	box-sizing: border-box;
+}
+
+.prose-board > * {
+	min-width: 0;
+	max-width: 100%;
 }
 
 .prose-board .article {
 	min-width: 0;
-	max-width: 46rem;
+	width: 100%;
+	max-width: none;
+	border: none;
 }
 
 .prose-board .board-side {
 	position: sticky;
 	top: 4rem;
+	border: none;
+	width: 100%;
 }
 
-@media (max-width: 960px) {
+/* 窄于约 900px 或高缩放：单列，主内容优先 */
+@media (max-width: 900px) {
 	.page-board,
 	.page-board.with-left,
+	.page-board.home-board,
 	.prose-board {
-		grid-template-columns: 1fr;
+		display: flex;
+		flex-direction: column;
+		grid-template-columns: none;
+		width: 100%;
+		max-width: 100%;
+		gap: 0.85rem;
+	}
+
+	.page-board .board-main,
+	.page-board .board-side,
+	.page-board .board-left,
+	.prose-board .article,
+	.prose-board .board-side {
+		width: 100%;
+		min-width: 0;
+		max-width: none;
+		flex: none;
 	}
 
 	.prose-board .board-side {
 		position: static;
 	}
 
+	.page-board .board-main,
 	.prose-board .article {
-		max-width: none;
+		order: 1;
+	}
+	.page-board .board-left {
+		order: 2;
+	}
+	.page-board .board-side,
+	.prose-board .board-side {
+		order: 3;
 	}
 }
 
 @media (max-width: 720px) {
+	.page-board,
+	.page-board.with-left,
+	.prose-board {
+		gap: 0.65rem;
+	}
+
+	.panel {
+		padding: 0.4rem 0 0.55rem;
+	}
+
+	.metric-grid {
+		grid-template-columns: 1fr 1fr;
+	}
+
 	.dense-item {
 		grid-template-columns: 1fr;
 		gap: 0.2rem;
@@ -292,5 +359,10 @@
 		flex-direction: row;
 		align-items: center;
 		gap: 0.45rem;
+		flex-wrap: wrap;
+	}
+
+	.dense-title {
+		font-size: 0.95rem;
 	}
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index 62a9b5a..2597435 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -17,9 +17,10 @@
 	--shadow-lift: none;
 	--radius: 8px;
 	/* 阅读正文略宽一点；列表/首页用更宽壳，减少大屏两侧空旷 */
-	--content: 46rem;
-	--wide: min(72rem, calc(100vw - 3rem));
-	--page-pad-x: clamp(1rem, 3vw, 2rem);
+	--content: min(46rem, 100%);
+	/* 宽页铺满可用宽度，缩放时跟视口走 */
+	--wide: 100%;
+	--page-pad-x: clamp(0.75rem, 2vw, 1.75rem);
 
 	/* 动效节奏：短、稳、不抢戏 */
 	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
@@ -86,6 +87,7 @@ main {
 	max-width: 100%;
 	margin: 0 auto;
 	padding: 2rem var(--page-pad-x) 3.5rem;
+	box-sizing: border-box;
 	/* 页面进入 */
 	animation: page-in var(--dur-slow) var(--ease-out) both;
 }
@@ -455,11 +457,29 @@ blockquote:has(> p:first-child) {
 }
 
 @media (max-width: 720px) {
+	:root {
+		--page-pad-x: 0;
+	}
 	body {
 		font-size: 14.5px;
 	}
+	/* 手机端左右贴边归零 */
 	main {
-		padding: 1.35rem 0 2.75rem;
+		padding: 1.15rem 0 2.5rem;
+	}
+	main.wide {
+		width: 100%;
+	}
+	h1 {
+		font-size: 1.28rem;
+	}
+	pre {
+		font-size: 0.8em;
+		padding: 0.75rem 0.8rem;
+		max-width: 100%;
+	}
+	.tag-row {
+		gap: 0.3rem;
 	}
 }