Skip to main content

initial.css

This is gwern.net's most important stylesheet, containing the foundational CSS that defines the site's visual identity.

Pathcss/initial.css
LanguageCSS
Lines2710
Sourcecss/initial.css
at 406d3e423

Read this when Use this page when tracing styling, layout, typography, color, or mode-specific CSS around initial.

Overview​

This is gwern.net's most important stylesheet, containing the foundational CSS that defines the site's visual identity. It is bundled into head-GENERATED.css (served as head.css) and loaded as a synchronous, render-blocking <link> in the <head> of every page, so critical above-the-fold content renders correctly without a flash of unstyled content (FOUC). (Only the light/dark color styles are literally inlined in <head>; initial.css itself is an external, blocking stylesheet.)

The file is substantial (~2600 lines) and covers the essential visual structure: the layout grid, typography system, semantic heading hierarchy, responsive breakpoints, link underlining, the table of contents, page metadata block, and the distinctive /index page layout. It also includes utility classes, accessibility features, and mobile adaptations.

Key design decisions encoded here include the responsive line-height system (1.45-1.60 depending on viewport width), justified text on desktop (ragged-right on mobile), oldstyle numerals, sophisticated link underlining using text-shadow to skip descenders, and a comprehensive heading system with small-caps and borders.

Key Selectors/Variables​

CSS Variables​

  • --GW-serif-font-stack: Source Serif 4 + fallbacks (main body font)
  • --GW-sans-serif-font-stack: Source Sans 3 + fallbacks (UI elements)
  • --GW-monospaced-font-stack: IBM Plex Mono + fallbacks
  • --GW-body-text-font-size: 20px (desktop), 18px (mobile ≤649px)
  • --GW-body-max-width: 935px
  • --GW-body-side-padding: 20px (desktop), 16px (mobile)
  • --line-height: Responsive (1.45→1.50→1.55→1.60 across 4 breakpoints)
  • --text-indent: 1.75em (default), 2.5em (main content on desktop)
  • --text-alignment: justify (desktop), left (mobile)
  • --text-hyphenation: auto

Layout​

  • html, body: Full-height, zero margin/padding
  • main: Flexbox column, centered, max-width constraint, padding
  • #navbar: Top navigation bar with logo and links
  • article: Main content container
  • header: Page title block
  • #page-metadata: Metadata flex layout with responsive breaks

Typography​

  • .markdownBody: Main content area with justified text, oldstyle numerals, hyphenation
  • .heading: Section headings (H1-H6) with specific sizing/styling
    • H1: Right-aligned, small-caps, 1.75-2em, underlined
    • H2: Uppercase, 1.4em, dotted underline
    • H3-H6: Progressive size reduction
  • blockquote: 3-level nested emphasis with scaling font size
  • .list: Custom bullet markers (stars) and numbered list styling
  • a: Sophisticated underlining using background-image + text-shadow to skip descenders
  • .markdownBody a: Tufte CSS-style underline implementation
  • .has-indicator-hook: Annotated link markers (dog-ear triangles)
  • .inline-icon: Inline SVG icons (moon, gear, manicule, etc.)

Table of Contents​

  • #TOC: Collapsible, two-column on mobile, floating on desktop
  • Wikipedia-style hierarchical numbering (1, 1.1, 1.1.1, etc.)
  • Hover effects with indicator bar

Special Features​

  • .margin-note: Margin notes (inline or popped-out sidenotes)
  • .sidenote: Positioned margin notes on wide viewports (≥1497px)
  • #skip-to-content-link: Accessibility skip link
  • .display-random-*: Random content display system

Page-Specific​

  • body.page-index: /index page with 2-3 column grid layout
  • body.page-404: 404 page adjustments
  • body[class*='-index']: Tag/directory index pages

Loading​

At commit time, build/pre-commit.hook.php runs build/build_unified_assets.php, which concatenates inlined-images-initial-GENERATED.css, initial.css, special-occasions.css, initial-fonts-VERSIONED.css, and reader-mode-initial.css into head-GENERATED.css, served as /static/css/head.css.

That file is loaded via a plain synchronous <link rel="stylesheet" href="/static/css/head.css"> emitted inside the SSI include include/inlined-head.html (built by build/build_head_includes.php), immediately after the inlined light/dark color <style> blocks. Being a blocking link in <head>, it is part of the critical rendering path; the non-critical styles (default.css, links.css) go into the separate style.css bundle linked from the top of <body>.

See Also