/* ========================================================================== cz-blog 前台设计系统 · 终末地工业编辑风 规范见 .claude/skills/blog-design/SKILL.md，可运行原型见 prototypes/g-endfield-terrain.html 这份文件只服务前台。后台 12 个模板共用 me.css，那边一个字都不动： me.css 里有 * { border-radius: 0 } 与 body { font-size: 17px } 这类全局规则， 原地改写会把 Element UI 的按钮、输入框、对话框全部削平。等后台单独用 Element UI 重做时 再连文件一起删（届时只需把 .admin-body 一条规则搬走）。 字体不在这里 @font-face：拉丁与中文各三个 woff2，放在 fonts/fonts.css。 页面先引 fonts.css 再引本文件，这样才能给首屏字体加 preload。 ========================================================================== */ /* ========================================================================== 1. 令牌 ========================================================================== */ :root { /* ---- 纸与墨 ---- */ --bg: #ffffff; /* 纯白是刻意选的：早期用暖灰纸 #e8e8e2，多数显示器上发闷 */ --bg-sunken: #fafaf9; /* 信息条 / 页脚 */ --panel: #fbfbfa; /* 抽屉 / 悬停面 */ --line: #e8e8e8; /* 细线 l1 */ --line-strong: #d4d4d4; /* 重线 l2 */ --ink: #111111; /* 正文 白底 19.1:1 */ --ink-2: #4a4a4a; /* 次要文字 白底 8.9:1 */ --ink-on-signal: #111111; /* 信号色底上的墨字 */ /* ---- 信号黄：按「要不要被读到」分三档 ---- 任何亮到能被称为「亮黄」的颜色对白底都是 1:1，这是明度决定的物理限制， 所以黄不能当一个颜色用，必须按落点拆角色。 */ --signal: #6b5d00; /* 文字 / 焦点环 白底 6.58:1 */ --signal-fill: #ffe600; /* 实心块，块内墨字 15.0:1 */ --signal-fill-h: #ffd000; /* 实心块 hover / press */ --signal-edge: #edc800; /* 细线与描边 白底 1.63:1，只求看得见 */ --signal-rgb: 255, 230, 0; /* ---- 几何与字阶 ---- */ --cut: 16px; /* 斜切楔形尺寸 */ --fs-label: 15px; /* 技术标签层字号：时间戳、页码、角度、侧轨编号。只做注释，不承载正文 */ --font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-sans: "Space Grotesk", var(--font-cjk); --font-disp: "Archivo", "Space Grotesk", var(--font-cjk); /* JetBrains Mono 没有中文字形。栈里必须垫中文字体，否则 mono 元素里的中文会一路回退 到系统默认等宽（中文 Windows 上是宋体），和全站字体不是一套。字体回退按字形走： 拉丁与数字仍走 JetBrains Mono，只有它缺的中文才落到 Noto Sans SC。 */ --font-mono: "JetBrains Mono", var(--font-cjk), ui-monospace, monospace; } /* ========================================================================== 2. 基础 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.75; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; /* 日期、耗时、百分比跳动时不产生横向抖动 */ } /* 本来就圆的形状保留圆形。用 !important 是防止任何第三方组件带进圆角 */ .avatar, .dot, .spinner, .fr-hub-ava { border-radius: 50% !important; } ::selection { background: var(--signal-fill); color: var(--ink-on-signal); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-strong); } ::-webkit-scrollbar-thumb:hover { background: var(--signal); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; } .wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; } @media (min-width: 1024px) { .wrap { padding: 0 48px; } } /* 字号降回 15px 后字距要放回来：大写等宽字在小字号下需要更多呼吸才不糊成一团 */ .mono { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; } .mono-sm { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .06em; } /* 纯中文的标签不要给 mono：没有拉丁字符需要等宽对齐时，mono 只剩多余字距和对中文无效的 uppercase */ .u-plain { font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: normal; text-transform: none; } /* 眉标签：一段短划线 + 一行等宽小字，标出「这是哪一块」。 首页 hero、三个错误页、五个内页都用它，所以是独立类，不绑在任何一个版块上。 全站克制使用：每 3 个章节最多 1 个。 */ /* keep-all：窄屏上眉标签会折行，而中文默认可以在任意字之间断开， 于是「关于这个博客」被拆成「关于这个博 / 客」。keep-all 让中文词组整体不拆， 折行点落到那个斜杠的空格上；再配 break-word 兜底 —— 万一某个词长到一行放不下， 仍然允许它断，不会撑出横向滚动条。 */ .eyebrow { display: flex; align-items: center; gap: 14px; color: var(--ink-2); margin-bottom: 26px; word-break: keep-all; overflow-wrap: break-word; } .eyebrow .bar { width: 40px; height: 1px; background: var(--signal-edge); flex-shrink: 0; } /* 斜切楔形。clip-path 是 grouping 属性，会拍平子元素的 3D 变换： 一块图既要斜切又要停在不同纵深时，把 clip-path 和 translateZ 放在同一个元素上， 它自身的 3D 定位仍生效，只是子元素被拍平。 */ .cut-tr { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); } .cut-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); } /* 纸张纤维：一层固定的极淡噪点，压住纯白背景的空洞感 */ .grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.055 0 0 0 0 0.055 0 0 0 0 0.055 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"); } /* 载入擦除：满屏信号黄，用 clip-path 定向抽走。 静止态就是「已被裁掉」，动画负责先铺满再抽走 —— 顺序反过来（静止态=盖满）的话， 动画一旦没跑起来整站会被一块黄板盖死。这是这套动效最危险的失败模式。 */ #wipe { position: fixed; inset: 0; z-index: 100; background: var(--signal-fill); pointer-events: none; display: flex; align-items: center; justify-content: center; clip-path: inset(0 0 0 100%); animation: wipe-curtain 1.15s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes wipe-curtain { 0% { clip-path: inset(0 0 0 0); } /* 铺满 */ 45% { clip-path: inset(0 0 0 0); } /* 停一拍，让「地形加载中」被看见 */ 100% { clip-path: inset(0 0 0 100%); } /* 向右抽走 */ } #wipe .wipe-code { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .24em; color: var(--ink-on-signal); } /* 翻页擦除板：站内跳转的过渡（chrome :: scripts 点击拦截 + animGate 标记驱动）。 静止态裁没、躲左屏外 —— 与 #wipe 同一条安全红线： 动画没跑起来（JS 禁用 / 类没挂上）页面也不该被盖住。 运动方向与首页 #wipe 一致：板从左侧扫入盖满、停一拍（露出「正在加载哪页」）、 落点页上向右收走。两段共用同一条从左到右的动线，接成一次完整的翻页。 */ #pagewipe { position: fixed; inset: 0; z-index: 101; background: var(--signal-fill); display: flex; align-items: center; justify-content: center; pointer-events: none; clip-path: inset(0 100% 0 0); } /* 板上的页面名。离开半程开始时字还没必要出现（板刚起步）， 用延迟淡入让它跟着盖满一起到位；到达半程它随板一起被右收裁掉 */ #pagewipe .wipe-code { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .24em; color: var(--ink-on-signal); opacity: 0; } /* 到达半程在前：离开与到达两个类同时存在时（本页既是落点又要离开）， 靠后的离开规则赢 —— 正要跳走的页面不该再播到达动画 */ .anim.nav-in #pagewipe { animation: pagewipe-out .55s cubic-bezier(.16, 1, .3, 1) both; } .anim.nav-in #pagewipe .wipe-code { opacity: 1; } @keyframes pagewipe-out { 0% { clip-path: inset(0 0 0 0); } /* 盖满（上一页盖过来的那块板） */ 30% { clip-path: inset(0 0 0 0); } /* 停一拍，让页面名被读到 */ 100% { clip-path: inset(0 0 0 100%); } /* 向右收走，与首页 #wipe 同向 */ } .anim.nav-out #pagewipe { animation: pagewipe-in .34s cubic-bezier(.16, 1, .3, 1) both; } .anim.nav-out #pagewipe .wipe-code { animation: pagewipe-code-in .34s ease-out both; } @keyframes pagewipe-in { from { clip-path: inset(0 100% 0 0); } /* 躲左屏外 */ to { clip-path: inset(0 0 0 0); } /* 扫入盖满 */ } @keyframes pagewipe-code-in { 0%, 55% { opacity: 0; } 100% { opacity: 1; } } /* ========================================================================== 3. 顶栏 桌面端导航必须单行。字号变大后断点从 900px 上移到 1080px，低于此收进汉堡抽屉。 ========================================================================== */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 60px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); } .topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; } .brand-mark { font-family: var(--font-disp); font-weight: 900; font-variation-settings: 'wdth' 110, 'wght' 900; font-size: 21px; letter-spacing: -.01em; } .brand-code { color: var(--ink-2); } .nav { display: none; align-items: center; gap: 2px; } @media (min-width: 1080px) { .nav { display: flex; } } .nav a { position: relative; padding: 8px 14px; font-size: 17px; color: var(--ink-2); transition: color .25s; white-space: nowrap; } /* 导航下划线用 scaleX 从左展开，不用 opacity 淡入 */ .nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--signal-edge); transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.16, 1, .3, 1); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav a[aria-current="page"] { color: var(--ink); } .topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .status { display: none; align-items: center; gap: 7px; } @media (min-width: 640px) { .status { display: flex; } } .status .dot { width: 6px; height: 6px; background: var(--signal-edge); animation: breathe 3.2s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } /* 方形按钮。字号 17px，可点击元素不降级到标签层 */ .btn-sq { font-family: var(--font-mono); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; padding: 11px 18px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; } .btn-sq:hover { background: var(--signal-fill); color: var(--ink-on-signal); border-color: var(--signal-edge); } .menu-btn { display: inline-flex; } @media (min-width: 1080px) { .menu-btn { display: none; } } /* 移动端抽屉 */ #drawer { position: fixed; top: 60px; left: 0; right: 0; z-index: 49; background: var(--panel); border-bottom: 1px solid var(--line); clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.16, 1, .3, 1); } #drawer[data-open] { clip-path: inset(0 0 0 0); } #drawer nav { display: flex; flex-direction: column; padding: 8px 0; } #drawer a { padding: 16px 24px; font-size: 18px; color: var(--ink-2); border-bottom: 1px solid var(--line); } #drawer a:last-child { border-bottom: 0; } #drawer a:hover { color: var(--signal); background: rgba(var(--signal-rgb), .16); } /* ========================================================================== 4. 侧边轨 ========================================================================== */ .rail { position: fixed; left: 0; top: 60px; bottom: 0; width: 56px; z-index: 40; border-right: 1px solid var(--line); display: none; flex-direction: column; align-items: center; justify-content: space-between; padding: 32px 0; background: rgba(250, 250, 249, .6); } @media (min-width: 1280px) { .rail { display: flex; } } .rail-idx { display: flex; flex-direction: column; gap: 18px; align-items: center; } .rail-idx span { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-2); transition: color .3s; } .rail-idx span[data-on] { color: var(--signal); font-weight: 700; } .rail-vtext { writing-mode: vertical-rl; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .2em; color: var(--ink-2); text-transform: uppercase; } @media (min-width: 1280px) { .layer { padding-left: 56px; } } /* ========================================================================== 5. HERO ========================================================================== */ .hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: 60px; overflow: hidden; } /* 3D 等高线地形画布。Phase 4 接 Three.js，此前是空画布，不影响版面 */ .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } .hero canvas#flat { display: none; } /* WebGL 不可用时切到这张 2D 等高线 */ /* 左侧纸色渐变，保证文字压在地形之上依然清晰 */ .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(96deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.34) 54%, rgba(255,255,255,0) 72%); } /* Hero 底部渐隐，让地形沉入纸面 */ .hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg)); pointer-events: none; } .hero > .wrap { position: relative; z-index: 2; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; padding: 48px 0 56px; perspective: 1600px; /* perspective 必须写在父级，子元素的 translateZ 才看得出纵深 */ } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; padding: 24px 0 40px; } } /* 雷霆大字。收一点字面、减一点重量：屏幕上最大的那块墨，收 20% 面积就轻很多 */ .thunder { font-family: var(--font-disp); font-variation-settings: 'wdth' 105, 'wght' 800; font-weight: 800; font-size: clamp(2.8rem, 9.4vw, 6.6rem); line-height: .96; letter-spacing: -.035em; margin: 0; perspective: 1000px; transform-style: preserve-3d; } .thunder-cjk { font-family: var(--font-cjk); font-variation-settings: normal; font-weight: 800; } .thunder .ch { display: inline-block; transform-style: preserve-3d; will-change: transform, opacity; /* 白底上只留下缘一道浅影，像墨刚压进纸里 */ text-shadow: 0 1px 0 rgba(17, 17, 17, .05); } /* 这句话就是全站字号下限，没有比它更小的文字 */ .hero-sub { margin: 28px 0 0; max-width: 34ch; color: var(--ink-2); font-size: 17px; line-height: 1.85; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; } /* 主按钮：亮黄底 + signal-edge 描边 + 墨色字。亮黄块对白底是 1:1， 块的边界会消失、只剩里面的黑字浮着，所以描边不是装饰是必需的 */ .btn-primary { display: inline-flex; align-items: center; gap: 12px; background: var(--signal-fill); color: var(--ink-on-signal); padding: 14px 26px; font-family: var(--font-mono); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--signal-edge); cursor: pointer; will-change: transform; transition: background .3s, border-color .3s; } .btn-primary:hover { background: var(--signal-fill-h); } .btn-primary:active { transform: translateY(1px); } .btn-outline { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border: 1px solid var(--line-strong); color: var(--ink); font-family: var(--font-mono); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; will-change: transform; transition: border-color .3s, color .3s; } .btn-outline:hover { border-color: var(--signal); color: var(--signal); } .btn-outline:active { transform: translateY(1px); } /* ---------- 3D 分层图像场 ---------- */ .field-wrap { perspective: 1500px; } .field { /* 整块不收指针事件：三块 .tile 都是负 translateZ，在 preserve-3d 里位于 .field 平面「后方」，命中测试按 3D 深度排序会让透明的 .field 挡住所有 tile —— 悬停恢复彩色因此永远不触发（2026-10-01 实测 elementFromPoint 命中的是 .field）。 事件放行给下层的 .tile（它那边显式 pointer-events: auto） */ pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 46px); gap: 12px; transform-style: preserve-3d; will-change: transform; } @media (min-width: 1024px) { .field { grid-template-rows: repeat(6, 58px); gap: 14px; } } /* pointer-events: auto 是显式声明，不是默认值复读：父级 .field 被设成了 none（原因见上）， 这里必须显式接回事件，:hover 恢复彩色与角标变色才会生效 */ .tile { position: relative; will-change: transform; pointer-events: auto; } /* 每块停在不同纵深：指针一动就产生真实视差分层，不是整体平移 */ .t1 { grid-column: 1 / 2; grid-row: 1 / 4; transform: translateZ(-30px); } .t2 { grid-column: 2 / 3; grid-row: 2 / 6; transform: translateZ(-160px); } .t3 { grid-column: 1 / 2; grid-row: 4 / 7; transform: translateZ(-95px); } /* 照片变成高调平灰的印刷品，悬停才恢复彩色 */ .tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.94) brightness(1.24); transition: filter .7s cubic-bezier(.16, 1, .3, 1); } .tile:hover img { filter: grayscale(0) contrast(1.02) brightness(1.02); } /* 角标是「标签页」，不做成压在图上的贴片 */ .tile .tag { position: absolute; left: 0; bottom: 0; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .1em; background: var(--bg); color: var(--ink-2); padding: 5px 11px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); transition: background .4s, color .4s, border-color .4s; } .tile:hover .tag { background: var(--signal-fill); color: var(--ink-on-signal); border-color: var(--signal-edge); } .tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(140deg, rgba(255,255,255,.42), rgba(17,17,17,.015)); } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 8px; } .hero-stats > div { padding: 18px 0; border-right: 1px solid var(--line); } .hero-stats > div:last-child { border-right: 0; } .hero-stats .k { font-family: var(--font-disp); font-variation-settings: 'wdth' 100, 'wght' 800; font-size: 34px; line-height: 1; } /* 「篇文章 / 条评论 / 次访问」是纯中文，整个不给 mono 处理 */ .hero-stats .u { color: var(--ink-2); margin-top: 6px; } /* ========================================================================== 6. 信息条（全站唯一走马灯） ========================================================================== */ .ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-sunken); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* 走马灯是唯一允许 linear 的地方 */ .ticker-track { display: flex; width: max-content; animation: slide 42s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } .ticker-item { display: flex; align-items: center; gap: 14px; padding: 13px 28px; border-right: 1px solid var(--line); white-space: nowrap; } .ticker-item .flag { width: 3px; height: 13px; background: var(--signal-edge); flex-shrink: 0; } .ticker-item .t { font-size: 17px; color: var(--ink-2); transition: color .25s; } .ticker-item:hover .t { color: var(--ink); } /* ========================================================================== 7. 章节 ========================================================================== */ .section { padding: 104px 0; position: relative; } @media (min-width: 1024px) { .section { padding: 136px 0; } } .section.flush { padding-top: 0; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; } .sec-title { font-family: var(--font-cjk); font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; letter-spacing: -.02em; margin: 0; perspective: 700px; } .sec-link { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: color .3s, border-color .3s; } .sec-link:hover { color: var(--signal); border-color: var(--signal); } /* 幽灵数字是版面装置，不是眉标签，不要退化成 001 · 这种小号编号 */ .ghost-num { position: absolute; top: 40px; right: 24px; font-family: var(--font-disp); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: clamp(9rem, 22vw, 20rem); line-height: .72; color: rgba(17, 17, 17, .045); pointer-events: none; user-select: none; } @media (min-width: 1024px) { .ghost-num { right: 48px; } } /* ========================================================================== 8. 文章索引 不用卡片。行式布局 + 1px 细线，悬停时信号黄从左填满整行。 ========================================================================== */ .index { border-top: 1px solid var(--line); } .idx-row { position: relative; isolation: isolate; /* 让 z-index:-1 的填充层不跑到页面背景后面 */ border-bottom: 1px solid var(--line); /* 用 minmax(0, 1fr) 而不是 1fr：1fr 的自动最小值是 min-content， 摘要里一个长英文串就能把整条轨道撑得比视口还宽（移动端实测撑到 592px / 视口 390px）。 显式给 0 下限，轨道才会跟着容器走，再由 -webkit-line-clamp 负责截断。 */ display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 20px 26px 0; cursor: pointer; } /* 有封面的行（模板按 firstPicture 是否为空加 .has-thumb）在窄屏排成两栏： 封面占左，序号与正文走右。 这里只给封面写显式落位，序号和正文交给网格的自动排布绕开它 —— 多写两条 .idx-num / 正文的规则，桌面端还得再撤销一遍。 没有封面的行不加这个类：88px 的轨道会一直占着，而最新的 12 篇里有 10 篇没封面。 */ .idx-row.has-thumb { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 16px; } .idx-row.has-thumb .idx-thumb { grid-column: 1; grid-row: 1 / span 2; } /* 封面。宽屏尺寸与归档页 / 标签页的 .post-thumb 一致（216×122）， 区别只在窄屏：那边整张 display:none，这边给一个小缩略图。 **不加灰度滤镜**：站内只有 Hero 的图像场走「印刷灰 → 悬停恢复彩色」， 列表封面一律原色。灰度是给装饰性大图当版面装置用的， 列表封面是内容的一部分，读者要靠它认出文章讲什么，不该被压成灰。 两档宽高比都是 1.77，HTML 上的 width/height 给的就是这个比值， 图片到达前用这个比例占位，不会跳版。 这条基础规则必须排在下面 @media 里那条之前：两条特异性同为 (0,1,0)， 媒体查询不加特异性，胜负纯看源序 —— 放到后面会把宽屏尺寸压回窄屏的（实测踩过）。 */ .idx-thumb { width: 96px; height: 54px; object-fit: cover; } /* 三栏要 104 + 148 + 两块 32 的间距才够，768-1023px 之间放不下， 硬套会把标题挤成一条竖线，所以这个断点放在 1024px，之下退回单栏堆叠。 */ @media (min-width: 1024px) { .idx-row { grid-template-columns: 104px minmax(0, 1fr); gap: 32px; align-items: baseline; padding: 30px 24px 30px 0; } .idx-row.has-thumb { grid-template-columns: 104px minmax(0, 1fr) 216px; } /* 桌面端封面回到最右列，窄屏那套显式落位必须撤销，否则会一直钉在第一列 */ .idx-row.has-thumb .idx-thumb { grid-column: auto; grid-row: auto; align-self: center; } .idx-thumb { width: 216px; height: 122px; } } /* 列表行共用的悬停填充：一整块信号黄从左侧展开盖住整行。 首页文章索引、归档、标签页都用这一套动作。分成三份写的话， 改缓动或改时长就要改三处，而且很容易只改到一处。 行内文字的翻色留在各自的行类型里 —— 每种子元素构成不一样，这里管不着。 */ .row-fill { position: relative; isolation: isolate; } .row-fill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal-fill); clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.16, 1, .3, 1); } .row-fill:hover::before { clip-path: inset(0 0 0 0); } .idx-row:hover .idx-title, .idx-row:hover .idx-desc, .idx-row:hover .idx-num, .idx-row:hover .row-meta, .idx-row:hover .row-tags { color: var(--ink-on-signal); } .idx-row:hover .row-meta .cat { border-color: var(--ink-on-signal); } .idx-num { font-family: var(--font-disp); font-variation-settings: 'wdth' 100, 'wght' 800; font-size: 30px; line-height: 1; color: rgba(17, 17, 17, .28); transition: color .35s; } .idx-title { display: block; font-family: var(--font-cjk); font-weight: 700; font-size: 22px; line-height: 1.45; color: var(--ink); margin: 0 0 8px; transition: color .35s; } @media (min-width: 1024px) { .idx-title { font-size: 24px; } } /* 摘要截两行。t_blog.description 里有相当一部分是 CSDN 同步过来的原始 markdown （`# 标题 ## 小节`、`[在这里插入图片描述](url)` 这类），不截断的话每行高度都不一样， 整页索引会七长八短。这是数据侧的毛病，展示侧只负责别让它把版面撑歪。 */ .idx-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: 17px; transition: color .35s; } /* 列表行里那两条附属信息：标签串与元数据串。 首页索引与标签页都用，所以名字不绑页面。 */ .row-tags { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--ink-2); transition: color .35s; } .row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--ink-2); transition: color .35s; } .row-meta .cat { border: 1px solid var(--line-strong); padding: 3px 9px; transition: border-color .35s; } /* 首页与标签页的元数据都跟在摘要下面、左对齐。不要再给 .idx-row .row-meta 补一条 justify-content: flex-end —— 那是封面进来之前、右列空着时的写法；现在最右列是封面， 甩过去会压到图上。 */ /* 空列表：三张表全空时也给一句人话，而不是一片留白 */ .idx-empty { padding: 64px 0; color: var(--ink-2); border-bottom: 1px solid var(--line); } /* 分页：不用 Bootstrap 的 pagination 组件，一列等大方块。 当前页用墨底反白而不是信号黄：黄是「需要被看见的交互」，当前页是状态不是动作。 */ .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 48px; } /* 也支持