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

fix(notebook): fluid five-col layout that survives zoom
notebook-ci / build-push-deploy (push) Successful in 48s
Details

Browse Source 
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.
This commit is contained in:
secret-deus
2026-07-16 22:01:35 +08:00
parent 15cdabb647
commit cfc9c82bfd
7 changed files with 334 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+6
View File
@@ -26,4 +26,10 @@ const year = new Date().getFullYear();
footer p { footer p {
margin: 0.2rem 0; margin: 0.2rem 0;
} }
@media (max-width: 720px) {
footer {
padding-left: 0;
padding-right: 0;
}
}
</style> </style>
src/components/Header.astro
+33 -1
View File
@@ -26,7 +26,7 @@ import HeaderLink from './HeaderLink.astro';
transition: background var(--dur) var(--ease-out); transition: background var(--dur) var(--ease-out);
} }
nav { nav {
width: var(--wide); width: 100%;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 0 var(--page-pad-x); padding: 0 var(--page-pad-x);
@@ -35,6 +35,7 @@ import HeaderLink from './HeaderLink.astro';
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1rem;
min-height: 3.1rem; min-height: 3.1rem;
box-sizing: border-box;
} }
.brand { .brand {
font-weight: 700; font-weight: 700;
@@ -97,5 +98,36 @@ import HeaderLink from './HeaderLink.astro';
font-weight: 700; font-weight: 700;
background: var(--accent-soft); 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> </style>
src/components/SideDoodles.astro
+79 -76
View File
@@ -1,12 +1,18 @@
--- ---
/** /**
* 大屏两侧随性手绘：物理公式 / 曲线。 * 五列布局的左右图案列：物理公式 / 曲线涂鸦。
* 摆放与角度在客户端随机，每次刷新略有不同。 * rail=left|right；角度随机；无分界线。
*/ */
interface Props {
rail?: 'left' | 'right';
}
const { rail = 'left' } = Astro.props;
--- ---
<div class="side-doodles" aria-hidden="true"> <aside class={`doodle-rail doodle-${rail}`} aria-hidden="true" data-rail={rail}>
<svg class="doodle left-stack" viewBox="0 0 170 920" fill="none" xmlns="http://www.w3.org/2000/svg"> {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"> <g class="piece" data-x="2" data-y="8">
<text class="eq" x="2" y="26" font-size="13">iℏ ∂ψ/∂t = Ĥψ</text> <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> <circle cx="118" cy="14" r="1.2" stroke="currentColor" stroke-width="1" opacity="0.45"></circle>
</g> </g>
</svg> </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 --> <!-- Lissajous -->
<g class="piece" data-x="10" data-y="4"> <g class="piece" data-x="10" data-y="4">
<path <path
@@ -316,37 +324,33 @@
<text class="eq" x="8" y="40" font-size="12">F = dp/dt</text> <text class="eq" x="8" y="40" font-size="12">F = dp/dt</text>
</g> </g>
</svg> </svg>
</div> </>
)}
</aside>
<script> <script>
function scatterDoodles() { function scatterDoodles() {
const root = document.querySelector('.side-doodles'); document.querySelectorAll('.doodle-rail').forEach((root) => {
if (!root) return; const pieces = root.querySelectorAll('.piece');
pieces.forEach((g) => {
const pieces = root.querySelectorAll('.piece'); const baseX = Number(g.getAttribute('data-x') || 0);
pieces.forEach((g) => { const baseY = Number(g.getAttribute('data-y') || 0);
const baseX = Number(g.getAttribute('data-x') || 0); const angle = (Math.random() * 40 - 20) * (Math.random() < 0.15 ? 1.35 : 1);
const baseY = Number(g.getAttribute('data-y') || 0); const jx = Math.random() * 18 - 9;
// 角度：大约 ±20°，偶尔更大一点 const jy = Math.random() * 14 - 7;
const angle = (Math.random() * 40 - 20) * (Math.random() < 0.15 ? 1.35 : 1); const op = 0.78 + Math.random() * 0.22;
// 位移抖动 g.setAttribute(
const jx = Math.random() * 22 - 11; 'transform',
const jy = Math.random() * 18 - 9; `translate(${(baseX + jx).toFixed(1)}, ${(baseY + jy).toFixed(1)}) rotate(${angle.toFixed(1)})`,
const op = 0.72 + Math.random() * 0.28; );
g.style.opacity = String(op.toFixed(2));
g.setAttribute( });
'transform', const svg = root.querySelector('.doodle-svg');
`translate(${(baseX + jx).toFixed(1)}, ${(baseY + jy).toFixed(1)}) rotate(${angle.toFixed(1)})`, if (svg) {
); const side = root.getAttribute('data-rail') === 'left' ? -1 : 1;
g.style.opacity = String(op.toFixed(2)); const tilt = (Math.random() * 4 - 2) * side;
}); svg.style.setProperty('--tilt', `${tilt.toFixed(2)}deg`);
}
// 整侧栏也略微随机歪一点
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)}%`);
}); });
} }
@@ -355,77 +359,76 @@
</script> </script>
<style> <style>
.side-doodles { .doodle-rail {
display: none; 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; pointer-events: none;
user-select: none; user-select: none;
} border: none;
box-shadow: none;
@media (min-width: 1280px) { background: transparent;
.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); color: var(--accent);
opacity: 0.17; opacity: 0.42;
z-index: 0; z-index: 0;
box-sizing: border-box;
} }
.left-stack { .doodle-svg {
left: max(0.2rem, calc((100vw - min(72rem, 100vw)) / 2 - 8.6rem)); display: block;
} width: 100%;
height: auto;
.right-stack { max-width: 100%;
right: max(0.2rem, calc((100vw - min(72rem, 100vw)) / 2 - 8.6rem)); max-height: calc(100vh - 4.5rem);
transform: rotate(var(--tilt, 0deg));
transform-origin: 50% 20%;
} }
.eq { .eq {
fill: currentColor; fill: currentColor;
font-family: 'Segoe UI', 'Cambria Math', Georgia, 'Times New Roman', serif; font-family: 'Segoe UI', 'Cambria Math', Georgia, 'Times New Roman', serif;
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 600;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.eq.scrawl { .eq.scrawl {
font-family: 'Segoe UI', 'Comic Sans MS', 'Bradley Hand', cursive, sans-serif; font-family: 'Segoe UI', 'Comic Sans MS', 'Bradley Hand', cursive, sans-serif;
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 500;
opacity: 0.85; opacity: 0.9;
letter-spacing: 0.01em;
} }
.piece { .piece {
opacity: 0.9; opacity: 0.95;
transform-box: fill-box;
transform-origin: center;
} }
@media (min-width: 1600px) { @media (min-width: 1400px) {
.doodle { .doodle-rail {
opacity: 0.21; opacity: 0.48;
width: clamp(118px, 10vw, 168px); }
}
/* 中窄屏：藏图案，把宽度让给内容 */
@media (max-width: 1200px) {
.doodle-rail {
display: none !important;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.doodle { .doodle-rail {
opacity: 0.19;
color: var(--accent-dark); color: var(--accent-dark);
opacity: 0.46;
} }
@media (min-width: 1400px) {
@media (min-width: 1600px) { .doodle-rail {
.doodle { opacity: 0.52;
opacity: 0.24;
} }
} }
} }
src/layouts/BaseLayout.astro
+80 -3
View File
@@ -20,20 +20,97 @@ const { title, description = '', wide = false } = Astro.props;
<BaseHead title={title} description={description} /> <BaseHead title={title} description={description} />
</head> </head>
<body> <body>
<SideDoodles />
<Header /> <Header />
<main class:list={[{ wide, boarded: wide }]}> <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> </main>
<Footer /> <Footer />
</body> </body>
</html> </html>
<style> <style>
/*
* 流体壳：任意缩放 / 开 DevTools 都能铺满。
* 不用 display:contents，避免列错位与右侧大空白。
*/
main.boarded { main.boarded {
width: min(1180px, 100%); width: 100%;
max-width: 100%; max-width: 100%;
box-sizing: border-box;
padding-left: var(--page-pad-x); padding-left: var(--page-pad-x);
padding-right: 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> </style>
src/pages/index.astro
+23
View File
@@ -317,4 +317,27 @@ const latestDate = (() => {
color: #0b1a16; 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> </style>
src/styles/board.css
+89 -17
View File
@@ -1,30 +1,45 @@
/* 全站信息板：用侧栏模块填内容，不是拉宽留白 */ /* 信息板：流体比例列，任意缩放铺满；无分界线；不依赖 display:contents */
.page-board { .page-board {
display: grid; 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; align-items: start;
width: min(1180px, 100%); width: 100%;
margin: 0 auto; max-width: 100%;
margin: 0;
border: none;
box-sizing: border-box;
} }
.page-board.with-left { .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 { .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-main,
.page-board .board-side, .page-board .board-side,
.page-board .board-left { .page-board .board-left {
min-width: 0; min-width: 0;
width: 100%;
max-width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
border: none;
box-shadow: none;
box-sizing: border-box;
} }
.panel { .panel {
@@ -246,43 +261,95 @@
color: rgb(var(--muted)); color: rgb(var(--muted));
} }
/* 正文页：主栏阅读 + 右侧信息 */ /* 正文页：主 + 侧，流体比例 */
.prose-board { .prose-board {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
gap: 1rem; gap: clamp(0.5rem, 1.5vw, 1.1rem);
align-items: start; align-items: start;
width: min(1120px, 100%); width: 100%;
margin: 0 auto; max-width: 100%;
margin: 0;
border: none;
box-sizing: border-box;
}
.prose-board > * {
min-width: 0;
max-width: 100%;
} }
.prose-board .article { .prose-board .article {
min-width: 0; min-width: 0;
max-width: 46rem; width: 100%;
max-width: none;
border: none;
} }
.prose-board .board-side { .prose-board .board-side {
position: sticky; position: sticky;
top: 4rem; top: 4rem;
border: none;
width: 100%;
} }
@media (max-width: 960px) { /* 窄于约 900px 或高缩放：单列，主内容优先 */
@media (max-width: 900px) {
.page-board, .page-board,
.page-board.with-left, .page-board.with-left,
.page-board.home-board,
.prose-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 { .prose-board .board-side {
position: static; position: static;
} }
.page-board .board-main,
.prose-board .article { .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) { @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 { .dense-item {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 0.2rem; gap: 0.2rem;
@@ -292,5 +359,10 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.45rem; gap: 0.45rem;
flex-wrap: wrap;
}
.dense-title {
font-size: 0.95rem;
} }
} }
src/styles/global.css
+24 -4
View File
@@ -17,9 +17,10 @@
--shadow-lift: none; --shadow-lift: none;
--radius: 8px; --radius: 8px;
/* 阅读正文略宽一点；列表/首页用更宽壳，减少大屏两侧空旷 */ /* 阅读正文略宽一点；列表/首页用更宽壳，减少大屏两侧空旷 */
--content: 46rem; --content: min(46rem, 100%);
--wide: min(72rem, calc(100vw - 3rem)); /* 宽页铺满可用宽度，缩放时跟视口走 */
--page-pad-x: clamp(1rem, 3vw, 2rem); --wide: 100%;
--page-pad-x: clamp(0.75rem, 2vw, 1.75rem);
/* 动效节奏：短、稳、不抢戏 */ /* 动效节奏：短、稳、不抢戏 */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
@@ -86,6 +87,7 @@ main {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2rem var(--page-pad-x) 3.5rem; padding: 2rem var(--page-pad-x) 3.5rem;
box-sizing: border-box;
/* 页面进入 */ /* 页面进入 */
animation: page-in var(--dur-slow) var(--ease-out) both; animation: page-in var(--dur-slow) var(--ease-out) both;
} }
@@ -455,11 +457,29 @@ blockquote:has(> p:first-child) {
} }
@media (max-width: 720px) { @media (max-width: 720px) {
:root {
--page-pad-x: 0;
}
body { body {
font-size: 14.5px; font-size: 14.5px;
} }
/* 手机端左右贴边归零 */
main { 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;
} }
} }