forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1/* Base styles for all elements */
2.prose * {
3 margin: 0;
4 padding: 0;
5 font-size: var(--font-size-m);
6}
7
8/* Main content container */
9.prose {
10 margin-bottom: 8rem;
11}
12
13/* Remove margin-top for the first child */
14.prose .content > :first-child {
15 margin-top: 0;
16}
17
18/* Post title section */
19.prose .title {
20 margin-bottom: 2.5em;
21}
22
23.prose .title h1 {
24 margin: 0 0 0.375rem 0;
25}
26
27/* Headings (h1-h5)
28 Adjust size or spacing below if needed. */
29.prose h1,
30.prose h2,
31.prose h3,
32.prose h4,
33.prose h5 {
34 font-size: var(--font-size-m);
35 font-weight: var(--font-weight-bold);
36 line-height: 1.75;
37 margin: 3.75em 0 1.75em 0;
38}
39
40/* Bold text */
41.prose strong,
42.prose b {
43 font-weight: var(--font-weight-bold);
44}
45
46/* Italic text */
47.prose em {
48 font-family: var(--serif);
49 font-style: italic;
50 letter-spacing: 0;
51}
52
53/* Links */
54.prose a {
55 color: var(--primary);
56 text-decoration: underline;
57 text-decoration-color: var(--text-tertiary);
58 transition: text-decoration-color 0.2s ease-out;
59}
60
61.prose a:hover {
62 color: var(--primary);
63 text-decoration-color: var(--text-primary);
64}
65
66/* Paragraphs */
67.prose p {
68 line-height: 1.75;
69 margin: 1.75em 0;
70}
71
72/* Tables */
73.prose table {
74 table-layout: fixed;
75 width: 100%;
76 border-collapse: separate;
77 border-spacing: 0;
78 margin: 1.75em 0;
79 font-size: var(--font-size-m);
80 border: 1px solid var(--border);
81 border-radius: 8px;
82 overflow: hidden;
83}
84
85/* Table cells */
86.prose th,
87.prose td {
88 border: none;
89 border-right: 1px solid var(--border);
90 border-bottom: 1px solid var(--border);
91 padding: 0.5em 1em;
92 text-align: left;
93}
94
95.prose th:last-child,
96.prose td:last-child {
97 border-right: none;
98}
99
100.prose tr:last-child td {
101 border-bottom: none;
102}
103
104.prose th {
105 background: var(--astro-code-background);
106 font-weight: var(--font-weight-bold);
107}
108
109/* Images */
110.prose img {
111 max-width: 100%;
112 height: auto;
113 display: block;
114 margin: 2em 0;
115}
116
117.img-placeholder {
118 background: var(--code-bg);
119 display: block;
120}
121
122/* Loading state for images */
123.prose img[loading='lazy'] {
124 opacity: 0;
125 animation: fadeIn 0.3s ease-out forwards;
126}
127
128@keyframes fadeIn {
129 from {
130 opacity: 0;
131 }
132 to {
133 opacity: 1;
134 }
135}
136
137.prose figure {
138 margin-bottom: 2em;
139 text-align: center;
140}
141
142.prose figure img {
143 margin-bottom: 1em;
144}
145
146.prose figure figcaption {
147 color: var(--text-secondary);
148 font-size: var(--font-size-s);
149 text-align: center;
150}
151
152.prose p > img {
153 position: relative;
154 margin-bottom: 2em;
155}
156
157.prose p > img::after {
158 content: attr(alt);
159 display: block;
160 position: absolute;
161 left: 0;
162 width: 100%;
163 text-align: center;
164 color: var(--text-secondary);
165 font-size: var(--font-size-s);
166 margin-top: 0.75em;
167}
168
169.prose .img-caption {
170 display: block;
171 text-align: center;
172 color: var(--text-secondary);
173 font-size: var(--font-size-s);
174 margin-bottom: 2em;
175}
176
177/* Inline code */
178.prose code {
179 padding: 2.5px 3.5px;
180 border-radius: 5px;
181 background-color: var(--code-bg);
182 border: 0.5px solid var(--border);
183 font-family: var(--mono);
184 font-size: 0.9em;
185 font-feature-settings:
186 'liga' 0,
187 'calt' 0;
188 -webkit-font-feature-settings:
189 'liga' 0,
190 'calt' 0;
191}
192
193/* Blockquotes */
194.prose blockquote {
195 border-left: 2px solid var(--border);
196 margin: 0 0 1.75em 0.125em;
197 padding: 0 0 0 1.375em;
198 text-align: left;
199}
200
201.prose blockquote p {
202 margin: 0;
203}
204
205.prose blockquote cite {
206 display: inline-block;
207 margin-top: 0.5em;
208}
209
210/* Unordered lists */
211.prose ul {
212 list-style-type: none;
213 padding-left: 0;
214 margin-left: 1rem;
215 margin-bottom: 1.75em;
216 line-height: 1.75;
217}
218
219.prose ul ul {
220 margin-left: 0.625rem;
221 margin-top: 0.5em;
222 margin-bottom: 0.5em;
223}
224
225.prose ul li {
226 position: relative;
227 padding-left: 0.5rem;
228 margin-bottom: 0.5em;
229}
230
231.prose ul li:last-child {
232 margin-bottom: 0;
233}
234
235.prose ul li > ul {
236 margin-top: 0.5em;
237 margin-bottom: 0.5em;
238}
239
240.prose ul li::before {
241 content: '•';
242 position: absolute;
243 left: -1.25rem;
244 top: -0.05em;
245 width: 1.5rem;
246 text-align: center;
247 color: var(--text-tertiary);
248}
249
250/* Ordered lists */
251.prose ol {
252 list-style-position: outside;
253 padding-left: 0;
254 margin-left: 1.25rem;
255 margin-bottom: 1.75em;
256 counter-reset: item;
257}
258
259.prose ol li {
260 display: block;
261 position: relative;
262 padding-left: 0.25rem;
263 margin-bottom: 0.5em;
264}
265
266.prose ol li:last-child {
267 margin-bottom: 0;
268}
269
270.prose ol li::before {
271 content: counter(item) '.';
272 counter-increment: item;
273 position: absolute;
274 left: -1.15rem;
275 width: 1.5rem;
276 text-align: left;
277 color: var(--text-secondary);
278 opacity: 0.75;
279 font-variant-numeric: tabular-nums;
280 font-feature-settings:
281 'tnum' 1,
282 'zero' 0,
283 'cv01' 1,
284 'cv02' 1,
285 'calt' 1,
286 'ss03' 1,
287 'liga' 1,
288 'ordn' 1;
289}
290
291/* Task lists */
292.prose ul.contains-task-list {
293 list-style: none;
294 margin-left: 0;
295 white-space: nowrap;
296}
297
298.prose ul.contains-task-list li::before {
299 content: none;
300}
301
302.prose ul.contains-task-list li.task-list-item {
303 padding-left: 0.125em;
304 margin-bottom: 0.5em;
305}
306
307.prose ul.contains-task-list li.task-list-item:last-child {
308 margin-bottom: 0;
309}
310
311/* Task list checkboxes */
312.prose ul.contains-task-list li.task-list-item input[type='checkbox'] {
313 margin-right: 0.5em;
314 position: relative;
315 top: 0.175em;
316 width: 1em;
317 height: 1em;
318 border: 1.35px solid var(--text-tertiary);
319 border-radius: 4px;
320 background: transparent;
321 appearance: none;
322 -webkit-appearance: none;
323}
324
325.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked {
326 position: relative;
327 background: var(--code-bg);
328 font-family: var(--sans);
329 border: 1.35px solid var(--text-tertiary);
330 opacity: 0.75;
331}
332
333.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked::after {
334 content: '✓';
335 position: absolute;
336 top: 50%;
337 left: 50%;
338 transform: translate(-45%, -55%);
339 font-family: var(--sans);
340 font-size: 10px;
341 font-weight: 650;
342 color: var(--text-primary);
343 opacity: 0.55;
344}
345
346.prose ul.contains-task-list li.task-list-item input[type='checkbox'] + * {
347 display: inline;
348 margin-left: 0;
349 line-height: 1.75;
350 white-space: nowrap;
351}
352
353/* .prose ul.contains-task-list li.task-list-item:has(input[type='checkbox']:checked) {
354 text-decoration: line-through;
355} */
356
357/* Subscript and superscript */
358.prose sup,
359.prose sub,
360.prose sup a {
361 margin: 0 0.125em;
362 font-size: 0.875em;
363 line-height: 1;
364}
365
366/* Horizontal rule */
367.prose hr {
368 margin: 3.75em 0;
369 height: auto;
370 border: none;
371 background: none;
372 text-align: center;
373 position: relative;
374}
375
376.prose hr::before {
377 content: '***';
378 font-family: var(--mono);
379 color: var(--text-tertiary);
380 font-size: 0.875em;
381 letter-spacing: 0.25em;
382}
383
384/* Keyboard input */
385.prose kbd {
386 font-family: var(--mono);
387 font-size: var(--font-size-s);
388 border: 1px solid var(--text-tertiary);
389 padding: 1px 4px;
390 border-radius: 5px;
391 min-width: 1.75em;
392 display: inline-block;
393 text-align: center;
394 /* box-shadow: inset 0 -2.5px 0 var(--border); */
395}
396
397/* Highlighted text */
398.prose mark {
399 background-color: var(--mark);
400 color: var(--text-primary);
401 padding: 3px 1px;
402}
403
404/* Footnotes */
405.prose .footnotes {
406 margin-top: 4rem;
407 padding-top: 1.75rem;
408 position: relative;
409}
410
411.prose .footnotes::before {
412 content: '';
413 position: absolute;
414 top: 0;
415 left: 0;
416 width: 4rem;
417 height: 1px;
418 background-color: var(--border);
419}
420
421.prose cite {
422 font-style: normal;
423}
424
425/* Footnote references */
426.prose [data-footnote-backref] {
427 position: relative;
428 font-family: var(--mono);
429 font-size: var(--font-size-l);
430 top: -0.05em;
431}
432
433.prose [data-footnote-ref] {
434 font-size: 1em;
435 font-variant-numeric: tabular-nums;
436 font-feature-settings:
437 'tnum' 1,
438 'zero' 0,
439 'cv01' 1,
440 'cv02' 1,
441 'calt' 1,
442 'ss03' 1,
443 'liga' 1,
444 'ordn' 1;
445}
446
447.prose [data-footnote-ref],
448.prose [data-footnote-backref] {
449 color: var(--text-secondary);
450 opacity: 0.875;
451 text-decoration: none;
452 transition: color 0.2s ease-out;
453 padding-right: 0.5em;
454}
455
456.prose [data-footnote-ref]:hover,
457.prose [data-footnote-backref]:hover {
458 color: var(--text-primary);
459}
460
461/* Code blocks */
462.prose pre {
463 background-color: var(--astro-code-background);
464 border-radius: 8px;
465 padding: 1.25em 1.5em;
466 margin: 2em 0;
467 overflow-x: auto;
468}
469
470@media (max-width: 768px) {
471 .prose pre {
472 padding: 1em 1.25em;
473 }
474}
475
476.prose pre > code {
477 font-family: var(--mono);
478 font-feature-settings:
479 'liga' 0,
480 'calt' 0;
481 display: block;
482 white-space: pre;
483 word-break: normal;
484 overflow-wrap: normal;
485 padding: 0;
486 margin: 0;
487 background: none;
488 border: none;
489 line-height: 1.5;
490 border-radius: 0;
491}
492
493.prose pre > code * {
494 font-size: var(--font-size-s);
495}
496
497/* KaTeX Math Rendering */
498
499/* Hide MathML fallback to prevent duplication */
500.katex-mathml {
501 display: none !important;
502}
503
504/* Ensure display math is centered */
505.katex-display {
506 text-align: center;
507 margin: 1.75em 0;
508}
509
510/* Reset any conflicting styles that might interfere with KaTeX */
511.katex * {
512 box-sizing: content-box;
513}
514
515/* Ensure KaTeX elements inherit color properly */
516.katex,
517.katex * {
518 color: inherit;
519}
520
521/* Specific fixes for common CSS framework conflicts */
522.katex .base,
523.katex .strut,
524.katex .mathit,
525.katex .mathrm,
526.katex .mathbf,
527.katex .mathsf,
528.katex .mathtt {
529 line-height: initial;
530 vertical-align: baseline;
531}
532
533/* Dark mode support */
534@media (prefers-color-scheme: dark) {
535 .katex,
536 .katex * {
537 color: inherit;
538 }
539}
540
541/* Reading Time */
542.reading-time {
543 color: var(--text-secondary);
544 letter-spacing: -0.025em;
545}
546
547.reading-time .separator {
548 margin: 0 0.25em;
549}
550
551/* Video */
552.prose iframe {
553 width: 100%;
554 aspect-ratio: 16/9;
555 border: none;
556 border-radius: 6px;
557 margin: 0.25em 0 0 0;
558}
559
560/* Spotify */
561.prose iframe[src*='spotify.com'] {
562 aspect-ratio: auto;
563}