154 lines
15 KiB
CSS
154 lines
15 KiB
CSS
@import "tailwindcss";
|
|
@theme inline {
|
|
--color-background: var(--paper);
|
|
--color-foreground: var(--ink);
|
|
--color-muted: var(--surface);
|
|
--color-muted-foreground: var(--secondary);
|
|
--color-border: var(--line);
|
|
}
|
|
:root { --paper:#fafafa; --ink:#202125; --secondary:#71717a; --surface:#f0f0f1; --line:#dedee1; --accent:#b73729; --reading: "Helvetica Neue",Arial,"PingFang SC",sans-serif; --display:var(--reading); }
|
|
:root[data-theme="editorial"] { --paper:#fbfaf7; --ink:#25231e; --secondary:#746e63; --surface:#f1efe9; --line:#dedad0; --accent:#7d3b2f; --reading:Georgia,"Songti SC",serif; --display:var(--reading); }
|
|
:root[data-theme="tufte"] { --paper:#fffff8; --ink:#25251f; --secondary:#6b6b5d; --surface:#f5f4ea; --line:#d8d2c2; --accent:#48656a; --reading:Palatino,"Palatino Linotype",Georgia,"Songti SC",serif; --display:var(--reading); }
|
|
* { box-sizing:border-box; }
|
|
html { scroll-behavior:smooth; scroll-padding-top:100px; }
|
|
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue",Arial,"PingFang SC",sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
|
|
::selection { background:#dededb; color:#171717; }
|
|
@layer base { a { color:inherit; text-decoration:none; } }
|
|
button,select,input { font:inherit; }
|
|
button,select { cursor:pointer; }
|
|
button:disabled { cursor:wait; }
|
|
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
|
|
h1,h2,h3,p { margin:0; }
|
|
h1,h2,h3 { text-wrap:balance; }
|
|
p { text-wrap:pretty; }
|
|
svg { flex-shrink:0; }
|
|
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px; background:var(--ink); color:var(--paper); }
|
|
.skip-link:focus { top:12px; }
|
|
.site-header { border-bottom:1px solid var(--line); background:var(--paper); }
|
|
.header-inner { max-width:1320px; padding:0 48px; height:80px; margin:auto; display:flex; align-items:center; gap:64px; }
|
|
.brand { display:flex; align-items:center; gap:9px; }
|
|
.brand>span { font-size:25px; font-weight:600; letter-spacing:-1px; }
|
|
.brand-dot { color:var(--accent); }
|
|
.brand small { font-size:10px; letter-spacing:1.2px; color:var(--secondary); padding-left:14px; margin-left:5px; border-left:1px solid var(--line); }
|
|
.header-inner nav { display:flex; gap:28px; color:var(--secondary); }
|
|
.header-inner nav a:first-child { color:var(--ink); }
|
|
.header-actions { margin-left:auto; display:flex; align-items:center; gap:22px; }
|
|
.theme-label select { border:0; background:transparent; color:var(--secondary); padding:8px 4px; font-size:12px; }
|
|
.account-name { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.page-shell { max-width:1200px; margin:auto; padding:0 48px; }
|
|
.index-intro { padding:50px 0 40px; }
|
|
.section-kicker { display:flex; justify-content:space-between; gap:20px; font-size:10px; font-weight:500; letter-spacing:1.5px; color:var(--secondary); }
|
|
.section-kicker>span { letter-spacing:.5px; }
|
|
.index-intro h1 { margin:35px 0 26px; font-family:var(--display); font-size:clamp(42px,5vw,68px); font-weight:450; line-height:1.2; letter-spacing:-2px; }
|
|
.muted-heading { color:#99999f; }
|
|
.intro-bottom { display:flex; justify-content:space-between; align-items:flex-end; }
|
|
.intro-bottom p { color:var(--secondary); font-size:14px; line-height:1.9; }
|
|
.text-link { display:inline-flex; align-items:center; gap:12px; font-size:13px; padding-bottom:4px; border-bottom:1px solid var(--line); }
|
|
.text-link:hover { color:var(--accent); border-color:var(--accent); }
|
|
.sample-note { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; font-size:11px; color:var(--secondary); line-height:1.7; }
|
|
.sample-note p { flex:1; }
|
|
.sample-note a { display:flex; align-items:center; gap:4px; white-space:nowrap; }
|
|
.status-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; flex-shrink:0; }
|
|
.index-grid { display:grid; grid-template-columns:180px minmax(0,1fr); gap:64px; padding:46px 0 70px; }
|
|
.index-aside h2 { font-size:12px; font-weight:500; margin-bottom:24px; }
|
|
.topic { display:flex; justify-content:space-between; padding:9px 0; color:var(--secondary); font-size:12px; }
|
|
.topic.active { color:var(--ink); font-weight:600; }
|
|
.topic:hover { color:var(--accent); }
|
|
.aside-note { margin-top:38px; padding-top:20px; border-top:1px solid var(--line); font-size:11px; line-height:1.9; color:var(--secondary); }
|
|
.index-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; }
|
|
.index-heading h2 { font-size:17px; font-weight:500; }
|
|
.index-heading h2>span { font-size:10px; color:var(--secondary); vertical-align:top; margin-left:9px; font-variant-numeric:tabular-nums; }
|
|
.sort-form { display:flex; align-items:center; gap:6px; }
|
|
.sort-form select { color:var(--secondary); border:0; background:transparent; font-size:11px; padding:6px; }
|
|
.quiet-button { border:1px solid var(--line); background:transparent; padding:5px 8px; border-radius:4px; font-size:11px; color:var(--secondary); }
|
|
.search-form { display:flex; align-items:center; gap:12px; border:1px solid var(--line); padding:11px 14px; border-radius:5px; color:var(--secondary); }
|
|
.search-form input { border:0; outline:0; background:transparent; min-width:0; width:100%; color:var(--ink); font-size:12px; }
|
|
.search-form:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
|
|
.search-form button { border:0; padding:4px; background:transparent; }
|
|
.paper-list { list-style:none; margin:10px 0 0; padding:0; }
|
|
.paper-row { display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; padding:30px 0; border-bottom:1px solid var(--line); }
|
|
.row-number { padding-top:3px; color:#939399; font-size:10px; font-variant-numeric:tabular-nums; }
|
|
.paper-meta { display:flex; flex-wrap:wrap; gap:16px; font-size:10px; color:var(--secondary); margin-bottom:10px; }
|
|
.paper-meta span:first-child { color:var(--accent); }
|
|
.paper-row h3 { font-family:var(--display); font-size:21px; line-height:1.38; font-weight:500; letter-spacing:-.4px; }
|
|
.paper-row h3 a:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
|
|
.paper-summary { font-family:var(--reading); margin-top:11px; color:var(--secondary); font-size:13px; line-height:1.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
|
|
.row-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:17px; align-items:center; font-size:10px; }
|
|
.authors { color:var(--secondary); min-width:0; }
|
|
.read-link { display:flex; gap:7px; align-items:center; white-space:nowrap; }
|
|
.read-link:hover { color:var(--accent); }
|
|
.filter-note { display:flex; justify-content:space-between; font-size:12px; padding-top:20px; color:var(--secondary); }
|
|
.filter-note a { display:flex; gap:6px; align-items:center; }
|
|
.pagination { display:flex; justify-content:space-between; padding-top:25px; font-size:12px; color:var(--secondary); }
|
|
.pagination div { display:flex; gap:25px; }
|
|
.pagination a { display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
|
|
.site-footer { display:flex; justify-content:space-between; gap:24px; margin:0 auto; padding:28px 48px; max-width:1200px; border-top:1px solid var(--line); font-size:11px; }
|
|
.site-footer>span:last-child { color:var(--secondary); }
|
|
.back-link { display:inline-flex; gap:8px; align-items:center; font-size:12px; color:var(--secondary); margin-top:32px; }
|
|
.article-header { margin-top:44px; }
|
|
.article-header h1 { font-family:var(--display); max-width:940px; font-size:clamp(30px,3.8vw,49px); line-height:1.2; letter-spacing:-1.5px; font-weight:450; margin:25px 0; }
|
|
.article-authors { color:var(--secondary); font-size:14px; line-height:1.8; max-width:850px; }
|
|
.article-toolbar { border-bottom:1px solid var(--line); padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
|
|
.article-toolbar>span { font-size:11px; color:var(--secondary); }
|
|
.article-grid { display:grid; grid-template-columns:120px minmax(0,650px) 140px; gap:44px; padding:48px 0 80px; }
|
|
.article-toc { display:flex; flex-direction:column; align-self:start; gap:16px; position:sticky; top:30px; font-size:11px; color:var(--secondary); }
|
|
.article-toc>span { color:var(--ink); margin-bottom:5px; }
|
|
.article-toc a:hover { color:var(--accent); }
|
|
.article-body { min-width:0; }
|
|
.article-body section+section { margin-top:54px; }
|
|
.article-body h2 { font-size:24px; font-weight:450; font-family:var(--display); margin:15px 0 24px; }
|
|
.article-body section>p:not(.source-caption):not(.section-description) { font:18px/1.85 var(--reading); margin:0 0 22px; overflow-wrap:anywhere; text-wrap:pretty; }
|
|
.source-caption { color:var(--secondary); font-size:11px; line-height:1.8; margin-top:22px; }
|
|
.paper-details { margin:0; }
|
|
.paper-details>div { display:grid; grid-template-columns:82px minmax(0,1fr); gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.8; }
|
|
.paper-details dt { color:var(--secondary); font-size:11px; }
|
|
.paper-details dd { margin:0; overflow-wrap:anywhere; }
|
|
.paper-details a:hover { text-decoration:underline; }
|
|
.reading-note { align-self:start; color:var(--secondary); }
|
|
.tiny-rule { display:block; width:20px; height:2px; background:var(--accent); margin-bottom:18px; }
|
|
.reading-note h3 { color:var(--ink); font-size:14px; line-height:1.7; font-weight:500; margin-bottom:12px; }
|
|
.reading-note p { font-size:11px; line-height:1.9; }
|
|
.section-description { font-size:13px; color:var(--secondary); margin-bottom:20px; }
|
|
.source-row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:19px 0; }
|
|
.source-row div { display:flex; flex-direction:column; gap:5px; }
|
|
.source-row strong { font-size:15px; font-weight:500; }
|
|
.source-row span { color:var(--secondary); font-size:11px; }
|
|
.source-row:hover { color:var(--accent); }
|
|
.empty-state { padding-top:100px; padding-bottom:140px; text-align:center; }
|
|
.empty-state h1,.empty-state h3 { font-weight:450; font-size:28px; margin:16px 0; }
|
|
.empty-state p { color:var(--secondary); margin:16px auto 25px; max-width:520px; line-height:1.8; }
|
|
.auth-page { min-height:calc(100dvh - 160px); display:grid; place-items:center; padding:65px 24px 90px; }
|
|
.auth-box { width:100%; max-width:390px; }
|
|
.auth-box h1 { font-size:32px; letter-spacing:-1px; font-weight:450; margin-top:24px; }
|
|
.auth-description { color:var(--secondary); font-size:13px; line-height:1.8; margin:14px 0 30px; }
|
|
.social-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
|
|
.provider-mark { font-size:17px; font-weight:650; }
|
|
.auth-divider { display:flex; align-items:center; gap:15px; font-size:11px; color:var(--secondary); margin:26px 0; }
|
|
.auth-divider:before,.auth-divider:after { content:""; height:1px; background:var(--line); flex:1; }
|
|
.auth-box form>label,.password-label label { display:block; font-size:12px; margin-bottom:8px; }
|
|
.auth-box input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:transparent; font-size:14px; }
|
|
.password-label { display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
|
|
.password-label small { color:var(--secondary); font-size:10px; margin-bottom:8px; }
|
|
.password-field { position:relative; }
|
|
.password-field input { padding-right:42px; }
|
|
.password-field button { position:absolute; right:8px; top:6px; padding:7px; border:0; background:transparent; color:var(--secondary); }
|
|
.form-error,.form-message { font-size:12px; line-height:1.8; margin-top:14px; }
|
|
.form-error { color:#a33024; }
|
|
.form-message { color:#38614b; }
|
|
.auth-switch { text-align:center; font-size:12px; margin-top:24px; color:var(--secondary); }
|
|
.auth-switch button { background:transparent; border:0; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
|
|
.auth-trust { color:var(--secondary); font-size:11px; line-height:1.8; margin:30px 0 25px; }
|
|
.about-page { max-width:800px; padding-top:75px; padding-bottom:90px; }
|
|
.about-page h1 { font-size:44px; font-weight:450; line-height:1.3; margin:25px 0; }
|
|
.about-page h2 { font-size:21px; font-weight:500; margin:40px 0 15px; }
|
|
.about-page p { color:var(--secondary); font:17px/1.9 var(--reading); }
|
|
:root[data-theme="editorial"] .paper-row h3 { font-size:23px; }
|
|
:root[data-theme="tufte"] .article-body section>p:not(.source-caption):not(.section-description) { font-size:18px; line-height:1.8; }
|
|
:root[data-theme="tufte"] .reading-note { font-family:var(--reading); }
|
|
@media(min-width:1500px) { .page-shell,.site-footer { max-width:1280px; } .index-intro { padding-top:65px; } }
|
|
@media(max-width:1000px) { .header-inner { padding:0 30px; gap:32px; } .page-shell { padding:0 30px; } .brand small { display:none; } .index-grid { grid-template-columns:140px minmax(0,1fr); gap:36px; } .article-grid { grid-template-columns:100px minmax(0,1fr); gap:30px; } .reading-note { display:none; } .site-footer { padding:25px 30px; } .about-page { padding-top:60px; padding-bottom:70px; } }
|
|
@media(max-width:640px) { .header-inner { height:68px; padding:0 20px; gap:20px; } .brand>span { font-size:23px; } .header-inner nav { display:none; } .header-actions { gap:10px; } .theme-label select { max-width:90px; font-size:11px; } .account-name { display:none; } .page-shell { padding:0 20px; } .index-intro { padding:35px 0 28px; } .index-intro h1 { font-size:43px; margin:28px 0 24px; letter-spacing:-1.5px; } .section-kicker { font-size:9px; gap:12px; letter-spacing:1px; } .intro-bottom { align-items:flex-start; gap:18px; } .intro-bottom p { font-size:12px; } .intro-bottom a { font-size:11px; white-space:nowrap; margin-top:5px; } .sample-note { align-items:flex-start; font-size:10px; padding:12px 0; } .status-dot { margin-top:6px; } .sample-note a { font-size:10px; } .index-grid { display:block; padding-top:26px; padding-bottom:45px; } .index-aside { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; } .index-aside h2,.aside-note { display:none; } .topic { padding:7px 10px; border:1px solid var(--line); font-size:10px; } .topic span { display:none; } .topic.active { border-color:var(--ink); } .paper-row { gap:7px; grid-template-columns:22px minmax(0,1fr); padding:25px 0; } .paper-row h3 { font-size:19px; } .paper-meta { font-size:9px; gap:12px; } .paper-summary { font-size:12px; } .row-bottom { flex-wrap:wrap; gap:10px; } .authors { flex-basis:100%; } .site-footer { padding:24px 20px; font-size:10px; } .site-footer>span:last-child { display:none; } .article-header { margin-top:32px; } .article-header h1 { font-size:32px; letter-spacing:-.9px; overflow-wrap:anywhere; } .article-authors { font-size:12px; } .article-toolbar { align-items:flex-start; flex-direction:column; gap:14px; padding:20px 0; } .article-grid { display:block; padding:30px 0 60px; } .article-toc { display:none; } .article-body section>p:not(.source-caption):not(.section-description) { font-size:17px; line-height:1.8; } .paper-details>div { grid-template-columns:70px minmax(0,1fr); gap:12px; } .about-page { padding-top:45px; padding-bottom:60px; } .about-page h1 { font-size:36px; } .about-page p { font-size:16px; } .auth-page { padding-top:50px; } }
|
|
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }
|
|
|
|
.search-form select { border:0; background:transparent; color:var(--secondary); font-size:11px; max-width:100px; padding:3px 0; }
|