fix(notebook): fluid five-col layout that survives zoom
notebook-ci / build-push-deploy (push) Successful in 48s
notebook-ci / build-push-deploy (push) Successful in 48s
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
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+89
-17
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+24
-4
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user