a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1/* ========================================================================== */
2/* Typography & Inline Elements */
3/* */
4/* See variables.css for fonts. */
5/* ========================================================================== */
6
7/**
8 * Headings hierarchy
9 * - Uses modular scale for harmonious sizing
10 * - Tighter line-height for larger text improves readability
11 */
12h1, h2, h3, h4, h5, h6 {
13 font-weight: 700;
14 font-family: var(--font-display);
15 line-height: var(--line-height-tight);
16 color: var(--color-text);
17 margin-top: var(--space-2xl);
18 margin-bottom: var(--space-md);
19 letter-spacing: -0.02em;
20}
21
22h1 {
23 font-size: var(--font-size-5xl);
24 margin-top: 0;
25}
26
27h2 {
28 font-size: var(--font-size-4xl);
29}
30
31h3 {
32 font-size: var(--font-size-3xl);
33}
34
35h4 {
36 font-size: var(--font-size-2xl);
37}
38
39h5 {
40 font-size: var(--font-size-xl);
41}
42
43h6 {
44 font-size: var(--font-size-lg);
45 color: var(--color-text-muted);
46 text-transform: uppercase;
47 letter-spacing: 0.05em;
48}
49
50p {
51 margin-bottom: var(--space-lg);
52 max-width: var(--content-width);
53}
54
55/**
56 * First paragraph after headings - No top margin
57 *
58 * Inspired by tufte.css
59 */
60h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
61 margin-top: 0;
62}
63
64/**
65 * Links
66 *
67 * Uses accent color with underline
68 */
69a {
70 color: var(--color-accent);
71 text-decoration: underline;
72 text-decoration-thickness: 1px;
73 text-underline-offset: 2px;
74 transition: color var(--transition-fast);
75}
76
77a:hover {
78 color: var(--color-accent-hover);
79}
80
81a:focus-visible {
82 outline: 2px solid var(--color-accent);
83 outline-offset: 2px;
84 border-radius: var(--radius-sm);
85}
86
87em {
88 font-style: italic;
89}
90
91strong {
92 font-weight: 700;
93}
94
95mark {
96 background-color: var(--color-mark);
97 padding: 0.1em 0.2em;
98 border-radius: var(--radius-sm);
99}
100
101/**
102 * Subscript and superscript
103 *
104 * Prevents them from affecting line height
105 */
106sub, sup {
107 font-size: 0.75em;
108 line-height: 0;
109 position: relative;
110 vertical-align: baseline;
111}
112
113sup {
114 top: -0.5em;
115}
116
117sub {
118 bottom: -0.25em;
119}
120
121/**
122 * Small text
123 * Also used for Tufte-style sidenotes (see sidenotes section)
124 */
125small {
126 font-size: var(--font-size-sm);
127 color: var(--color-text-muted);
128}
129
130/**
131 * Blockquote styling
132 * Left border for visual distinction, italic for emphasis
133 */
134blockquote {
135 margin: var(--space-xl) 0;
136 padding: var(--space-md) var(--space-lg);
137 border-left: 4px solid var(--color-accent);
138 background-color: var(--color-bg-alt);
139 font-style: italic;
140 color: var(--color-text-muted);
141 max-width: var(--content-width);
142 border-radius: var(--radius-sm);
143}
144
145blockquote p:last-child {
146 margin-bottom: 0;
147}
148
149/**
150 * Citation element
151 */
152cite {
153 font-style: normal;
154 font-size: var(--font-size-sm);
155 color: var(--color-text-muted);
156}
157
158blockquote cite::before {
159 /* em dash */
160 content: "— ";
161}
162
163
164/**
165 * Inline code
166 *
167 * Monospace font with subtle background
168 */
169code {
170 font-family: var(--font-mono);
171 font-size: 0.9em;
172 padding: 0.15em 0.4em;
173 color: var(--color-text);
174 background-color: var(--color-code-bg);
175 border: 1px solid var(--color-border);
176 border-radius: var(--radius-sm);
177}
178
179/**
180 * Keyboard input
181 *
182 * Styled like keys on a keyboard
183 */
184kbd {
185 font-family: var(--font-mono);
186 font-size: 0.9em;
187 padding: 0.15em 0.4em;
188 background-color: var(--color-bg-alt);
189 border: 1px solid var(--color-border);
190 border-radius: var(--radius-sm);
191 box-shadow: 0 1px 0 var(--color-border), 0 0 0 2px var(--color-bg) inset;
192}
193
194samp {
195 font-family: var(--font-mono);
196 font-size: 0.9em;
197}
198
199var {
200 font-family: var(--font-mono);
201 font-style: normal;
202 font-weight: 600;
203}
204
205/**
206 * Preformatted code blocks
207 *
208 * Horizontal scrolling for overflow, no word wrap
209 */
210pre {
211 margin: var(--space-xl) 0;
212 padding: var(--space-lg);
213 color: var(--color-text);
214 background-color: var(--color-code-bg);
215 border: 1px solid var(--color-border);
216 border-radius: var(--radius-md);
217 overflow-x: auto;
218 max-width: var(--content-width);
219 line-height: var(--line-height-base);
220}
221
222pre code {
223 padding: 0;
224 color: inherit;
225 background: none;
226 border: none;
227 font-size: 0.875rem;
228}
229
230
231hr {
232 margin: var(--space-3xl) auto;
233 border: none;
234 border-top: 1px solid var(--color-border);
235 max-width: 50%;
236}