/* ========================================================================== Haoyang —— 书卷气个人博客主题 档位全部由 上的 data-* 属性驱动： data-font / data-paper / data-size / data-lh / data-radius / data-hh / data-theme ========================================================================== */ /* ===== 基础变量（宣纸 · 靛青 · 赭石） ===== */ :root{ --bg:#F6F2E9;--bg-card:#FCFAF4;--hero-top:#FAF7F0; --ink:#26272B;--ink-2:#66666E;--ink-3:#9C9A96; --deep:#22364B;--deep-2:#1A2A3B;--deep-ink:#E7E4DC; --cinnabar:#9E4A32;--gold:#B08D57;--line:#E4DCCB;--line-soft:#EEE8DB; --fz:"FZBiaoYaSong"; --shs:"SourceHanSerifCN"; --wenkai:"LXGWWenKai"; --song:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",Georgia,serif; --serif:var(--song); --fs:17px;--lh:1.9;--r:2px; --w:1080px;--w-text:720px;--hh:70px; } /* ===== 纸色预设 ===== */ html[data-paper="ivory"]{--bg:#F8F7F2;--bg-card:#FDFDFA;--hero-top:#FBFAF6;--line:#E6E3DA;--line-soft:#F0EEE7} html[data-paper="grey"]{--bg:#EFF1EF;--bg-card:#F8F9F7;--hero-top:#F5F7F4;--line:#DCE0DA;--line-soft:#E9ECE7; --ink:#23282A;--ink-2:#5F6764;--ink-3:#959C98} html[data-paper="tea"]{--bg:#F7F0E0;--bg-card:#FDF8ED;--hero-top:#FBF5E7;--line:#E8DDC4;--line-soft:#F1E9D8} /* ===== 深色（写在纸色之后，优先级相同则后者生效） ===== */ html[data-theme="dark"]{ --bg:#181B1F;--bg-card:#20242A;--hero-top:#1D2126; --ink:#E6E3DA;--ink-2:#A09EA0;--ink-3:#6E6C70; --deep:#10161D;--deep-2:#0B1015;--deep-ink:#D6D4CC; --cinnabar:#C46A50;--gold:#C9AE78;--line:#2F353C;--line-soft:#282D33; } /* ===== 字号 / 行高 / 圆角 / 顶栏高度 ===== */ html[data-size="small"]{--fs:16px} html[data-size="large"]{--fs:18px} html[data-lh="tight"]{--lh:1.85} html[data-lh="loose"]{--lh:2.15} html[data-radius="sharp"]{--r:0} html[data-radius="round"]{--r:6px} html[data-hh="compact"]{--hh:60px} html[data-hh="tall"]{--hh:82px} /* ===== 字体档位 ===== */ html[data-font="shs-body"]{--serif:var(--shs),var(--song)} html[data-font="shs-head"] :is(h1,h2,h3,.brand-name,.year-num,.cat-name,.hero-title){font-family:var(--shs),var(--song)} html[data-font="wenkai-body"]{--serif:var(--wenkai),var(--song)} html[data-font="wenkai-head"] :is(h1,h2,h3,.brand-name,.year-num,.cat-name,.hero-title){font-family:var(--wenkai),var(--song)} /* ===== 基础 ===== */ *{box-sizing:border-box} html{font-family:var(--serif);-webkit-font-smoothing:antialiased;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);line-height:var(--lh);font-size:var(--fs); transition:background .3s,color .3s} a{color:inherit;text-decoration:none;transition:color .2s,border-color .2s,background .2s} a:hover{color:var(--cinnabar)} img{max-width:100%} h1,h2,h3{font-weight:600;line-height:1.35} .container{max-width:var(--w);margin:0 auto;padding:0 24px} .narrow{max-width:var(--w-text)} .main{min-height:60vh} .empty{text-align:center;color:var(--ink-3);padding:48px 0;letter-spacing:.1em} .kbd{font-family:ui-monospace,Menlo,monospace} /* ===== 顶栏 ===== */ .site-header{background:var(--deep);color:var(--deep-ink);position:sticky;top:0;z-index:50; border-bottom:1px solid var(--deep-2);box-shadow:0 1px 3px rgba(0,0,0,.06)} .header-inner{display:flex;align-items:center;height:var(--hh);gap:20px} .brand{display:flex;align-items:center;gap:12px;font-size:21px;letter-spacing:.18em;color:#fff;flex:none} .brand:hover{color:#fff} .brand-rule{width:2px;height:1.05em;border-radius:1px;background:var(--gold);flex:none;transition:transform .25s,background .25s} .brand:hover .brand-rule{transform:scaleY(1.25);background:var(--cinnabar)} .nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap} .nav-item{position:relative} .nav-item > a{position:relative;display:block;padding:8px 15px;opacity:.86;letter-spacing:.12em; border-radius:var(--r);white-space:nowrap} .nav-item > a::after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:1px; background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .25s} .nav-item > a:hover{opacity:1;color:#fff;background:rgba(255,255,255,.07)} .nav-item > a:hover::after{transform:scaleX(1)} .sub{display:none;position:absolute;top:100%;left:0;background:var(--deep);min-width:150px;padding:6px 0; border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.18);z-index:60} .has-sub:hover .sub{display:block} .sub a{display:block;padding:7px 18px;opacity:.9;letter-spacing:.08em} .sub a:hover{background:rgba(255,255,255,.09);color:#fff;opacity:1} .tools{display:flex;gap:2px;align-items:center} .icon-btn{background:none;border:0;color:inherit;cursor:pointer;padding:8px;opacity:.85;display:grid; place-items:center;border-radius:var(--r)} .icon-btn:hover{opacity:1;color:#fff;background:rgba(255,255,255,.07)} .nav-toggle{display:none} /* ===== 扉页 ===== */ .hero{padding:84px 24px 64px;border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--hero-top),var(--bg))} .hero--compact{padding:44px 24px 36px} .hero--full{min-height:68vh;display:flex;align-items:center;justify-content:center} .hero--left{text-align:left} .hero--left .hero-inner{margin:0;max-width:820px} .hero--center{text-align:center} .hero--center .hero-inner{margin:0 auto} .hero-inner{max-width:840px} .hero-kicker{color:var(--gold);letter-spacing:.72em;text-indent:.72em;font-size:12px;margin:0 0 18px} .hero--left .hero-kicker{text-indent:0} .hero-title{font-size:clamp(38px,5.6vw,68px);letter-spacing:.24em;text-indent:.24em;margin:0;line-height:1.2} .hero--left .hero-title{text-indent:0} .hero-sub{letter-spacing:.4em;text-indent:.4em;color:var(--muted);margin:18px 0 0;font-size:14px} .hero--left .hero-sub{text-indent:0} .hero-inner.is-vertical{display:grid;justify-items:center;gap:0} .hero-inner.is-vertical .hero-kicker{margin-bottom:18px} .hero-inner.is-vertical .hero-title{writing-mode:vertical-rl;text-orientation:upright; height:clamp(180px,26vw,300px);font-size:clamp(28px,3.6vw,44px);letter-spacing:.22em;text-indent:0} .hero.has-image{text-align:center;background-size:cover;background-position:center;position:relative; color:#fff;border-bottom:0;min-height:56vh;display:flex;align-items:center;justify-content:center} .hero.has-image::before{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,18,28,.32),rgba(10,18,28,.60))} .hero.has-image .hero-inner{position:relative;z-index:1} .hero.has-image .hero-sub{color:rgba(255,255,255,.88)} .hero.has-image .hero-kicker{display:none} /* ===== 栏目标题对齐（样式 → 栏目标题对齐；左对齐时与正文成一条竖轴） ===== */ html[data-sec="left"] .kicker{text-align:left;text-indent:0} html[data-sec="left"] .section-title{text-align:left;text-indent:0; padding-left:0;border-left:0} html[data-sec="left"] .section-desc{text-align:left;margin-left:0} /* ===== 区块标题 ===== */ .kicker{text-align:center;color:var(--gold);letter-spacing:.48em;text-indent:.48em;font-size:12.5px;margin:86px 0 8px} .kicker.left{text-align:left;text-indent:0;margin:64px 0 20px} .section-title{text-align:center;font-size:26px;letter-spacing:.2em;text-indent:.2em;margin:0 0 42px; color:var(--ink-2)} .section-desc{text-align:center;color:var(--ink-2);margin:-26px 0 40px;font-size:15px} .home-block{margin-bottom:20px} /* ===== 精选卡 ===== */ .feature-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); border:1px solid var(--line);background:var(--bg-card);margin-bottom:28px;border-radius:var(--r); transition:border-color .25s} .feature-card:hover{border-color:var(--gold)} .feature-card.reverse .feature-cover{order:2} .feature-cover img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3; border-radius:var(--r) 0 0 var(--r)} .feature-card.reverse .feature-cover img{border-radius:0 var(--r) var(--r) 0} .feature-body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center} .feature-body.no-cover{grid-column:1/-1;padding:48px 64px} .feature-body h3{font-size:25px;margin:14px 0 10px} .feature-body h3 a:hover{color:var(--cinnabar)} .feature-body p{color:var(--ink-2);margin:0 0 20px;font-size:16px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-2);flex-wrap:wrap} .cat{display:inline-block;padding:1px 10px;border:1px solid var(--line);color:var(--ink-2); font-size:12px;letter-spacing:.12em;line-height:1.7;border-radius:var(--r); transition:background .2s,color .2s,border-color .2s} .cat:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:#FBF7EE} .row-meta .cat{font-size:11.5px;padding:0 8px} .cat-none{border-color:var(--line-soft);color:var(--ink-3)} .cat-none:hover{background:transparent;border-color:var(--line);color:var(--ink-2)} .more{color:var(--gold);letter-spacing:.12em;font-size:14px} /* ===== 文章列表（三种版式） ===== */ .post-list{display:block} .post-row{position:relative;display:grid;grid-template-columns:118px 1fr;gap:28px; padding:34px 0;border-bottom:1px solid var(--line-soft)} .post-row:first-of-type{border-top:1px solid var(--line)} .post-row::before{content:"";position:absolute;left:-16px;top:34px;bottom:34px;width:2px; background:var(--cinnabar);transform:scaleY(0);transform-origin:top;transition:transform .3s} .post-row:hover::before{transform:scaleY(1)} .row-date{color:var(--ink-3);font-size:13.5px;padding-top:8px;letter-spacing:.06em} .post-row h3{margin:0 0 8px;font-size:21.5px} .pin{color:var(--cinnabar);font-size:12px;margin-right:6px;vertical-align:2px} .excerpt{color:var(--ink-2);margin:0 0 14px;font-size:15.5px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .row-meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--ink-3);flex-wrap:wrap} /* 紧凑：不显示摘要 */ .post-list.compact .excerpt,.post-list.no-excerpt .excerpt{display:none} .post-list.compact .post-row{padding:22px 0} /* 双列网格：把行变成卡片 */ .post-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px; padding-top:8px} .post-list.grid .post-row{grid-template-columns:1fr;gap:8px;border:1px solid var(--line); background:var(--bg-card);border-radius:var(--r);padding:26px 26px 22px;transition:border-color .25s} .post-list.grid .post-row:hover{border-color:var(--gold)} .post-list.grid .post-row:first-of-type{border-top:1px solid var(--line)} .post-list.grid .post-row::before{display:none} .post-list.grid .row-date{padding-top:0} /* ===== 分页 ===== */ .pagination{display:flex;justify-content:center;gap:32px;padding:56px 0 16px;color:var(--ink-2);font-size:15px} .pagination a:hover{color:var(--cinnabar)} .page-info{color:var(--ink-3)} /* ===== 卷目：目录式编号列表 ===== */ .cat-list{list-style:none;margin:0 0 88px;padding:0;border-top:1px solid var(--line)} .cat-list li{border-bottom:1px solid var(--line-soft)} .cat-list a{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:baseline; padding:20px 8px;transition:background .2s,padding .2s} .cat-list a:hover{background:var(--bg-card);padding-left:16px;color:inherit} .cat-idx{color:var(--cinnabar);font-size:13.5px;letter-spacing:.14em;font-variant-numeric:tabular-nums} .cat-name{font-size:22px;letter-spacing:.14em} .cat-list a:hover .cat-name{color:var(--cinnabar)} .cat-count{color:var(--ink-3);font-size:13px;letter-spacing:.06em} /* 卷目：方格块 */ .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px;margin-bottom:90px} .cat-tile{border:1px solid var(--line);background:var(--bg-card);padding:30px 16px 24px;text-align:center; display:grid;gap:6px;border-radius:var(--r);transition:border-color .25s,transform .25s} .cat-tile:hover{border-color:var(--gold);color:inherit;transform:translateY(-2px)} .cat-char{font-size:44px;line-height:1;color:var(--ink)} .cat-count{color:var(--ink-3);font-size:12px;letter-spacing:.06em} /* ===== 首页附加模块 ===== */ .tag-cloud{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center} .tag-cloud sup{color:var(--ink-3);font-size:11px;margin-left:3px} .home-block .tag-cloud{margin-bottom:80px} .about-card{border:1px solid var(--line);background:var(--bg-card);border-radius:var(--r); padding:38px 44px;margin-bottom:80px} .about-card .kicker{margin-top:0} .about-text{color:var(--ink-2);white-space:pre-line;margin:0;font-size:16.5px} .home-search{text-align:center;margin:0 0 90px} .search-entry{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;background:var(--bg-card); border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2);cursor:pointer; font-family:inherit;font-size:15px;letter-spacing:.1em;transition:border-color .25s,color .2s} .search-entry:hover{border-color:var(--gold);color:var(--cinnabar)} .search-entry kbd{border:1px solid var(--line);border-radius:var(--r);padding:1px 6px;font-size:12px;color:var(--ink-3)} /* ===== 文章页 ===== */ .post-layout{display:grid;grid-template-columns:minmax(0,var(--w-text)) 240px;gap:70px; justify-content:center;padding:68px 24px 0} .post-layout.no-toc{grid-template-columns:minmax(0,var(--w-text));gap:0} .page-layout{padding-top:68px;padding-bottom:40px} .post-head .meta{margin-bottom:18px} .post-head h1{font-size:41px;margin:0 0 18px;letter-spacing:.02em} .post-meta{color:var(--ink-2);font-size:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .dot{color:var(--ink-3)} .rule{border:0;border-top:1px solid var(--line);margin:32px 0 46px} .post-content{font-size:calc(var(--fs) + 1px);line-height:calc(var(--lh) + .1);word-wrap:break-word} .post-content.indent p{text-indent:2em;margin-bottom:.9em} .post-content :is(h2,h3){scroll-margin-top:96px} .post-content p{margin:0 0 1.4em} .post-content h2{font-size:27px;margin:62px 0 22px;padding-bottom:12px;border-bottom:1px solid var(--line)} .post-content h3{font-size:21px;margin:42px 0 16px} .post-content img{display:block;margin:36px auto;max-width:100%;height:auto;border-radius:var(--r)} .post-content a{color:var(--cinnabar);border-bottom:1px solid transparent} .post-content a:hover{border-color:var(--cinnabar)} .post-content blockquote{border-left:3px solid var(--gold);margin:28px 0;padding:10px 26px; color:var(--ink-2);background:var(--bg-card)} .post-content blockquote p:last-child{margin:0} .post-content pre{background:#1a2028;color:#e6e1d6;padding:20px 24px;overflow:auto;font-size:14px; line-height:1.7;border-radius:var(--r)} .post-content code{font-family:ui-monospace,Menlo,Consolas,monospace} .post-content :not(pre)>code{background:var(--bg-card);border:1px solid var(--line);padding:1px 6px;font-size:.9em} .post-content hr{border:0;border-top:1px solid var(--line);margin:48px auto;width:120px} .post-content table{border-collapse:collapse;width:100%;font-size:15px;margin:24px 0;display:block;overflow-x:auto} .post-content th,.post-content td{border:1px solid var(--line);padding:8px 12px} .post-content th{background:var(--bg-card)} .post-foot{margin-top:70px} .tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px} .tags a{color:var(--ink-2);font-size:14px} .tags a:hover{color:var(--cinnabar)} .related-list{list-style:none;margin:0 0 44px;padding:0} .related-list li{display:flex;justify-content:space-between;gap:18px;align-items:baseline; padding:12px 0;border-bottom:1px solid var(--line-soft)} .related-list time{color:var(--ink-3);font-size:13px;flex:none} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line); border-bottom:1px solid var(--line);padding:24px 0} .post-nav a{display:grid;gap:4px} .post-nav a:hover span{color:var(--cinnabar)} .post-nav small{color:var(--ink-3);font-size:12px;letter-spacing:.2em} .post-nav .next{text-align:right} .comments{margin:48px 0 96px} .post-aside{position:sticky;top:calc(var(--hh) + 24px);align-self:start;max-height:calc(100vh - 120px);overflow:auto} .aside-title{letter-spacing:.32em;margin:0 0 14px;font-size:13.5px;color:var(--ink-2)} #toc a{display:block;padding:7px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2); font-size:14px;line-height:1.6} #toc a.h3{padding-left:16px;font-size:13px} #toc a.active{color:var(--cinnabar)} /* ===== 归档 ===== */ .year{margin-bottom:54px} .year-num{font-size:46px;color:var(--ink-3);margin:0 0 16px;letter-spacing:.06em;font-weight:600} .month-num{font-size:16px;color:var(--ink-2);letter-spacing:.14em;margin:30px 0 8px;font-weight:600} .month-list{list-style:none;margin:0 0 12px;padding:0} .month-list li{display:grid;grid-template-columns:78px 1fr;gap:16px;padding:11px 0; border-bottom:1px solid var(--line-soft);font-size:17px} .month-list li a:hover{color:var(--cinnabar)} .month-list time{color:var(--ink-3);font-size:14px;padding-top:3px} .month-list.flat{border-top:1px solid var(--line)} /* ===== 作者 / 404 ===== */ .author-card{text-align:center;padding:62px 0 32px} .avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:1px solid var(--line)} .author-card h1{font-size:30px;margin:16px 0 6px} .author-card p{color:var(--ink-2)} .error-page{text-align:center;padding:120px 24px 140px} .error-num{font-size:104px;line-height:1;margin:0;letter-spacing:.1em;color:var(--ink-3);font-weight:600} .error-msg{color:var(--ink-2);margin:0 0 6px} .btn{display:inline-block;margin-top:26px;padding:10px 32px;border:1px solid var(--cinnabar); color:var(--cinnabar);letter-spacing:.22em;border-radius:var(--r)} .btn:hover{background:var(--cinnabar);color:#FBF7EE} /* ===== 页脚 ===== */ .site-footer{background:var(--deep);color:var(--deep-ink);text-align:center; padding:60px 24px 46px;margin-top:116px;font-size:14px;letter-spacing:.08em} .site-footer p{margin:6px 0;opacity:.82} .site-footer .motto{opacity:1;font-size:15px;letter-spacing:.12em} .site-footer .extra{opacity:.6;font-size:13px} .foot-line{width:1.5px;height:30px;border:0;background:var(--gold);margin:22px auto 20px;opacity:.7} .site-footer a:hover{color:var(--gold)} .icp{font-size:12px;opacity:.55} .halo-footer{display:block;margin-top:10px;opacity:.6;font-size:12px} /* ===== ⑦ 站点小计 ===== */ .site-stats{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline; margin:44px 0 4px;font-size:14px;color:var(--muted);letter-spacing:.06em} /* 分隔符由 CSS 生成：关掉任意一段都不会留下孤立的「·」 */ .site-stats .stat + .stat::before{content:"·";margin:0 10px;opacity:.4} .site-stats .stat b{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--deep); margin:0 3px;font-variant-numeric:tabular-nums} html[data-theme="dark"] .site-stats .stat b{color:var(--ink)} .site-stats .stat-sep{opacity:.4} /* ===== ⑧ 现在 / 近况（窄条：无卡片背景、无边框，融进页面） ===== */ .now-strip{max-width:430px;margin:46px auto 6px;text-align:center; font-size:14px;line-height:2.05;color:var(--muted);letter-spacing:.03em} .now-strip .now-label{font-size:11.5px;letter-spacing:.44em;text-indent:.44em;color:var(--gold); margin:0 0 10px} .now-strip .now-text{white-space:pre-line;margin:0} .now-strip .now-link{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--cinnabar); text-decoration:none;letter-spacing:.1em} .now-strip .now-link:hover{text-decoration:underline} /* ===== ⑨ 随机一句 ===== */ .random-line{margin:52px auto 20px;max-width:660px;text-align:center;padding:32px 26px; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .rl-text{font-family:var(--serif);font-size:19px;line-height:1.95;color:var(--ink);margin:0 0 12px; letter-spacing:.03em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .rl-from{display:inline-block;font-size:13px;color:var(--muted);letter-spacing:.08em;text-decoration:none} .rl-from:hover{color:var(--cinnabar)} .rl-btn{font:inherit;font-size:13px;letter-spacing:.1em;color:var(--muted);background:transparent; border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;cursor:pointer;transition:.2s} .rl-btn:hover{color:var(--cinnabar);border-color:var(--cinnabar)} /* ===== 藏书页：工具条 ===== */ .books-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 20px; padding-bottom:14px;border-bottom:1px solid var(--line)} .bt-views{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .bt-view{font:inherit;font-size:13px;letter-spacing:.08em;padding:6px 16px;background:transparent; color:var(--muted);border:0;cursor:pointer;transition:.2s} .bt-view.on{background:var(--deep);color:#F3F1E9} .bt-search{flex:1;min-width:180px;font:inherit;font-size:14px;padding:7px 12px;color:var(--ink); background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r)} .bt-search:focus{outline:none;border-color:var(--cinnabar)} .bt-count{font-size:12px;color:var(--muted);letter-spacing:.06em} /* ===== 藏书页：表格优化 ===== */ .tbl-wrap{overflow-x:auto;margin:0 0 28px} .post-content .tbl-wrap:last-child{margin-bottom:0} .post-content table{display:table;width:100%;border-collapse:collapse;font-size:14.5px; margin:0;overflow:visible} .post-content thead th{position:sticky;top:var(--hh);z-index:2;background:var(--bg-card); border-bottom:1.5px solid var(--line);padding:10px 12px;text-align:left;font-weight:600; letter-spacing:.06em;color:var(--deep);white-space:nowrap} html[data-theme="dark"] .post-content thead th{color:var(--ink)} .post-content tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top} .post-content tbody tr{transition:background .15s} .post-content tbody tr:nth-child(even){background:var(--zebra,rgba(0,0,0,.022))} .post-content tbody tr:hover{background:var(--hover,rgba(158,74,50,.055))} td.score{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} td.score[data-score^="9"]{color:#2F6B4F} td.score[data-score^="8"]{color:#5B7A3A} td.score[data-score^="7"]{color:#8A7A3A} td.score[data-score^="6"]{color:#9E6A32} td.score[data-score^="5"],td.score[data-score^="4"],td.score[data-score^="3"], td.score[data-score^="2"],td.score[data-score^="1"],td.score[data-score^="0"]{color:#A8552F} /* ===== 藏书页：书脊墙 ===== */ .spine-wall{display:flex;flex-wrap:wrap;gap:3px;align-items:flex-end;min-height:210px; margin:0 0 30px;padding:26px 20px;background:var(--bg-card);border:1px solid var(--line); border-radius:var(--r)} .spine{position:relative;display:block;width:15px;height:var(--h,160px);background:var(--c,#5B6B45); border-radius:2px 2px 0 0;cursor:pointer;overflow:hidden;text-decoration:none; transition:transform .18s,filter .18s; box-shadow:inset -1px 0 0 rgba(0,0,0,.18),inset 1px 0 0 rgba(255,255,255,.07)} .spine:hover{transform:translateY(-6px);filter:brightness(1.12);z-index:3} .spine-title{position:absolute;left:50%;top:9px;transform:translateX(-50%);writing-mode:vertical-rl; font-family:var(--serif);font-size:11.5px;line-height:1;color:rgba(255,255,255,.88); letter-spacing:.06em;max-height:calc(var(--h,160px) - 20px);overflow:hidden;white-space:nowrap; text-shadow:0 1px 1px rgba(0,0,0,.25)} .book-tip{position:fixed;z-index:99;display:none;gap:12px;width:264px;padding:12px; background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 10px 30px rgba(0,0,0,.16);pointer-events:none} .book-tip.on{display:flex} .book-tip img{width:66px;height:auto;flex:none;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.18)} .book-tip .bt2{min-width:0} .book-tip p{margin:0 0 5px} .book-tip .bt-title{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);line-height:1.4} .book-tip .bt-meta{font-size:12px;color:var(--muted);line-height:1.6} .book-tip .bt-score{font-size:12px;color:var(--cinnabar);font-weight:600;margin:0} .post-content.no-hit::after{content:"没有匹配的书";display:block;padding:34px 0;color:var(--muted); text-align:center;letter-spacing:.1em} /* ===== 藏书页：正文里的标题与分类索引（正文的 h2/h3 是文章尺度，在图录页太大） ===== */ .post-content.books-page h2{font-size:19px;font-family:var(--serif);font-weight:600; color:var(--deep);letter-spacing:.08em;margin:40px 0 10px;padding-bottom:9px; border-bottom:1px solid var(--line)} .post-content.books-page h3{font-size:15px;font-weight:600;color:var(--muted); letter-spacing:.16em;margin:34px 0 8px} /* 分类索引那一行：小字、低调，不抢眼 */ .post-content.books-page h3 + p{font-size:13px;line-height:2.3;color:var(--muted); letter-spacing:.02em;margin:0 0 6px} .post-content.books-page h3 + p a{color:var(--muted);text-decoration:none;padding:0 2px; border-bottom:1px solid transparent;transition:.18s} .post-content.books-page h3 + p a:hover{color:var(--cinnabar);border-bottom-color:var(--cinnabar)} html[data-theme="dark"] .post-content.books-page h2{color:var(--ink)} /* ===== 移动端 ===== */ @media (max-width:880px){ :root{--hh:60px} html[data-hh="tall"]{--hh:64px} .header-inner{gap:10px} .brand{font-size:17px;letter-spacing:.12em} .nav-toggle{display:grid} .nav{display:none;position:absolute;left:0;right:0;top:var(--hh);background:var(--deep); flex-direction:column;gap:0;padding:6px 16px 16px;border-top:1px solid rgba(255,255,255,.1)} .nav.open{display:flex} .nav-item > a{padding:10px 4px} .nav-item > a::after{left:4px;right:auto;width:34px} .sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 6px 16px;background:transparent} .sub a{padding:6px 0} .hero{padding:52px 24px 42px} .hero--compact{padding:36px 24px 28px} .hero-title{letter-spacing:.2em;text-indent:.2em} .hero--left .hero-title{text-indent:0} .hero-sub{letter-spacing:.2em;text-indent:.2em;font-size:15px} .hero-inner.is-vertical .hero-title{height:clamp(190px,42vw,280px)} .kicker{margin-top:62px} .section-title{font-size:22px} .feature-card{grid-template-columns:1fr} .feature-card.reverse .feature-cover{order:0} .feature-cover img,.feature-card.reverse .feature-cover img{border-radius:var(--r) var(--r) 0 0} .feature-body,.feature-body.no-cover{padding:28px 24px} .post-row{grid-template-columns:1fr;gap:6px;padding:26px 0} .post-row::before{left:-10px;top:26px;bottom:26px} .post-list.grid{grid-template-columns:1fr;gap:16px} .post-list.grid .post-row{padding:22px 20px} .post-layout{padding-top:46px;gap:0} .post-aside{display:none} .post-head h1{font-size:29px} .post-content{font-size:var(--fs)} .post-nav{grid-template-columns:1fr} .post-nav .next{text-align:left} .year-num{font-size:34px} .month-list li{grid-template-columns:64px 1fr;font-size:16px} .cat-list a{grid-template-columns:42px 1fr auto;gap:12px;padding:16px 4px} .cat-name{font-size:19px} .error-num{font-size:76px} .about-card{padding:26px 22px} .now-strip{max-width:100%;padding:0 6px;margin-top:38px;line-height:1.95} .site-stats{font-size:13px;margin-top:36px} .site-stats .stat + .stat::before{margin:0 7px} .site-stats .stat b{font-size:19px} .rl-text{font-size:17px} .random-line{padding:26px 8px;margin-top:42px} .books-toolbar{gap:8px} .bt-search{min-width:100%;order:3} .spine-wall{padding:18px 12px;gap:2px;min-height:170px} .spine{width:12px} .spine-title{font-size:10px;top:7px} .book-tip{width:232px} }