/* --------------------------------------------------------------------------- One stylesheet. Dark is the default; [data-theme="light"] on flips it. Colours live only in the two token blocks below. --------------------------------------------------------------------------- */ :root { --bg: #16171a; --fg: #cdcbc4; --fg-2: #a8a59d; --fg-3: #8f8d86; --fg-4: #7d7b75; --rule: #3d3d3a; --rule-2: #2e2e2b; --accent: #7fb8a4; --panel: #242422; --select: #2f5d50; --mono: 'Courier Prime', 'Courier New', Courier, monospace; --serif-ko: 'Noto Serif KR', serif; } [data-theme="light"] { --bg: #e1dfd9; --fg: #3a3a38; --fg-2: #54544f; --fg-3: #69696a; --fg-4: #76746e; --rule: #1a1a18; --rule-2: #bfbdb6; --accent: #2f5d50; --panel: #d6d4ce; --select: #dbe6e1; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); } body { font-family: var(--mono); font-size: 15.5px; line-height: 1.62; color: var(--fg); -webkit-font-smoothing: antialiased; } ::selection { background: var(--select); } .page { max-width: 760px; margin: 0 auto; padding: 38px 26px 60px; } a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--bg); background: var(--accent); text-decoration: none; } /* masthead ---------------------------------------------------------------- */ .masthead { border: 1px solid var(--rule); padding: 14px 16px 12px; margin-bottom: 38px; } .namerow { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .sitename { font-weight: 700; font-size: 17px; color: var(--fg); text-decoration: none; } .sitename:hover { color: var(--bg); background: var(--accent); } .themetoggle { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--fg-3); cursor: pointer; line-height: 1; } .themetoggle:hover { color: var(--accent); } [data-icon="moon"] { display: none; } [data-theme="light"] [data-icon="moon"] { display: inline; } [data-theme="light"] [data-icon="sun"] { display: none; } .nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 14.5px; } .nav a { color: var(--fg); } .nav a.here { text-decoration-thickness: 2px; } .serif-ko { font-family: var(--serif-ko); font-size: 15px; line-height: 1.62; } /* page furniture --------------------------------------------------------- */ .pagetitle { font-size: 20px; font-weight: 700; margin: 0 0 22px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } .serif-ko-title { font-size: 31px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; padding-bottom: 10px; } .standfirst { margin: 0 0 30px; font-size: 14px; color: var(--fg-3); text-wrap: pretty; } main p { margin: 0 0 18px; text-wrap: pretty; } main h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; } main ul, main ol { margin: 0 0 18px; padding-left: 26px; display: flex; flex-direction: column; gap: 4px; } .rule { border: 0; border-top: 1px solid var(--rule-2); margin: 44px 0 14px; } .colophon-line { margin: 0; font-size: 13.5px; color: var(--fg-4); } .colophon-line a { color: var(--fg-4); } .updated { margin: 34px 0 0; font-style: italic; font-size: 14px; color: var(--fg-3); } /* Trailing provenance note; the footer rule below it does the separating. */ .pagenote { margin: 0; font-size: 14px; color: var(--fg-3); text-wrap: pretty; } /* citation lists --------------------------------------------------------- */ .entries { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 26px; } .entries .entry p { margin: 0; } .entry-title { text-wrap: pretty; } .entry-authors { color: var(--fg-2); text-wrap: pretty; } .entry-venue { font-style: italic; color: var(--fg-3); } .entry-venue strong { font-weight: 700; font-style: normal; } .section-head { font-size: 15px; font-weight: 700; margin: 0 0 16px; } /* Publications only: journal italic, volume bold, the rest roman. */ .publications .entry-venue { font-style: normal; } .publications .entry-venue em { font-style: italic; } /* Year / status headings that break the list up. */ .year-head { font-size: 15px; font-weight: 700; color: var(--fg); margin: 0 0 18px; padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); } .year-head + .entries { margin-bottom: 40px; } /* The title carries its own rule, so keep the first year heading off it. */ .pagetitle + .year-head { margin-top: 30px; } /* Outlined link chips under each entry. */ .entries .entry .entry-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; } .chip { display: inline-block; padding: 3px 11px; border: 1px solid var(--rule); background: none; color: var(--fg-2); font: inherit; font-size: 12px; line-height: 1.55; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .chip:hover, .chip[aria-expanded="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); } /* Wrap rather than scroll: author lines are long and this sits inside a list. */ pre.bibtex { margin: 12px 0 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; } /* code list on Research -------------------------------------------------- */ .codelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .codelist .note { font-size: 14px; color: var(--fg-2); } .subhead-rule { padding-top: 8px; border-top: 1px solid var(--rule-2); margin-bottom: 14px; } /* 씀 index -------------------------------------------------------------- */ .postlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; } .postlist > li { padding-bottom: 26px; border-bottom: 1px solid var(--rule-2); } .postlist h2 { font-size: 17px; font-weight: 700; margin: 0 0 8px; line-height: 1.4; text-wrap: pretty; } .postlist h2 a { color: var(--fg); } .excerpt { margin: 0 0 10px; font-size: 14.5px; color: var(--fg-2); } .dateline { margin: 0; font-size: 13.5px; color: var(--fg-4); } .archive-links { margin: 26px 0 0; font-size: 14px; display: flex; gap: 16px; } /* post body ------------------------------------------------------------- */ .backlink { margin: 0 0 20px; font-size: 14px; } .posttitle { font-size: 20px; font-weight: 700; margin: 0 0 6px; line-height: 1.4; text-wrap: pretty; } .postmeta { margin: 0 0 26px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-2); font-size: 14px; color: var(--fg-3); } .post blockquote { margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--rule); font-style: italic; color: var(--fg-2); } .figure { margin: 0 0 22px; } .figure img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); } .figure-placeholder { border: 1px solid var(--rule); background: var(--panel); aspect-ratio: 16/9; display: flex; align-items: flex-end; background-image: repeating-linear-gradient(135deg, rgba(230,228,222,.06) 0 1px, transparent 1px 9px); } .figure-placeholder span { padding: 12px 14px; font-size: 13.5px; color: var(--fg-4); } .figure figcaption { margin: 8px 0 0; font-size: 13.5px; color: var(--fg-4); text-wrap: pretty; } .postnav { margin: 0; font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; } pre, .spec { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--rule); background: var(--panel); font-family: inherit; font-size: 14px; line-height: 1.7; overflow-x: auto; } code { font-family: inherit; font-size: .95em; } @media (max-width: 520px) { .page { padding: 26px 18px 46px; } body { font-size: 15px; } } @media print { :root { --bg: #fff; --fg: #000; } .masthead, .themetoggle, .postnav, .archive-links, .chip-toggle { display: none; } a { color: #000; text-decoration: none; } }