/* ========================================================================= keaganhrankin.github.io Plain CSS on purpose: no YAML front matter, so Jekyll copies this file verbatim and never touches its Sass pipeline. Custom properties do everything Sass variables would. No webfonts, no CDN, no external requests of any kind. Contents 1. Tokens (color, type, space) 2. Reset + base elements 3. Layout primitives (.wrap and the reading measure) 4. Site header / nav / theme toggle 5. Prose 6. Home page 7. Papers page 8. Writing index + post 9. Footer 10. Utilities, motion, print ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKENS Light is the base definition on bare :root. Dark is redefined twice so the OS preference and the manual toggle each win in their own direction: an explicit choice stamps data-theme on ; "system" stamps nothing. ------------------------------------------------------------------------- */ :root { /* Warm off-white paper, softer than a flat #fafafa */ --bg: #fdfdfb; --bg-raised: #f6f5f1; --surface: #f1f0ea; --text: #1a1a18; --text-soft: #3d3d38; --muted: #6b6b64; --faint: #8f8f87; --rule: #e4e2db; --rule-strong: #cfccc2; --link: #2f5d8c; --link-hover: #1d3f63; --accent: #20303a; /* carried over from C_line.svg */ --mark: #fdf3c4; --code-bg: #f1f0ea; /* Syntax highlighting (Rouge emits the classes; these give them colour) */ --code-comment: #7d7a72; --code-keyword: #8a5a9e; --code-string: #46764c; --code-number: #96652c; --code-func: #2f5d8c; --code-punct: #6b6b64; /* Type */ --font-prose: ui-serif, Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* 15px on a phone to 17px on a desktop. */ --fs-base: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem); --lh-prose: 1.65; /* The reading measure. Deliberately capped: nothing widens it on a large display. Pages that need room set --measure via body.is-wide. */ --measure: 44rem; --gutter: 1.25rem; --radius: 4px; --radius-lg: 10px; --shadow: 0 1px 2px rgb(26 26 24 / 6%), 0 6px 20px rgb(26 26 24 / 5%); } /* Warm near-black, not pure #000 */ :root[data-theme="dark"] { --bg: #16171a; --bg-raised: #1d1f23; --surface: #23262b; --text: #e8e6e1; --text-soft: #cfccc5; --muted: #9a978f; --faint: #7b786f; --rule: #2c2f35; --rule-strong: #3d4149; --link: #8ab4dd; --link-hover: #a9cbee; --accent: #c3d3dc; --mark: #4a4327; --code-bg: #1d1f23; --code-comment: #7b786f; --code-keyword: #c9a0dc; --code-string: #9ecf9e; --code-number: #dcb67a; --code-func: #8ab4dd; --code-punct: #9a978f; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 25%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16171a; --bg-raised: #1d1f23; --surface: #23262b; --text: #e8e6e1; --text-soft: #cfccc5; --muted: #9a978f; --faint: #7b786f; --rule: #2c2f35; --rule-strong: #3d4149; --link: #8ab4dd; --link-hover: #a9cbee; --accent: #c3d3dc; --mark: #4a4327; --code-bg: #1d1f23; --code-comment: #7b786f; --code-keyword: #c9a0dc; --code-string: #9ecf9e; --code-number: #dcb67a; --code-func: #8ab4dd; --code-punct: #9a978f; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 20px rgb(0 0 0 / 25%); } } /* ------------------------------------------------------------------------- 2. RESET + BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light dark; } body { margin: 0; background-color: var(--bg); color: var(--text); font-family: var(--font-prose); font-size: var(--fs-base); line-height: var(--lh-prose); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } /* Pages that need more room than the reading measure (papers, post lists). Set on so header, main and footer all share one left edge. */ body.is-wide { --measure: 60rem; } body.is-home { --measure: 48rem; } img, svg, video { max-width: 100%; height: auto; } img { border-radius: var(--radius); } a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { color: var(--link-hover); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; } hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5rem; } ::selection { background: var(--mark); color: var(--text); } /* ------------------------------------------------------------------------- 3. LAYOUT PRIMITIVES One rule handles both wide monitors and narrow phones: the column never exceeds the measure, and always keeps a gutter. No media query needed. ------------------------------------------------------------------------- */ .wrap { width: min(100% - (var(--gutter) * 2), var(--measure)); margin-inline: auto; } main { flex: 1 0 auto; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--bg-raised); color: var(--text); padding: 0.6rem 1rem; z-index: 100; border: 1px solid var(--rule-strong); border-radius: var(--radius); } .skip-link:focus { left: 1rem; top: 1rem; } /* ------------------------------------------------------------------------- 4. SITE HEADER / NAV / THEME TOGGLE ------------------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--rule); background: var(--bg); padding-block: 1.15rem; margin-bottom: 3rem; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* Wordmark: the C_line creature inline, inheriting currentColor so it is theme-aware for free. */ .wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-decoration: none; white-space: nowrap; } .wordmark:hover { color: var(--text); } .wordmark:hover .wordmark__name { text-decoration: underline; text-underline-offset: 0.2em; } /* Currently unused: the C_line mark was removed from the header. Kept so the logo can be restored by uncommenting the
stack */ .factlist { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 2rem 0 0; font-family: var(--font-ui); font-size: 0.9375rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); } .factlist dt { color: var(--faint); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.22em; } .factlist dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 480px) { .factlist { grid-template-columns: 1fr; gap: 0.15rem; } .factlist dd { margin-bottom: 0.7rem; } } .home-section { margin-top: 3.5rem; } /* Keep body copy at a comfortable measure even though the home column is wider to make room for the portrait. */ .home-prose { max-width: 40rem; } /* ------------------------------------------------------------------------- 7. PAPERS ------------------------------------------------------------------------- */ .year-group { margin-bottom: 3rem; } .year-label { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; color: var(--faint); padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; } .paper { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-bottom: 1.9rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--rule); } .year-group .paper:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0.5rem; } .paper__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } /* min-width:0 lets a long unbroken title shrink instead of forcing the grid column wider than the page. */ .paper__body, .hero__intro { min-width: 0; } .paper__title { font-size: 0.9875rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 0.35rem; } .paper__title a { color: var(--text); text-decoration: none; } .paper__title a:hover { color: var(--link); text-decoration: underline; } .paper__authors { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-soft); margin: 0 0 0.15rem; line-height: 1.5; } .paper__authors strong { color: var(--text); font-weight: 650; } .paper__venue { font-size: 0.875rem; font-style: italic; color: var(--muted); margin: 0; } /* var(--text), not a literal black: it resolves to near-black in the light theme and near-white in the dark one, so the note stays readable in both. A hard-coded #000 would disappear against the dark background. */ .paper__note { font-family: var(--font-ui); font-size: 0.875rem; color: var(--text); margin: 0.5rem 0 0; line-height: 1.5; } /* Link chips Doubled-up `.prose .chips` selectors are deliberate, not redundant. Pages using _layouts/page.html render their content inside .prose, whose generic list styles are more specific than a bare `.chips` and were winning: .prose ul (0,1,1) padding-left: 1.4rem indented the whole row 22.4px past the text above it, and margin-block: 0 wiped out the 0.75rem gap below the note .prose li + li (0,1,2) margin-top: 0.5rem pushed every chip after the first 8px below its neighbours `.prose .chips` is (0,2,0) and `.prose .chips > li` is (0,2,1), so both outrank the prose rules. Collapsing these back to plain `.chips` / `.chips > li` reintroduces the misalignment. */ .prose .chips, .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; } /* Chips sit in one row; the prose inter-item rhythm must not apply. */ .prose .chips > li, .chips > li { margin-top: 0; } .chip { display: inline-block; font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; color: var(--text-soft); text-decoration: none; padding: 0.2rem 0.55rem; border: 1px solid var(--rule-strong); border-radius: 100px; background: var(--bg); transition: color 120ms ease, border-color 120ms ease, background 120ms ease; white-space: nowrap; } .chip:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); } @media (max-width: 640px) { .paper { grid-template-columns: 1fr; gap: 0.9rem; } /* Full-width thumb above the text rather than a crushed 150px column */ .paper__thumb { aspect-ratio: 16 / 9; } } .paper-section { margin-bottom: 3.5rem; } .page-footnote { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: 0.875rem; color: var(--muted); } /* Compact list used for talks and press */ .entry-list { list-style: none; padding: 0; margin: 0; } .entry-list > li { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rule); } .entry-list > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .entry__title { font-size: 0.95rem; line-height: 1.4; margin: 0 0 0.2rem; } .entry__title a { color: var(--text); text-decoration: none; } .entry__title a:hover { color: var(--link); text-decoration: underline; } .entry__where { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--muted); margin: 0; } .entry__where em { font-style: normal; color: var(--text-soft); } /* ------------------------------------------------------------------------- 8. WRITING INDEX + POST ------------------------------------------------------------------------- */ .post-list { list-style: none; padding: 0; margin: 0; } .post-list > li { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--rule); } .post-list > li:last-child { border-bottom: 0; margin-bottom: 0; } .post-list__title { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.15rem); line-height: 1.3; margin: 0.3rem 0 0.4rem; } .post-list__title a { color: var(--text); text-decoration: none; } .post-list__title a:hover { color: var(--link); } .post-list__excerpt { margin: 0; color: var(--text-soft); font-size: 0.9375rem; line-height: 1.6; } /* Post header */ .post-header { margin-bottom: 2.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); } .post-header h1 { font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2rem); margin-bottom: 0.6rem; } .post-header__subtitle { font-size: 1.03rem; color: var(--muted); font-style: italic; margin: 0 0 1rem; line-height: 1.5; } .post-header__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; } .post-header__meta .dot { color: var(--rule-strong); } .post-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; } .page-header { margin-bottom: 2.5rem; } .page-header h1 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.8rem); margin-bottom: 0.5rem; } .page-header__intro { color: var(--text-soft); margin: 0; max-width: 44rem; } .empty-note { color: var(--muted); font-style: italic; } /* ------------------------------------------------------------------------- 9. FOOTER ------------------------------------------------------------------------- */ .site-footer { margin-top: 5rem; padding-block: 2rem 2.5rem; border-top: 1px solid var(--rule); font-family: var(--font-ui); font-size: 0.8125rem; color: var(--muted); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .site-footer p { margin: 0; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--text); } .social { display: flex; align-items: center; gap: 1rem; list-style: none; padding: 0; margin: 0; } .social a { display: inline-flex; color: var(--muted); transition: color 120ms ease; } .social a:hover { color: var(--text); } .social svg { width: 19px; height: 19px; display: block; } /* ------------------------------------------------------------------------- 10. UTILITIES, MOTION, PRINT ------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .site-header, .site-footer, .theme-toggle { display: none; } body { background: #fff; color: #000; font-size: 11pt; } a { color: #000; text-decoration: underline; } .paper, .post-list > li { break-inside: avoid; } }