/* site.css: the one stylesheet for every page of https://mengyuanli.com/ Look: a white page set like a printed CV. Labels, dates and venues hang in a left margin column; serif text (Literata) fills a text column of about 70 characters, and the two columns together are centred in the window; small apparatus (nav, labels, link rows, footer) is set in Libre Franklin. Structure comes from type, space and neutral hairlines only. One brick accent appears at text level (links, a small label, thin rules). No fills, tinted blocks, gradients, shadows or rounded boxes, in either theme. Contents 1 Tokens: colours, fonts, grid (light, then dark) 2 Base: reset, links, focus, utilities 3 Page grid: .wrap, margin rows (.m + .side), text column (.col) 4 Header: brand, main nav, external links, theme toggle 5 Sections and running text 6 Homepage: masthead, research, join, news, publications, teaching, service, contact 7 Subpages: breadcrumb, page title, paper entries, project lists, course facts, tables, 404 8 Footer (includes the Web-Stat counter rules, kept verbatim) 9 Tablet and phone layouts 10 Print Building blocks for new pages (copy the header, breadcrumb and footer markup from a subpage such as verifiable-ai.html; its footer has no Web-Stat counter, which stays on index.html only): .wrap centred page box; use on the header bar,
and the footer nav.nav.is-short subpage nav: a few page links, then ul.nav-ext with the external link(s) h2.sec section head hanging in the margin, hairline across the text column h2.sec.is-long long section head: sits in the text column under a hairline .col / .prose text column / spaced paragraphs and bulleted lists inside it .m > .side + content a row with a small label in the margin (dates, terms, categories) dl.facts > div.m > dt.side + dd labelled facts (masthead rows, course logistics) ol.pubs > li > .tag, cite, .au, .ve, .aw, .nt, .ds, .desc, .ln paper entries ul.items > li > h3, p, .topics, .ln titled items (research directions, projects) .ln sans link row: DOI · PDF nav.crumbs > ol > li breadcrumb line under the header header.page-head subpage title block (h1, .lede, .meta; optional img.mark in the margin, black line art such as files/Shield.png, inverted in dark mode) .table-wrap > table.tbl hairline table; add .tbl-wide to a long table: from tablet width it spans the margin and text columns, and on phones it scrolls sideways (put p.col.note.scroll-hint before it to say so on phones) .link-list vertical list of links (404 page) Lists styled without bullets need role="list" in the markup (Safari drops list semantics otherwise). */ /* 1 Tokens ================================================================================= */ /* Web fonts: the latin subsets of Libre Franklin and Literata, self-hosted in assets/fonts/ (SIL OFL 1.1, see assets/fonts/OFL.txt), so pages load no third-party CSS or fonts. Same weight ranges and unicode-range as the Google Fonts CSS they came from; other characters (→, ↗) use the fallbacks. */ @font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/libre-franklin-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/literata-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/literata-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #ffffff; /* page */ --ink: #222222; /* body text 15.9:1 on --bg */ --ink-strong: #111111; /* name, heads, titles 18.9:1 */ --muted: #5e5e5e; /* authors, venues, dates, labels 6.5:1 */ --line: #8f8f8f; /* underline of ink links, separator dots 3.2:1 */ --rule: #e3e3e3; /* hairlines: header, footer, years, tables (decorative) */ --rule-strong: #c7c7c7; /* section rules (decorative) */ --accent: #8c2f1b; /* brick, text level only 8.3:1 */ --accent-line: #b87e72; /* underline of brick links 3.4:1 */ --serif: "Literata", Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --side: 11rem; /* margin column: section heads, dates, venues, labels */ --gutter: 2.5rem; --measure: 40rem; /* text column, about 70 characters */ --indent: calc(var(--side) + var(--gutter)); --pad: 2rem; /* page side padding */ --bar: 3.25rem; /* height of the sticky header bar */ color-scheme: light; } /* Dark: neutral near-black (R = G = B); the same brick hue, lightened for contrast */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141414; --ink: #e2e2e2; --ink-strong: #f2f2f2; --muted: #a1a1a1; --line: #6e6e6e; --rule: #2b2b2b; --rule-strong: #444444; --accent: #d8705a; --accent-line: #9b594b; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #141414; --ink: #e2e2e2; --ink-strong: #f2f2f2; --muted: #a1a1a1; --line: #6e6e6e; --rule: #2b2b2b; --rule-strong: #444444; --accent: #d8705a; --accent-line: #9b594b; color-scheme: dark; } /* 2 Base =================================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 1.5rem); /* anchor targets and focused elements clear the sticky bar */ } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 1.125rem; line-height: 1.62; font-variant-numeric: oldstyle-nums; } :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, address) { margin: 0; } /* zero specificity: any spacing rule wins */ h1, h2 { text-wrap: balance; } h3, p, li, dd, cite { text-wrap: pretty; } img { max-width: 100%; height: auto; } address { font-style: normal; } b, strong { font-weight: 600; } /* the serif is loaded up to 600 */ a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: .2em; } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nw { white-space: nowrap; } /* identifiers such as AMD-SB-3036 never split */ .skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .45rem .7rem; background: var(--bg); color: var(--accent); font: 600 .875rem/1.2 var(--sans); } .skip:focus { top: .6rem; outline-offset: 0; } /* 3 Page grid ============================================================================== */ /* The page box holds [margin column | gutter | text column] and is centred in the window (920 px wide on desktop, padding included). The header bar uses the same box: the brand starts at the margin column and the theme toggle ends at the right edge of the text column. */ .wrap { max-width: calc(var(--indent) + var(--measure) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); } .m { display: grid; grid-template-columns: var(--side) minmax(0, var(--measure)); column-gap: var(--gutter); align-items: baseline; } .m > * { grid-column: 2; min-width: 0; } .m > .side { grid-column: 1; grid-row: 1 / span 4; text-align: right; } .side { color: var(--muted); font: 500 .8125rem/1.45 var(--sans); font-variant-numeric: lining-nums tabular-nums; } h3.side { color: var(--ink-strong); font-size: .875rem; font-weight: 600; line-height: 1.4; text-wrap: balance; } .col { margin-left: var(--indent); max-width: var(--measure); } /* 4 Header ================================================================================= */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--rule); } .site-header .wrap { display: flex; align-items: center; min-height: var(--bar); } .brand { flex: 0 0 var(--side); margin-right: var(--gutter); color: var(--ink-strong); font: 600 .9375rem/1.2 var(--serif); text-decoration: none; } .brand:hover { color: var(--accent); } .nav { display: flex; align-items: center; min-width: 0; margin-right: .5rem; } .nav ul { display: flex; flex-wrap: wrap; gap: 0 1.125rem; padding: 0; list-style: none; } .nav a { display: block; padding: .6rem 0; color: var(--ink); font: 500 .875rem/1.2 var(--sans); text-decoration: none; } .nav a:hover, .nav a.hl { color: var(--accent); } .nav a:hover { text-decoration: underline; text-decoration-color: var(--accent-line); } .nav a[aria-current="page"] { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--line); } /* External sites after a thin divider, in the short nav of subpages (