primitive · media · v0.1.0
Portfolio-wide sizing defaults for inline <video>, <img>, and <audio> elements inside <article> contexts. No JS, no attributes — wrap your content in an <article> and inline media picks up the rules.
Embed
<link rel="stylesheet" href="https://assets.gf.cx/media/media.css">Defaults
| Element | Cap | Why |
|---|---|---|
<video> | min(100%, 460px) | Half the typical 920px article column · large enough to watch comfortably, small enough not to dominate the page |
<img> | 100% | Photos are content · let them fill the column |
<audio> | min(100%, 460px) | Same logic as video · controls don't need full width |
Override
Set custom values on the host page (or any ancestor):
:root {
--media-video-max-width: 600px; /* larger video on a media-heavy page */
--media-audio-max-width: 320px;
}Where it's used
- pa.gf.cx/evernote/* — note pages with embedded clips + photos
- data.gf.cx — journey-tracker surface (paired with cards.css)
- (more as portfolio surfaces lift to it)
Change once, propagate everywhere
The point: when the visual proportion needs to change, you edit media.css in ~/Code/assets.gf.cx/media/, redeploy assets.gf.cx, and every portfolio surface picks it up on the next CDN refresh.
Cross-references
- cards.css — sibling primitive for the card + card-grid pattern
- page-header.css — sibling primitive for breadcrumb + kicker + h1 typography
media.css · v0.1.0 · specimen page 2026-05-30