/* All-Time Athletics — minimal stylesheet. Aim: HN / Simon Willison restraint. Two text colours, one accent, one border weight. No shadows, no rounded corners, no gradients. Theme is driven by `data-theme` on ; falls back to OS preference. */ /* ---- design tokens ---------------------------------------------- */ :root, :root[data-theme="light"] { --fg: #1a1a1a; --fg-muted: #707070; --bg: #fdfdfc; --bg-soft: #f4f3ef; /* faint stripe / inline code background */ --row-alt: #f7f7f7; /* very light neutral gray for table zebra */ --border: #d8d6d1; --accent: #1a73e8; --warn: #b87900; /* sparingly: warning text */ --err: #c0392b; /* sparingly: error text + border */ } :root[data-theme="dark"] { --fg: #ededed; --fg-muted: #909090; --bg: #111111; --bg-soft: #1b1b1b; --row-alt: #161616; --border: #2f2f2f; --accent: #7aa9ff; --warn: #e0a04a; --err: #e57363; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fg: #ededed; --fg-muted: #909090; --bg: #111111; --bg-soft: #1b1b1b; --row-alt: #161616; --border: #2f2f2f; --accent: #7aa9ff; --warn: #e0a04a; --err: #e57363; } } /* Two type sizes for body, one for h2, one for h1 — that's it. */ :root { --fs-xs: 0.82rem; /* meta, captions, tiny labels */ --fs-sm: 0.92rem; /* compact secondary text */ --fs-md: 1rem; /* body */ --fs-lg: 1.15rem; /* h2 */ --fs-xl: 1.5rem; /* h1 */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; } /* ---- reset + base ----------------------------------------------- */ * { box-sizing: border-box; } html { color-scheme: light dark; } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: var(--fs-md); line-height: 1.55; color: var(--fg); background: var(--bg); max-width: 64rem; /* slightly narrower than before, easier to read */ margin: 0 auto; padding: var(--space-3); } a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95em; background: var(--bg-soft); padding: 0 0.25em; } h1 { font-size: var(--fs-xl); margin: var(--space-3) 0 var(--space-1); font-weight: 600; } h2 { font-size: var(--fs-lg); margin: var(--space-4) 0 var(--space-2); font-weight: 600; } p { margin: var(--space-2) 0; } .lede { color: var(--fg); margin: var(--space-2) 0 var(--space-3); } .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; } /* ---- footer ---------------------------------------------------- */ footer { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--border); } footer p { margin: var(--space-1) 0; } /* ---- github corner (top-right) -------------------------------- */ .github-corner { position: fixed; top: 0; right: 0; z-index: 20; line-height: 0; text-decoration: none; } .github-corner svg { display: block; width: 72px; height: 72px; } .github-corner-bg { fill: var(--fg); } .github-corner-arm, .github-corner-body { fill: var(--bg); } .github-corner:hover .github-corner-arm { animation: octocat-wave 560ms ease-in-out; transform-origin: 130px 106px; } @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } } @media (max-width: 500px) { .github-corner svg { width: 56px; height: 56px; } .github-corner:hover .github-corner-arm { animation: none; } } /* ---- primary nav (top of every page) -------------------------- */ .primary-nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); padding-right: 80px; /* clear the fixed github corner */ border-bottom: 1px solid var(--border); } .nav-brand { font-size: var(--fs-md); font-weight: 600; color: var(--fg); text-decoration: none; align-self: center; padding: 0.4rem 0; letter-spacing: -0.01em; } .nav-brand:hover { color: var(--accent); } .nav-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-tabs { display: flex; flex-wrap: wrap; margin-left: auto; /* push tabs to the right of brand */ gap: 0; } .nav-tab { font-size: var(--fs-sm); padding: 0.4rem 0.85rem; color: var(--fg-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; /* sit on the row's bottom border */ } .nav-tab:hover { color: var(--fg); } .nav-tab-active { color: var(--fg); border-bottom-color: var(--fg); font-weight: 500; } .nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (max-width: 600px) { .primary-nav { padding-right: 64px; } .nav-tabs { margin-left: 0; width: 100%; } .nav-tab:first-child { padding-left: 0; } } /* ---- single card style ----------------------------------------- */ /* Every "panel" on the site shares the same card chrome. */ .card, .recent-panel, .summary-card { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); background: transparent; } .card > h2:first-child { margin-top: 0; } /* ---- socials --------------------------------------------------- */ .socials { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; gap: var(--space-2); } .socials a { display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); text-decoration: none; transition: color 120ms ease; } .socials a:hover { color: var(--accent); } /* ---- download page --------------------------------------------- */ .download-table { border-collapse: collapse; margin: var(--space-3) 0; width: 100%; max-width: 720px; } .download-table th, .download-table td { border-bottom: 1px solid var(--border); padding: var(--space-1) var(--space-2); text-align: left; vertical-align: top; } .download-table th { font-weight: 600; } .download-table td.num { white-space: nowrap; color: var(--fg-muted); } /* ---- meta tags ------------------------------------------------- */ .meta-tag { font-size: var(--fs-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin-left: var(--space-2); vertical-align: middle; } .meta-tag::before { content: "· "; opacity: 0.6; } .meta-tag:first-of-type { margin-left: var(--space-3); } /* ---- buttons --------------------------------------------------- */ .btn { font: inherit; font-size: var(--fs-sm); padding: 0.25rem 0.7rem; border: 1px solid var(--border); background: var(--bg); color: var(--fg); cursor: pointer; border-radius: 0; text-decoration: none; display: inline-block; } .btn:hover { border-color: var(--fg-muted); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn-on, .legality-tabs .tab[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); } .btn-sm { font-size: var(--fs-xs); padding: 0.15rem 0.5rem; } /* Native