Skip to main content

default.css

This is gwern.net's largest hand-maintained stylesheet, approximately 7,700 lines covering every component, widget, and interactive element not included in the critical <head> CSS.

Pathcss/default.css
LanguageCSS
Lines7679
Sourcecss/default.css
at 406d3e423

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

Overview​

This is gwern.net's largest stylesheet, approximately 7,700 lines covering every component, widget, and interactive element not included in the critical <head> CSS. It's the comprehensive "everything else" stylesheet that handles the full visual implementation of features like collapsible sections, admonitions, popups, sidenotes, footnotes, tables, code blocks, citations, media embeds, and countless other specialized components.

It is a hand-maintained source file (not generated); at build time it is concatenated with links.css, fonts-VERSIONED.css, and inlined-images-GENERATED.css into the style-GENERATED.css bundle served as style.css. It includes extensive CSS for:

  • Interactive UI elements (collapse blocks, tabs, tooltips)
  • Pop-frame system (popups and popovers with complex title bars, scrollbars, controls)
  • Typography refinements (smallcaps, dropcaps, citations, epigraphs)
  • Content types (code blocks, math, tables, figures, blockquotes, lists)
  • Navigation elements (page toolbar, back-to-top links, search UI)
  • Special page types (directory indexes, 404 pages, newsletters)
  • Accessibility features and mobile adaptations

Unlike initial.css—which is bundled into head-GENERATED.css and loaded as a blocking <link> in the <head>—default.css ends up in the style.css bundle, linked from the top of <body>, so first paint of the critical layout does not wait for it.

Key Selector Groups​

Variables​

  • Popup/popover dimensions and constraints (min/max widths and heights for different content types)
  • Page toolbar animation durations and filters
  • Floating header indicators
  • Search interface dimensions
  • Color and pattern references

Generic Elements​

  • button: Reset and base button styling (appearance: none, flexbox layout)

Sections & Headings​

  • .heading: Pointer events and interactive behavior
  • Section self-links (pilcrow ¶ links)
  • Copy link buttons
  • Heading hover states

Collapse Blocks​

  • .collapse: Expandable/collapsible sections
  • Disclosure buttons and indicators
  • Animation states (expanded, collapsed, expanding, collapsing)
  • Special variants: in-blockquotes, inline collapses, aux-links collapses
  • Nested collapse handling

Lists​

  • Continued list numbering
  • Definition lists
  • Footnote lists
  • Multi-column list layouts

Content Blocks​

  • Admonitions (note, tip, warning, error) with icons
  • Epigraphs and poetry
  • Data tables with sorting, scrolling, zebra striping
  • Code blocks with syntax highlighting, line numbers, copy buttons
  • Math rendering (MathJax/KaTeX)
  • Figures and captions
  • Blockquote nesting and styling

Interactive Components​

  • Pop-frames (popups and popovers):

    • Title bars with controls (pin, close, zoom, options)
    • Scrollbars (custom styled)
    • Resize handles
    • Loading states and spinners
    • Content-specific layouts (images, videos, annotations, Wikipedia, tweets)

  • Page Toolbar:

    • Widgets (theme switcher, width adjuster, font size controls)
    • Collapse/expand behavior
    • Button states and animations
    • Mobile adaptations

  • Sidenotes:

    • Positioning and layout
    • Sidenote columns
    • Overflow scrolling
    • Highlight on target

  • Footnotes:

    • Backlinks
    • Footnote references
    • Highlighted states
    • Collapse controls for long footnote sections

Typography Features​

  • Citations (academic citation formatting)
  • Smallcaps (automatic and manual)
  • Dropcaps (5 different decorative initial capital styles)
  • Inflation adjustment indicators
  • Text alignment utilities

Media Embeds​

  • Images (including dark mode filtering, image focus/zoom)
  • Videos (YouTube, Vimeo, local)
  • Audio players
  • PDFs and documents
  • Tweet embeds
  • Wikipedia entry embeds

Navigation & UI Chrome​

  • Floating headers on mobile
  • "Back to top" links
  • Navigation bars
  • Footer
  • Logo brightness toggle
  • Search interface

Specialized Pages​

  • Homepage (body.page-index) special-casing (section link buttons, etc.)
  • Directory/tag index pages
  • Newsletter formatting (dropcap choices)

Responsive Breakpoints​

Multiple @media queries, chiefly:

  • Mobile (max-width: 649px) / non-mobile (min-width: 650px)
  • Mid-width ranges (e.g. max-width: 1179px/1199px)
  • Ultra-wide (min-width: 1761px)

Loading​

At commit time, build/pre-commit.hook.php runs build/build_unified_assets.php, which concatenates inlined-images-GENERATED.css, fonts-VERSIONED.css, default.css, and links.css into style-GENERATED.css, served as /static/css/style.css.

That bundle is loaded as a plain synchronous <link rel="stylesheet"> (with a ?v= version query) via the SSI include include/inlined-asset-links.html, placed at the top of <body> in the page template—there is no JavaScript-injected <link> or media="print" onload trick. The performance effect is positional: the critical CSS (inlined color styles plus the blocking head.css link in <head>) renders the basic layout first, and the large style.css is parsed when encountered in the body.

See Also