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