version: 1.0 updated: 2025-10-18 #
Volt CSS Semantics #
Auto-generated documentation from base.css
CSS Custom Properties #
All design tokens defined in the stylesheet.
Typography #
--font-size-base:18px--font-size-sm:0.889rem--font-size-lg:1.125rem--font-size-xl:1.266rem--font-size-2xl:1.424rem--font-size-3xl:1.802rem--font-size-4xl:2.027rem--font-size-5xl:2.566rem--font-sans:"Inter", sans-serif--font-serif:"Libre Baskerville", serif--font-mono:"Google Sans Code", monospace--line-height-tight:1.25--line-height-base:1.6--line-height-relaxed:1.8--font-size-base:16px--font-size-base:15px
Spacing #
--space-xs:0.25rem--space-sm:0.5rem--space-md:1rem--space-lg:1.5rem--space-xl:2rem--space-2xl:3rem--space-3xl:4rem--space-2xl:2rem--space-3xl:3rem
Layout #
--content-width:70ch--sidenote-width:18rem--sidenote-gap:2rem
Colors #
--color-bg:#fefefe--color-bg-alt:#f5f5f5--color-text:#1a1a1a--color-text-muted:#666666--color-accent:#0066cc--color-accent-hover:#0052a3--color-border:#d4d4d4--color-code-bg:#f8f8f8--color-mark:#fff3cd--color-success:#22863a--color-warning:#bf8700--color-error:#cb2431--color-bg:#1a1a1a--color-bg-alt:#2a2a2a--color-text:#e6e6e6--color-text-muted:#a0a0a0--color-accent:#4da6ff--color-accent-hover:#66b3ff--color-border:#404040--color-code-bg:#2a2a2a--color-mark:#4a4a00--color-success:#34d058--color-warning:#ffdf5d--color-error:#f97583
Effects #
--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05)--shadow-md:0 4px 6px rgba(0, 0, 0, 0.07)--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.1)--radius-sm:3px--radius-md:6px--radius-lg:8px--transition-fast:150ms ease-in-out--transition-base:250ms ease-in-out--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3)--shadow-md:0 4px 6px rgba(0, 0, 0, 0.4)--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.5)
Element Coverage #
HTML elements with defined styling in the stylesheet.
Coverage: 58/60 elements
Styled Elements #
Document Structure: html, body Typography: h1, h2, h3, h4, h5, h6, p, a, em, strong, mark, small, sub, sup, hr Lists: ul, ol, li, dl, dt, dd Semantic: blockquote, cite, article, section, aside, header, footer, nav, details, summary Forms: form, fieldset, legend, label, input, select, textarea, button Tables: table, thead, th, td Media: img, figure, figcaption, video, audio, canvas, svg, iframe Code: code, pre, kbd, samp, var
Unstyled Elements #
tbody, tr
Documentation Comments #
Inline documentation extracted from CSS comments.
:root #
Root-level CSS variables define the design system. Light theme is default, dark theme overrides via media query.
@media (prefers-color-scheme: dark) #
Dark Theme Overrides Automatically applied when user prefers dark color scheme
*, *::before, *::after #
CSS reset
html #
Document root configuration Sets base font size for rem calculations
body #
Body element - Primary container Sets default typography and colors for the entire document
h1, h2, h3, h4, h5, h6 #
Headings hierarchy Uses modular scale for harmonious sizing Tighter line-height for larger text improves readability
h1 #
Individual heading sizes h1-h3 use slightly larger weights for emphasis
p #
Paragraph spacing Generous spacing between paragraphs aids scanning
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p #
First paragraph after headings - No top margin Inspired by tufte.css
a #
Links Uses accent color with underline for clarity
em #
Emphasis and strong elements
mark #
Marked/highlighted text
sub, sup #
Subscript and superscript Prevents them from affecting line height
small #
Small text Also used for Tufte-style sidenotes (see sidenotes section)
ul, ol #
List spacing and indentation Nested lists inherit spacing
li #
List items
li > ul, li > ol #
Nested lists - Reduced spacing
dl #
Description lists - For key-value pairs
p:has(small) #
Parent paragraph must be positioned for absolute children
p small #
Pull small elements into the right margin Creates classic Tufte-style sidenote layout
@media (max-width: 767px) #
Mobile sidenotes - Inline with subtle styling
blockquote #
Blockquote styling Left border for visual distinction, italic for emphasis
cite #
Citation element
code #
Inline code Monospace font with subtle background
kbd #
Keyboard input Styled like keys on a keyboard
samp #
Sample output
var #
Variable
pre #
Preformatted code blocks Horizontal scrolling for overflow, no word wrap
hr #
Section dividers Centered decorative element
table #
Table container for horizontal scrolling on small screens
thead #
Table header styling Bold text with bottom border
td #
Table cells
tbody tr:nth-child(even) #
Zebra striping for easier row scanning
tbody tr:hover #
Hover state for interactive tables
form #
Form container spacing
fieldset #
Fieldset grouping
label #
Labels Block display for better touch targets
textarea #
Textarea specific
input[type="checkbox"], #
Checkboxes and radio buttons
input[type="file"] #
File input
input[type="range"] #
Range input
progress, meter #
Progress and meter
input[type="reset"] #
Reset button - Subdued styling
img #
Images Responsive by default, maintains aspect ratio
figure #
Figures with captions Common in academic and technical writing
video, audio #
Video and audio
article, section #
Article and Section Spacing between major content blocks
aside #
Aside Complementary content, styled distinctly
header #
Header and Footer
details #
Details and Summary Disclosure widget for expandable content
.sr-only #
Screen reader only Hides content visually but keeps it accessible to assistive technology
@media print #
Print-specific optimizations
@media (max-width: 768px) #
Tablet and below - Reduce spacing
@media (max-width: 480px) #
Mobile - Further reduced spacing and sizing