a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1---
2version: 1.0
3updated: 2025-10-18
4---
5
6# Volt CSS Semantics
7
8Auto-generated documentation from base.css
9
10## CSS Custom Properties
11
12All design tokens defined in the stylesheet.
13
14### Typography
15
16- `--font-size-base`: `18px`
17- `--font-size-sm`: `0.889rem`
18- `--font-size-lg`: `1.125rem`
19- `--font-size-xl`: `1.266rem`
20- `--font-size-2xl`: `1.424rem`
21- `--font-size-3xl`: `1.802rem`
22- `--font-size-4xl`: `2.027rem`
23- `--font-size-5xl`: `2.566rem`
24- `--font-sans`: `"Inter", sans-serif`
25- `--font-serif`: `"Libre Baskerville", serif`
26- `--font-mono`: `"Google Sans Code", monospace`
27- `--line-height-tight`: `1.25`
28- `--line-height-base`: `1.6`
29- `--line-height-relaxed`: `1.8`
30- `--font-size-base`: `16px`
31- `--font-size-base`: `15px`
32
33### Spacing
34
35- `--space-xs`: `0.25rem`
36- `--space-sm`: `0.5rem`
37- `--space-md`: `1rem`
38- `--space-lg`: `1.5rem`
39- `--space-xl`: `2rem`
40- `--space-2xl`: `3rem`
41- `--space-3xl`: `4rem`
42- `--space-2xl`: `2rem`
43- `--space-3xl`: `3rem`
44
45### Layout
46
47- `--content-width`: `70ch`
48- `--sidenote-width`: `18rem`
49- `--sidenote-gap`: `2rem`
50
51### Colors
52
53- `--color-bg`: `#fefefe`
54- `--color-bg-alt`: `#f5f5f5`
55- `--color-text`: `#1a1a1a`
56- `--color-text-muted`: `#666666`
57- `--color-accent`: `#0066cc`
58- `--color-accent-hover`: `#0052a3`
59- `--color-border`: `#d4d4d4`
60- `--color-code-bg`: `#f8f8f8`
61- `--color-mark`: `#fff3cd`
62- `--color-success`: `#22863a`
63- `--color-warning`: `#bf8700`
64- `--color-error`: `#cb2431`
65- `--color-bg`: `#1a1a1a`
66- `--color-bg-alt`: `#2a2a2a`
67- `--color-text`: `#e6e6e6`
68- `--color-text-muted`: `#a0a0a0`
69- `--color-accent`: `#4da6ff`
70- `--color-accent-hover`: `#66b3ff`
71- `--color-border`: `#404040`
72- `--color-code-bg`: `#2a2a2a`
73- `--color-mark`: `#4a4a00`
74- `--color-success`: `#34d058`
75- `--color-warning`: `#ffdf5d`
76- `--color-error`: `#f97583`
77
78### Effects
79
80- `--shadow-sm`: `0 1px 2px rgba(0, 0, 0, 0.05)`
81- `--shadow-md`: `0 4px 6px rgba(0, 0, 0, 0.07)`
82- `--shadow-lg`: `0 10px 15px rgba(0, 0, 0, 0.1)`
83- `--radius-sm`: `3px`
84- `--radius-md`: `6px`
85- `--radius-lg`: `8px`
86- `--transition-fast`: `150ms ease-in-out`
87- `--transition-base`: `250ms ease-in-out`
88- `--shadow-sm`: `0 1px 2px rgba(0, 0, 0, 0.3)`
89- `--shadow-md`: `0 4px 6px rgba(0, 0, 0, 0.4)`
90- `--shadow-lg`: `0 10px 15px rgba(0, 0, 0, 0.5)`
91
92## Element Coverage
93
94HTML elements with defined styling in the stylesheet.
95
96**Coverage**: 58/60 elements
97
98### Styled Elements
99
100**Document Structure**: html, body
101**Typography**: h1, h2, h3, h4, h5, h6, p, a, em, strong, mark, small, sub, sup, hr
102**Lists**: ul, ol, li, dl, dt, dd
103**Semantic**: blockquote, cite, article, section, aside, header, footer, nav, details, summary
104**Forms**: form, fieldset, legend, label, input, select, textarea, button
105**Tables**: table, thead, th, td
106**Media**: img, figure, figcaption, video, audio, canvas, svg, iframe
107**Code**: code, pre, kbd, samp, var
108
109### Unstyled Elements
110
111tbody, tr
112
113## Documentation Comments
114
115Inline documentation extracted from CSS comments.
116
117### `:root`
118
119Root-level CSS variables define the design system. Light theme is default, dark theme overrides via media query.
120
121### `@media (prefers-color-scheme: dark)`
122
123Dark Theme Overrides Automatically applied when user prefers dark color scheme
124
125### `*, *::before, *::after`
126
127CSS reset
128
129### `html`
130
131Document root configuration Sets base font size for rem calculations
132
133### `body`
134
135Body element - Primary container Sets default typography and colors for the entire document
136
137### `h1, h2, h3, h4, h5, h6`
138
139Headings hierarchy Uses modular scale for harmonious sizing Tighter line-height for larger text improves readability
140
141### `h1`
142
143Individual heading sizes h1-h3 use slightly larger weights for emphasis
144
145### `p`
146
147Paragraph spacing Generous spacing between paragraphs aids scanning
148
149### `h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p`
150
151First paragraph after headings - No top margin Inspired by tufte.css
152
153### `a`
154
155Links Uses accent color with underline for clarity
156
157### `em`
158
159Emphasis and strong elements
160
161### `mark`
162
163Marked/highlighted text
164
165### `sub, sup`
166
167Subscript and superscript Prevents them from affecting line height
168
169### `small`
170
171Small text Also used for Tufte-style sidenotes (see sidenotes section)
172
173### `ul, ol`
174
175List spacing and indentation Nested lists inherit spacing
176
177### `li`
178
179List items
180
181### `li > ul, li > ol`
182
183Nested lists - Reduced spacing
184
185### `dl`
186
187Description lists - For key-value pairs
188
189### `p:has(small)`
190
191Parent paragraph must be positioned for absolute children
192
193### `p small`
194
195Pull small elements into the right margin Creates classic Tufte-style sidenote layout
196
197### `@media (max-width: 767px)`
198
199Mobile sidenotes - Inline with subtle styling
200
201### `blockquote`
202
203Blockquote styling Left border for visual distinction, italic for emphasis
204
205### `cite`
206
207Citation element
208
209### `code`
210
211Inline code Monospace font with subtle background
212
213### `kbd`
214
215Keyboard input Styled like keys on a keyboard
216
217### `samp`
218
219Sample output
220
221### `var`
222
223Variable
224
225### `pre`
226
227Preformatted code blocks Horizontal scrolling for overflow, no word wrap
228
229### `hr`
230
231Section dividers Centered decorative element
232
233### `table`
234
235Table container for horizontal scrolling on small screens
236
237### `thead`
238
239Table header styling Bold text with bottom border
240
241### `td`
242
243Table cells
244
245### `tbody tr:nth-child(even)`
246
247Zebra striping for easier row scanning
248
249### `tbody tr:hover`
250
251Hover state for interactive tables
252
253### `form`
254
255Form container spacing
256
257### `fieldset`
258
259Fieldset grouping
260
261### `label`
262
263Labels Block display for better touch targets
264
265### `textarea`
266
267Textarea specific
268
269### `input[type="checkbox"],`
270
271Checkboxes and radio buttons
272
273### `input[type="file"]`
274
275File input
276
277### `input[type="range"]`
278
279Range input
280
281### `progress, meter`
282
283Progress and meter
284
285### `input[type="reset"]`
286
287Reset button - Subdued styling
288
289### `img`
290
291Images Responsive by default, maintains aspect ratio
292
293### `figure`
294
295Figures with captions Common in academic and technical writing
296
297### `video, audio`
298
299Video and audio
300
301### `article, section`
302
303Article and Section Spacing between major content blocks
304
305### `aside`
306
307Aside Complementary content, styled distinctly
308
309### `header`
310
311Header and Footer
312
313### `details`
314
315Details and Summary Disclosure widget for expandable content
316
317### `.sr-only`
318
319Screen reader only Hides content visually but keeps it accessible to assistive technology
320
321### `@media print`
322
323Print-specific optimizations
324
325### `@media (max-width: 768px)`
326
327Tablet and below - Reduce spacing
328
329### `@media (max-width: 480px)`
330
331Mobile - Further reduced spacing and sizing