/* ============================================================ Eggshell-gray paper / ink text / cinnabar seal accents / narrow airy column 650px 单栏 + 自托管衬线 ============================================================ */ :root { color-scheme: light; /* 原生控件与滚动条跟随主题（暗色时见下方覆盖） */ --paper: #f4f3ef; /* Sketch paper: cool-toned eggshell gray */ --ink: #2d2b28; /* Ink: warm gray-black, not pure black */ --ink-soft: #6e6a63; /* Secondary text: dates, footer */ --cinnabar: #a6392e; /* Cinnabar: seal red */ --hairline: #dcd8d0; /* Thin divider lines */ --code-bg: #eceae4; /* Code blocks: half a shade darker than the paper */ /* Paper grain: SVG noise, faint dark speckle in light mode */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); --c-kw:#a6392e; --c-str:#7a6a2f; --c-com:#95907f; --c-fun:#3e5f8a; --c-num:#6c4f9e; --c-typ:#8c5a2e; --mono: "SF Mono", Menlo, Consolas, "Sarasa Mono SC", "JetBrains Mono", ui-monospace, monospace; } /* 暗色由 内联脚本 + 切换按钮控制（系统偏好在脚本里读取） */ [data-theme="dark"] { color-scheme: dark; --paper: #242220; /* Night paper: warm gray-black */ --ink: #d8d4cb; --ink-soft: #8f8a80; --cinnabar: #cf6a58; /* Cinnabar brightened one step */ --hairline: #3b3833; --code-bg: #2e2b28; /* Switch to faint light speckle so grain stays visible on a dark base */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); --c-kw:#cf6a58; --c-str:#c2b37a; --c-com:#7e786c; --c-fun:#8fafd3; --c-num:#b39bd8; --c-typ:#c99a6b; } /* ---------- 自托管 Noto Serif SC 子集（SIL OFL，见 fonts/LICENSE.txt） 解决 Windows 无衬线中文字体缺失、衬线回退宋体发虚的问题。 只带 400/700 两档：CSS 里的 600 按字重匹配规则落到 700，省一个 ~400KB 文件 ---------- */ @font-face { font-family: "Noto Serif SC"; font-weight: 400; font-display: optional; src: url("fonts/NotoSerifSC-400.woff2?v=b4eb2d7b") format("woff2"); } @font-face { font-family: "Noto Serif SC"; font-weight: 700; font-display: optional; src: url("fonts/NotoSerifSC-700.woff2?v=35d03724") format("woff2"); } /* ---------- Base typography: narrow, airy column ---------- */ * { box-sizing: border-box; } /* 锚点/目录跳转平滑滚动，与目录滑动标记的动画节奏一致（reduced-motion 时关闭）。 scrollbar-gutter 常驻占位：浮层锁滚动时滚动条消失不再引起整页水平位移 */ html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; } /* 同源换页交叉淡化：支持 View Transitions 的浏览器生效，其余静默忽略 */ @view-transition { navigation: auto; } body { background-color: var(--paper); background-image: var(--grain); /* Overlay the paper grain texture */ color: var(--ink); font-family: "Noto Serif SC", Georgia, "Iowan Old Style", "Source Han Serif SC", "Songti SC", SimSun, serif; font-size: 1.125rem; line-height: 1.9; max-width: 650px; margin: 0 auto; padding: 2.5rem 1.5rem 2rem; /* 页脚贴住视口底：短页（关于等）不再悬空 */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; /* Long URLs / words won't break the narrow layout */ -webkit-text-size-adjust: 100%; /* Prevent font inflation on mobile landscape */ transition: background-color .3s ease, color .3s ease; } main { flex: 1 0 auto; width: 100%; } /* body 变 flex 容器后 main 成为 BFC，首元素外边距不再与页头合并——显式归零， 保持各页正文起点与改造前一致（切页零抖动） */ main > :first-child, main > :first-child > :first-child { margin-top: 0; } p { margin: 1.4em 0; } ::selection { background: rgba(166, 57, 46, .18); } [data-theme="dark"] ::selection { background: rgba(207, 106, 88, .3); } time { font-variant-numeric: tabular-nums; } .skip { position: fixed; top: -48px; left: 16px; z-index: 99; background: var(--cinnabar); color: #fff; padding: 8px 15px; border-radius: 0 0 8px 8px; font-size: .8rem; transition: top .2s; text-decoration: none; } .skip:focus { top: 0; } a:focus-visible, button:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; } /* ---------- Blog title: a cinnabar seal as the signature ---------- */ /* 页头：参考站式堆叠——站名在上（顶距继承 h1 的 2.2em），导航在下 */ .title h1, .title .site { font-size: 1.5rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; color: var(--ink); display: inline-block; /* 页头间距是设计值而非继承正文标题的 2.2em 节奏：顶部总空白约 64px。 h1（首页）与 .site（副页

）同一条规则，保证切页零抖动 */ margin: 1em 0 0.6em; } .title h1 a, .title h1 a:visited, .title .site a, .title .site a:visited { color: inherit; text-decoration: none; } /* ---------- Nav: small quiet text, no divider ---------- */ header nav { font-size: 0.9rem; letter-spacing: 0.05em; margin: 0 0 2.5rem; display: flex; align-items: center; gap: 1.2em; flex-wrap: wrap; } header nav a { color: var(--ink-soft); text-decoration: none; } header nav a:hover { color: var(--cinnabar); } header nav a.active { color: var(--ink); } /* ---------- Heading hierarchy: distinguished by size and weight ---------- */ h1, h2, h3, h4 { line-height: 1.5; letter-spacing: 0.02em; margin-top: 2.2em; margin-bottom: 0.6em; } h1 { font-size: 1.6rem; font-weight: 700; } h2 { font-size: 1.3rem; font-weight: 600; } h3 { font-size: 1.05rem; font-weight: 600; } /* ---------- Links: thin cinnabar underline ---------- */ a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cinnabar); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--cinnabar); } /* 触控按压反馈：即时透明度变化（无过渡，按下立刻反馈） */ a:active, button:active { opacity: .55; } /* ---------- Post list: alignment as separation — two columns and whitespace, no divider lines ---------- */ .blog-posts { list-style: none; padding: 0; margin: 0; } .blog-posts li { display: flex; align-items: baseline; gap: 1.2em; padding: 0.3em 0; } /* 分类筛选靠 JS 设 hidden 属性隐藏行;作者样式的 display:flex 会压过 浏览器默认的 [hidden]{display:none},必须显式补一条 */ .blog-posts li[hidden] { display: none; } /* Fixed-width dates form a tidy left column; titles align into the right column 浅色 + 斜体，与参考站列表日期一致 */ .blog-posts li span { flex-shrink: 0; min-width: 6.5em; font-size: 0.85rem; color: var(--ink-soft); font-style: italic; font-variant-numeric: tabular-nums; } .blog-posts li a { text-decoration: none; } .blog-posts li a:hover { color: var(--cinnabar); } /* 归档行尾的分类标记（站点扩展） */ .blog-posts li .cat { margin-left: auto; min-width: 0; font-size: 0.78rem; } /* ---------- Tags: no underline, quiet gray text ---------- */ .tags a, .art-tags .tag { text-decoration: none; color: var(--ink-soft); font-size: 0.85rem; } .tags a:hover { color: var(--cinnabar); } .art-tags { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 2em; } /* ---------- Blockquote: cinnabar left rule ---------- */ blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 2px solid var(--cinnabar); color: var(--ink-soft); } /* ---------- Horizontal rule ---------- */ hr { border: none; border-top: 1px solid var(--hairline); margin: 2.5em auto; width: 60%; } /* ---------- Code ---------- */ .highlight, .code, pre, code { font-family: var(--mono); font-size: 0.88em; background: var(--code-bg); border-radius: 3px; } code { padding: 0.15em 0.4em; } pre { padding: 1em 1.2em; overflow-x: auto; line-height: 1.7; border: 1px solid var(--hairline); } pre code { padding: 0; background: none; } /* pandoc skylighting -> 主题色系语法高亮（站点扩展） */ div.sourceCode { background: var(--code-bg); border-radius: 3px; margin: 1.4em 0; } div.sourceCode pre { margin: 0; } .sourceCode .kw, .sourceCode .cf, .sourceCode .im { color: var(--c-kw); } .sourceCode .st, .sourceCode .vs, .sourceCode .ss { color: var(--c-str); } .sourceCode .co, .sourceCode .do { color: var(--c-com); } .sourceCode .fu, .sourceCode .ex { color: var(--c-fun); } .sourceCode .dt, .sourceCode .bu { color: var(--c-typ); } .sourceCode .dv, .sourceCode .fl { color: var(--c-num); } /* ---------- Images and tables ---------- */ img { max-width: 100%; border-radius: 2px; } table { border-collapse: collapse; width: 100%; font-size: 0.95em; } th, td { padding: 0.5em 0.8em; border-bottom: 1px solid var(--hairline); text-align: left; } th { font-weight: 600; border-bottom-width: 2px; } /* ---------- Sub-headings: gray # prefix in article body ---------- */ .prose h2::before, .prose h3::before { content: "# "; color: var(--ink-soft); opacity: 0.6; font-weight: 400; } /* ---------- Post page: date under the title ---------- */ time { font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.03em; } /* ---------- Inputs and buttons ---------- */ input[type="text"], input[type="search"], input[type="email"] { font-family: inherit; font-size: 0.95rem; color: var(--ink); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; padding: 0.5em 0.9em; width: 100%; max-width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.15s ease; -webkit-appearance: none; } input::placeholder { color: var(--ink-soft); opacity: 0.7; } input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus { border-color: var(--cinnabar); } button, input[type="submit"] { font-family: inherit; font-size: 0.9rem; letter-spacing: 0.03em; color: var(--ink-soft); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; padding: 0.45em 1.2em; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } button:hover, input[type="submit"]:hover { color: var(--cinnabar); border-color: var(--cinnabar); } /* ---------- Footer ---------- */ footer { margin-top: 4rem; /* 间距刻度：线上 64 / 线下 24 / 行间 12 */ padding-top: 1.5rem; border-top: 1px solid var(--hairline); font-size: 0.8rem; /* 页脚只用两档字号：0.8 与 0.75（.up 为 mono 光学补偿 0.72） */ color: var(--ink-soft); } footer a { color: var(--ink-soft); } /* ============================================================ 以下为「工作记录」站点扩展（沿用主题的设计语言） ============================================================ */ /* 页头主题切换钮：无边框纯图标，日月交叉淡化 + 微旋转（reduced-motion 全局关闭过渡） */ .theme-btn { border: none; background: none; padding: 0.3em 0.4em; display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--ink-soft); } .theme-btn:hover { border: none; color: var(--cinnabar); } .theme-btn svg { width: 15px; height: 15px; transition: opacity .25s ease, transform .25s ease; } .theme-btn .moon { position: absolute; inset: 0; margin: auto; opacity: 0; transform: rotate(-45deg) scale(.6); } [data-theme="dark"] .theme-btn .sun { opacity: 0; transform: rotate(45deg) scale(.6); } [data-theme="dark"] .theme-btn .moon { opacity: 1; transform: none; } /* 首页区块标题与「查看全部」 */ main section { margin-top: 2.4em; } main section > h2 { margin-top: 0; } .sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; } .sec-row h2 { margin: 0; } .sec-more { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; flex: none; } .sec-more:hover { color: var(--cinnabar); } .intro p strong { letter-spacing: 0.02em; } /* 随机文章「换一批」：文字链样式的按钮，无 JS 时隐藏 */ .shuffle { display: none; border: none; background: none; padding: 0; font-size: 0.85rem; color: var(--ink-soft); align-items: center; gap: 5px; flex: none; } .js .shuffle { display: inline-flex; } .shuffle:hover { color: var(--cinnabar); border: none; } .shuffle svg { width: 13px; height: 13px; transition: transform .45s ease; } /* 换一批的洗牌入场：五条错峰淡入（reduced-motion 全局关闭动画） */ @keyframes deal-in { from { opacity: 0; transform: translateY(5px); } } #randomList li.deal-in { animation: deal-in .35s ease backwards; } /* 自部署项目 */ /* 自部署项目：hairline 边框 + 悬停朱砂（与前后篇导航同语言） */ .lab-note { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; margin: -0.4em 0 1.4em; } .lab-note .beat { display: inline-flex; color: var(--cinnabar); vertical-align: -2px; margin-right: 2px; animation: beat 1.4s ease infinite; } .lab-note .beat svg { width: 13px; height: 13px; } @keyframes beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.2); } 40% { transform: scale(1); } } .projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .proj { display: block; border: 1px solid var(--hairline); border-radius: 3px; padding: 0.75em 1em 0.85em; text-decoration: none; color: inherit; transition: border-color .15s ease; } .proj:hover { border-color: var(--cinnabar); color: inherit; } .proj-go { display: block; margin-top: 0.5em; font-size: 0.78rem; color: var(--ink-soft); } .proj:hover .proj-go { color: var(--cinnabar); } .proj .top { display: flex; align-items: baseline; gap: 0.6em; } .proj h3 { font-family: var(--mono); font-size: 0.88rem; font-weight: 600; margin: 0; letter-spacing: 0; } .status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-style: italic; color: var(--ink-soft); margin-left: auto; } .status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); animation: breathe 4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .status.off { color: var(--ink-soft); } .status.off::before { background: var(--ink-soft); animation: none; } .proj p { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.75; margin: 0.25em 0 0; } /* 归档页 · 分类过滤：弱化为文字链 */ .cat-filter { display: none; flex-wrap: wrap; gap: 1.3em; margin: 0 0 0.4em; } .js .cat-filter { display: flex; } .cf { border: none; background: none; padding: 0.2em 0; font-size: 0.85rem; letter-spacing: 0.03em; color: var(--ink-soft); } .cf:hover { color: var(--cinnabar); border: none; } .cf.on { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cinnabar); text-decoration-thickness: 1px; text-underline-offset: 4px; } section.year h2 .n { font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); margin-left: 0.6em; } /* 页脚两行结构（沿用 v1 内容） */ .foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .foot-row + .foot-row { margin-top: 0.75rem; } .foot-links { display: flex; gap: 1.4em; } .foot-dim { font-size: 0.75rem; } footer .up { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem; } footer .up svg { width: 46px; height: 14px; overflow: visible; } footer .up path { stroke: var(--ink-soft); stroke-width: 1.4; fill: none; stroke-dasharray: 120; animation: ecg 3s linear infinite; } @keyframes ecg { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } } /* 返回顶部 */ .to-top { position: fixed; right: 18px; right: max(18px, env(safe-area-inset-right)); bottom: 22px; z-index: 20; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .3s, transform .3s, color .15s, border-color .15s; } .to-top.show { opacity: 1; pointer-events: auto; transform: none; } .to-top svg { width: 15px; height: 15px; transform: rotate(-90deg); } /* 文章页 */ .art-head { margin-top: 0.5em; } .art-head h1 { margin-top: 0; margin-bottom: 0.3em; } .art-meta { font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.03em; margin: 0 0 2em; display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; } .art-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hairline); } .prose h2 { scroll-margin-top: 60px; } .prose figure { margin: 1.6em 0; } .prose figcaption { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.6em; } .prose img { cursor: zoom-in; } /* 代码块语言标注与复制按钮；右缘渐隐提示横向可滚（JS 维护 .has-more） */ .pre-wrap { position: relative; margin: 1.4em 0; } .pre-wrap > pre { margin: 0; } .pre-wrap::after { content: ""; position: absolute; top: 1px; bottom: 1px; right: 1px; width: 34px; border-radius: 0 3px 3px 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--code-bg) 82%); opacity: 0; transition: opacity .25s; } .pre-wrap.has-more::after { opacity: 1; } .pre-wrap .lang { position: absolute; top: 7px; right: 11px; z-index: 1; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); transition: opacity .25s; } .pre-wrap:hover .lang { opacity: 0; } .pre-wrap .copy { position: absolute; top: 6px; right: 8px; z-index: 1; font-size: 0.68rem; padding: 0.25em 0.8em; background: var(--paper); opacity: 0; transition: opacity .25s, color .15s, border-color .15s; } .pre-wrap:hover .copy { opacity: 1; } .pre-wrap .copy.done { color: var(--ink); border-color: var(--ink-soft); opacity: 1; } /* 触屏没有 hover：复制按钮常显，语言标签让位 */ @media (hover: none) { .pre-wrap .lang { display: none; } .pre-wrap .copy { opacity: 1; } } /* 提示框（pandoc fenced div） */ .callout { display: flex; gap: 0.8em; margin: 1.6em 0; padding: 0.8em 1em; border: 1px solid var(--hairline); border-radius: 3px; background: var(--code-bg); font-size: 0.9rem; line-height: 1.8; } .callout::before { content: ""; width: 17px; height: 17px; flex: none; margin-top: 4px; background: var(--ink-soft); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; } .callout.tip { --ico: url('data:image/svg+xml,'); } .callout.warn { --ico: url('data:image/svg+xml,'); } .callout b { font-weight: 600; display: block; margin-bottom: 2px; } .callout > div > p, .callout > p { margin: 0; } /* 版权行与前后篇 */ .license { margin-top: 1.6em; font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; opacity: .85; } .license svg { width: 13px; height: 13px; } .art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 1.6em; } .art-nav a { border: 1px solid var(--hairline); border-radius: 3px; padding: 0.7em 0.9em; text-decoration: none; transition: border-color .15s; } .art-nav a:hover { border-color: var(--cinnabar); color: var(--ink); } .art-nav .dir { font-size: 0.72rem; color: var(--ink-soft); display: block; margin-bottom: 0.2em; } .art-nav .t { font-size: 0.85rem; font-weight: 600; line-height: 1.5; } .art-nav .next { text-align: right; } /* 目录（宽屏悬浮）：单条竖向轨道 + 随章节平滑滑动的朱砂标记 */ .toc { position: fixed; top: 100px; left: calc(50% + 350px); width: 190px; font-size: 0.78rem; display: none; } @media (min-width: 1100px) { .toc { display: block; } } .toc .toc-t { font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.08em; margin-bottom: 0.8em; } .toc-body { position: relative; padding-left: 13px; } .toc-body::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--hairline); } .toc-marker { position: absolute; left: -0.5px; top: 0; width: 2px; height: 1.2em; background: var(--cinnabar); border-radius: 2px; opacity: 0; transition: top .25s ease, height .25s ease, opacity .25s ease; } .toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin: 2px 0; } .toc a { display: block; padding: 3px 0; color: var(--ink-soft); line-height: 1.5; text-decoration: none; transition: color .15s; } .toc a:hover { color: var(--ink); } .toc a.on { color: var(--ink); font-weight: 600; } .toc ul ul { margin-left: 10px; } .toc ul ul a { font-size: 0.72rem; } /* 图片灯箱 */ .lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(20, 18, 16, .9); display: flex; align-items: center; justify-content: center; padding: 5vw; opacity: 0; pointer-events: none; transition: opacity .3s; cursor: zoom-out; } .lightbox.open { opacity: 1; pointer-events: auto; } .lightbox .inner { max-width: min(1000px, 92vw); width: 100%; transform: scale(.96); transition: transform .3s; } .lightbox.open .inner { transform: scale(1); } .lightbox .inner img { width: 100%; cursor: zoom-out; } /* 独立页（关于等）的页题：与文章页标题节奏一致 */ .page-h1 { margin-top: 0.5em; } /* 窄屏内联目录（宽屏用右侧悬浮 .toc） */ .toc-inline { display: none; margin: 0 0 1.8em; border: 1px solid var(--hairline); border-radius: 3px; padding: 0.55em 1.1em; font-size: 0.85rem; } .toc-inline summary { cursor: pointer; font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.06em; } .toc-inline ul { list-style: none; margin: 0.5em 0 0.3em; padding: 0; } .toc-inline li { margin: 0.35em 0; } .toc-inline ul ul { margin: 0.2em 0 0.2em 1em; } .toc-inline a { text-decoration: none; } .toc-inline a:hover { color: var(--cinnabar); } @media (max-width: 1099px) { .toc-inline { display: block; } } /* 站内搜索浮层：命令面板式，懒加载静态索引（无 JS 时入口是普通归档链接） */ .search-box { position: fixed; inset: 0; z-index: 70; background: rgba(20, 18, 16, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 15vh 1.2rem 0; opacity: 0; pointer-events: none; transition: opacity .18s ease; } .search-box.open { opacity: 1; pointer-events: auto; } .search-panel { max-width: 540px; margin: 0 auto; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; box-shadow: 0 18px 50px rgba(20, 18, 16, .22); transform: translateY(-8px); transition: transform .18s ease; overflow: hidden; } .search-box.open .search-panel { transform: none; } .search-panel input[type="search"] { border: none; border-bottom: 1px solid var(--hairline); border-radius: 0; font-size: 1rem; padding: 0.85em 1.15em; } .search-panel input[type="search"]:focus { border-color: var(--hairline); border-bottom-color: var(--cinnabar); } .search-results { list-style: none; margin: 0; padding: 0.35em 0; max-height: 52vh; overflow-y: auto; } .search-results:empty { padding: 0; } .search-results .sr-label { padding: 0.55em 1.15em 0.15em; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-soft); } .search-results li a { display: block; padding: 0.5em 1.15em; text-decoration: none; } .search-results li a:hover, .search-results li.sel a { background: var(--code-bg); } .sr-t { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.6; } .sr-m { display: block; font-size: 0.72rem; font-style: italic; color: var(--ink-soft); } .sr-s { display: block; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.7; margin-top: 2px; } .search-empty { padding: 0.7em 1.15em; font-size: 0.85rem; color: var(--ink-soft); } .search-meta { padding: 0.45em 1.15em; font-size: 0.7rem; color: var(--ink-soft); border-top: 1px solid var(--hairline); } mark { background: rgba(166, 57, 46, .14); color: inherit; border-radius: 2px; padding: 0 1px; } [data-theme="dark"] mark { background: rgba(207, 106, 88, .3); } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } @view-transition { navigation: none; } } /* ---------- Mobile ---------- */ @media (max-width: 600px) { body { padding: 1.4rem 1.1rem 1.6rem; /* 刘海屏安全区（不支持 env() 的浏览器忽略这两行） */ padding-left: max(1.1rem, env(safe-area-inset-left)); padding-right: max(1.1rem, env(safe-area-inset-right)); font-size: 1.05rem; line-height: 1.85; } /* Scale the heading hierarchy down one step so narrow screens don't feel crowded */ .title h1, .title .site { font-size: 1.1rem; } h1 { font-size: 1.35rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1.05rem; } h1, h2, h3 { margin-top: 1.8em; } header.title { margin-bottom: 1.6rem; } header nav a { display: inline-block; padding: 0.4em 0; } /* Post list: date wraps above the title, row spacing increases */ .blog-posts li { flex-direction: column; gap: 0.1em; padding: 0.6em 0; } .blog-posts li .cat { display: none; } /* Tighter code-block padding, smoother horizontal scrolling */ pre { padding: 0.8em 1em; font-size: 0.85em; -webkit-overflow-scrolling: touch; } /* Wide tables scroll horizontally instead of breaking the page */ table { display: block; overflow-x: auto; white-space: nowrap; } hr { width: 100%; } .projects { grid-template-columns: 1fr; } .art-nav { grid-template-columns: 1fr; } .art-nav .next { text-align: left; } /* 窄屏页脚：左对齐顺排，避免 space-between 换行后参差 */ .foot-row { justify-content: flex-start; } /* 窄屏搜索浮层上移，给软键盘留空间 */ .search-box { padding-top: 6vh; } } @media print { header, .toc, .toc-inline, .to-top, .art-nav, footer, .skip, .theme-btn, .cat-filter, .search-box { display: none !important; } body { background: #fff; max-width: 100%; } .pre-wrap .copy { display: none; } a { color: inherit; } }