Skip to main content

links.css

This stylesheet implements gwern.net's distinctive link iconography system, which adds small visual indicators after links to denote their type, source domain, or file format.

Pathcss/links.css
LanguageCSS
Lines1100
Sourcecss/links.css
at 406d3e423

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

Overview​

This stylesheet implements gwern.net's distinctive link iconography system, which adds small visual indicators after links to denote their type, source domain, or file format. The philosophy is that link text often omits important context (e.g., whether a link is a PDF, a Wikipedia article, or a YouTube video), and compact icons can communicate this without interrupting the flow of text.

The file contains over 1100 lines defining two main systems: annotation indicators (the subtle "dog-ear" marks showing a link has popup content) and link icons (domain-specific or filetype icons). Icons can be either SVG-based graphical icons or textual icons using special Unicode characters or custom font rendering.

Link icons are styled to be subtle (50-90% opacity) and minimally intrusive, typically appearing as small marks to the right of the link. The system supports both monochrome icons (which invert in dark mode) and colored icons (which have hover variants).

Key Selectors/Variables​

Annotation Indicators​

  • .markdownBody a.has-indicator-hook: Links with popup annotations
    • .indicator-hook::before: The "dog-ear" triangle using linear gradients
  • .markdownBody a.has-annotation: Dotted underline for fully annotated links
  • .markdownBody a.has-annotation-partial: Dotted underline for partial annotations
  • a[data-link-icon-color]:hover: Colored hover state for link icons

  • Common base styles:

    • .markdownBody a.has-icon: Base spacing adjustments
    • a[data-link-icon-type*='svg']: Graphical SVG icons (default size 0.55em, opacity 0.55)
    • a[data-link-icon-type*='text']: Textual/Unicode icons (default size 0.75em, opacity 0.83)

  • Icon variants:

    • [data-link-icon-type*='quad']: 4-letter square icons (larger, 0.75-0.85em)
    • [data-link-icon-type*='tri']: 3-letter initials (0.65em)
    • [data-link-icon-type*='sans'], [data-link-icon-type*='mono']: Font family variants
    • [data-link-icon-type*='bold'], [data-link-icon-type*='italic']: Weight/style variants
    • [data-link-icon-type*='overline']: Overlined text icons

Domain-Specific Icons​

The file defines icons for 100+ domains and services, including:

Textual/Logotype Icons (there is no SVG arXiv icon—arXiv uses the text icon 𝛘):

  • a[data-link-icon='𝛘']: arXiv (chi symbol)
  • a[data-link-icon='n']: Nature
  • a[data-link-icon='♡']: Fandom/Wikia
  • a[data-link-icon='❐']: Booru sites
  • a[data-link-icon='⧖']: Longecity
  • a[data-link-icon='ℵ']: Unsong (alef)

Graphical Icons (SVG)—note that for SVG icons these rules only tune per-icon metrics (--link-icon-size, offsets, opacity); the actual icon image is assigned at runtime (see below):

  • a[data-link-icon='wikipedia']
  • a[data-link-icon='github']
  • a[data-link-icon='youtube']
  • a[data-link-icon='pdf']: PDF document icon (notably small: 0.45em desktop, 0.6em mobile)
  • a[data-link-icon='twitter']
  • a[data-link-icon='reddit']
  • a[data-link-icon='amazon']
  • a[data-link-icon='openai'], a[data-link-icon='anthropic'], a[data-link-icon='deepmind']
  • a[data-link-icon='internet-archive']
  • Many more (see /lorem#link-icons for visual reference)

Special Categories:

  • News organizations (NYT, Guardian, Washington Post, etc.)
  • Academic publishers (Nature, Science, PLOS, etc.)
  • AI companies (OpenAI, Anthropic, DeepMind, etc.)
  • Tech platforms (GitHub, Stack Exchange, Substack, etc.)
  • File formats (PDF, video icons, etc.)

Custom Properties​

Each icon uses CSS custom properties for fine-tuned positioning:

  • --link-icon-size: Icon dimensions
  • --link-icon-offset-x: Horizontal offset from link text
  • --link-icon-offset-y: Vertical offset (baseline alignment)
  • --link-icon-opacity: Default opacity
  • --link-icon: Text content for textual icons (set at runtime by rewrite.js)
  • --link-icon-url: Background image for SVG icons—not set in this file; rewrite.js's enableLinkIcon() sets it at runtime to a fragment URL into the versioned sprite /static/img/icon/icons.svg (e.g. icons.svg?v=…#wikipedia), or to a data URI for rendered quad-letter icons
  • --link-icon-font: Font family for textual icons
  • --link-icon-font-weight: Weight for textual icons

Loading​

At commit time, build/pre-commit.hook.php runs build/build_unified_assets.php, which concatenates this file (after default.css) into style-GENERATED.css, served as /static/css/style.css. That bundle is loaded via a plain synchronous <link rel="stylesheet"> in the SSI include include/inlined-asset-links.html at the top of <body>—not asynchronously. Link icons are still a progressive enhancement: the icon images themselves are attached at runtime by rewrite.js (enableLinkIcon()), and links are fully functional without them.

The icon assignments are generated server-side by the Haskell build system (LinkIcon.hs module), which analyzes URLs and sets data-link-icon and data-link-icon-type attributes (the latter holding comma-separated tokens like svg or text,sans, matched here with *= substring selectors). The SVG sprite /static/img/icon/icons.svg is assembled from individual icons by build/build_icon_sprite_file.php.

See Also