/* ========================================================================== samuelvaiter.com — neutral site stylesheet One file for every page type: landing, lists (publications, micro, talks), long documents (Pandoc lecture notes, writings). Layout idea: an optional left rail for in-page navigation + one reading column. ========================================================================== */ /* ---------- Tokens ---------- */ :root{ color-scheme: light dark; --bg:#ffffff; --surface:#f6f6f4; --fg:#1b1b1b; --mut:#62625e; --faint:#8b8b86; --rule:#e3e2de; --acc:#1f4f8f; /* links, theorem accents */ --acc-soft:#e9eef6; --ok:#2f6b4f; /* definitions */ --serif:"Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --sans:"Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif; --mono:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace; --measure:42rem; --rail:14rem; --gap:3.5rem; } @media (prefers-color-scheme: dark){ :root{ --bg:#141414; --surface:#1c1c1b; --fg:#e7e6e2; --mut:#a3a29c; --faint:#7c7b76; --rule:#2e2e2c; --acc:#8fb4ea; --acc-soft:#1c2533; --ok:#86c2a3; } } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{font-size:17.5px;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);line-height:1.6; font-optical-sizing:auto;text-rendering:optimizeLegibility} a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px} img,canvas,svg,video{max-width:100%;height:auto} hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0} code,kbd,pre{font-family:var(--mono);font-size:.86em} pre{background:var(--surface);padding:.9rem 1rem;border-radius:4px;overflow-x:auto;line-height:1.45} :not(pre)>code{background:var(--surface);padding:.08em .3em;border-radius:3px} table{border-collapse:collapse;font-size:.95rem;margin:1.2rem 0;display:block;overflow-x:auto} th,td{padding:.35rem .8rem;border-bottom:1px solid var(--rule);text-align:left} th{font-family:var(--sans);font-weight:600;font-size:.85rem} .skip-link{position:absolute;left:-999px} .skip-link:focus{left:1rem;top:1rem;background:var(--bg);padding:.4rem .7rem;z-index:10} :focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* ---------- Site header (same on every page) ---------- */ .site-header{border-bottom:1px solid var(--rule);font-family:var(--sans)} .site-header .inner{max-width:calc(var(--rail) + var(--gap) + var(--measure) + 3rem);margin:0 auto; padding:.85rem 1.5rem;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;flex-wrap:wrap} .site-name{font-weight:600;color:var(--fg);font-size:1rem;letter-spacing:.005em} .site-name:hover{text-decoration:none;color:var(--acc)} .site-nav{display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;font-size:.92rem} .site-nav a{color:var(--mut)} .site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--fg);text-decoration:none} .site-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--acc)} /* ---------- Layout ---------- */ .layout{max-width:calc(var(--rail) + var(--gap) + var(--measure) + 3rem);margin:0 auto;padding:3rem 1.5rem 4rem; display:grid;grid-template-columns:var(--rail) minmax(0,var(--measure));column-gap:var(--gap)} .layout > .rail{grid-column:1} .layout > .content{grid-column:2;min-width:0} .layout--single{grid-template-columns:minmax(0,var(--measure))} .layout--single > .content{grid-column:1} .rail{font-family:var(--sans);font-size:.88rem;line-height:1.4} .rail > *{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow:auto} /* ---------- Typography in the reading column ---------- */ .content h1{font-weight:600;font-size:2rem;line-height:1.15;margin:0 0 .5rem;letter-spacing:-.01em} .content h2{font-weight:600;font-size:1.35rem;line-height:1.25;margin:2.6rem 0 .7rem} .content h3{font-weight:600;font-size:1.1rem;margin:2rem 0 .5rem} .content h4,.content h5{font-family:var(--sans);font-weight:600;font-size:.9rem;margin:1.5rem 0 .4rem} .content p{margin:0 0 1rem} .content ul,.content ol{padding-left:1.3rem;margin:0 0 1rem} .content li{margin:.2rem 0} .content blockquote{margin:1.2rem 0;padding-left:1rem;border-left:2px solid var(--rule);color:var(--mut)} .lead{font-size:1.15rem;line-height:1.55} .meta,.kicker{font-family:var(--sans);font-size:.88rem;color:var(--mut)} .kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:600;margin:0 0 .4rem} .section-title{font-family:var(--sans);font-size:.78rem !important;font-weight:600 !important;text-transform:uppercase; letter-spacing:.09em;color:var(--mut);margin:3rem 0 1rem !important;padding-bottom:.4rem;border-bottom:1px solid var(--rule)} .more{font-family:var(--sans);font-size:.9rem} /* ---------- Generic list of items (micro, talks, teaching, sections) ---------- */ .items{list-style:none;padding:0 !important;margin:0 0 1rem} .items > li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1.25rem;padding:.55rem 0;border-bottom:1px solid var(--rule);margin:0} .items > li:last-child{border-bottom:0} .items .when,.items .what{font-family:var(--sans);font-size:.85rem;color:var(--mut);padding-top:.12rem} .items .desc{display:block;color:var(--mut);font-size:.92rem} /* ---------- Publications ---------- */ .pub-tools{font-family:var(--sans);display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:1.6rem 0 .5rem} .chips{display:flex;flex-wrap:wrap;gap:.35rem} .chip{font:inherit;font-size:.82rem;border:1px solid var(--rule);background:var(--bg);color:var(--mut); padding:.2rem .65rem;border-radius:999px;cursor:pointer} .chip:hover{border-color:var(--faint);color:var(--fg)} .chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)} .chip .n{opacity:.6;margin-left:.25rem;font-variant-numeric:tabular-nums} .search{font:inherit;font-size:.9rem;padding:.35rem .7rem;border:1px solid var(--rule);border-radius:6px;background:var(--bg); color:var(--fg);flex:1 1 12rem;max-width:18rem} .pub-count{font-size:.85rem;color:var(--mut)} .year{scroll-margin-top:1.5rem} .year > h2{font-family:var(--sans);font-size:1rem;font-weight:600;margin:2.4rem 0 .4rem;padding-bottom:.35rem;border-bottom:1px solid var(--rule); display:flex;justify-content:space-between;align-items:baseline} .year > h2 small{font-weight:400;color:var(--faint);font-size:.8rem} .pubs{list-style:none;padding:0 !important;margin:0} .pub{display:grid;grid-template-columns:3.3rem minmax(0,1fr);gap:1rem;padding:.7rem 0;margin:0 !important;border-bottom:1px solid var(--rule)} .pub:last-child{border-bottom:0} .pub-id{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums;padding-top:.2rem} .pub-title{font-weight:600;line-height:1.35;display:block} .pub-authors{display:block;font-size:.93rem;color:var(--mut);margin-top:.1rem} .pub-authors b{font-weight:600;color:var(--fg)} .pub-venue{display:block;font-size:.93rem;font-style:italic;margin-top:.05rem} .pub-links{display:flex;flex-wrap:wrap;gap:.1rem .9rem;margin-top:.3rem;font-family:var(--sans);font-size:.8rem} .badge{font-family:var(--sans);font-style:normal;font-size:.72rem;font-weight:600;color:var(--acc);background:var(--acc-soft); padding:.08rem .45rem;border-radius:3px;margin-left:.4rem;vertical-align:.08em;white-space:nowrap} .legend{font-family:var(--sans);font-size:.82rem;color:var(--mut);margin-top:2.5rem} .rail .toc-years{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem .6rem} .rail .toc-years a{color:var(--mut);font-variant-numeric:tabular-nums} .rail .toc-years a:hover{color:var(--fg)} .rail .rail-title{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:0 0 .6rem} .rail .rail-block + .rail-block{margin-top:1.8rem} .rail .rail-block p{margin:.2rem 0;color:var(--mut)} /* ========================================================================== Pandoc documents (lecture notes, writings) Works on unmodified Pandoc HTML: