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.125rem;
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 --size: 0.3125rem;
242 content: '';
243 position: absolute;
244 left: -0.785rem;
245 top: calc((1.75em - var(--size)) / 2);
246 width: var(--size);
247 height: var(--size);
248 border-radius: 50%;
249 background-color: var(--text-tertiary);
250}
251
252/* Ordered lists */
253.prose ol {
254 list-style-position: outside;
255 padding-left: 0;
256 margin-left: 1.25rem;
257 margin-bottom: 1.75em;
258 counter-reset: item;
259}
260
261.prose ol li {
262 display: block;
263 position: relative;
264 padding-left: 0.125rem;
265 margin-bottom: 0.5em;
266}
267
268.prose ol li:last-child {
269 margin-bottom: 0;
270}
271
272.prose ol li::before {
273 content: counter(item) '.';
274 counter-increment: item;
275 position: absolute;
276 left: -1.15rem;
277 width: 1.5rem;
278 text-align: left;
279 color: var(--text-secondary);
280 opacity: 0.75;
281 font-variant-numeric: tabular-nums;
282 font-feature-settings:
283 'tnum' 1,
284 'zero' 0,
285 'cv01' 1,
286 'cv02' 1,
287 'calt' 1,
288 'ss03' 1,
289 'liga' 1,
290 'ordn' 1;
291}
292
293/* Task lists */
294.prose ul.contains-task-list {
295 list-style: none;
296 margin-left: 0;
297 white-space: nowrap;
298}
299
300.prose ul.contains-task-list li::before {
301 content: none;
302}
303
304.prose ul.contains-task-list li.task-list-item {
305 padding-left: 0.125em;
306 margin-bottom: 0.5em;
307}
308
309.prose ul.contains-task-list li.task-list-item:last-child {
310 margin-bottom: 0;
311}
312
313/* Task list checkboxes */
314.prose ul.contains-task-list li.task-list-item input[type='checkbox'] {
315 margin-right: 0.625em;
316 position: relative;
317 top: 0.15em;
318 width: 1em;
319 height: 1em;
320 border: 1.35px solid var(--text-tertiary);
321 border-radius: 4px;
322 background: transparent;
323 appearance: none;
324 -webkit-appearance: none;
325}
326
327.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked {
328 position: relative;
329 background: var(--code-bg);
330 font-family: var(--sans);
331 border: 1.35px solid var(--text-tertiary);
332 opacity: 0.75;
333}
334
335.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked::after {
336 content: '✓';
337 position: absolute;
338 top: 50%;
339 left: 50%;
340 transform: translate(-45%, -55%);
341 font-family: var(--sans);
342 font-size: 10px;
343 font-weight: 650;
344 color: var(--text-primary);
345 opacity: 0.55;
346}
347
348.prose ul.contains-task-list li.task-list-item input[type='checkbox'] + * {
349 display: inline;
350 margin-left: 0;
351 line-height: 1.75;
352 white-space: nowrap;
353}
354
355/* .prose ul.contains-task-list li.task-list-item:has(input[type='checkbox']:checked) {
356 text-decoration: line-through;
357} */
358
359/* Subscript and superscript */
360.prose sup,
361.prose sub,
362.prose sup a {
363 margin: 0 0.125em;
364 font-size: 0.875em;
365 line-height: 1;
366}
367
368/* Horizontal rule */
369.prose hr {
370 margin: 3.75em 0;
371 height: auto;
372 border: none;
373 background: none;
374 text-align: center;
375 position: relative;
376}
377
378.prose hr::before {
379 content: '***';
380 font-family: var(--mono);
381 color: var(--text-tertiary);
382 font-size: 0.875em;
383 letter-spacing: 0.25em;
384}
385
386/* Keyboard input */
387.prose kbd {
388 font-family: var(--mono);
389 font-size: var(--font-size-s);
390 border: 1px solid var(--text-tertiary);
391 padding: 1px 4px;
392 border-radius: 5px;
393 min-width: 1.75em;
394 display: inline-block;
395 text-align: center;
396 /* box-shadow: inset 0 -2.5px 0 var(--border); */
397}
398
399/* Highlighted text */
400.prose mark {
401 background-color: var(--mark);
402 color: var(--text-primary);
403 padding: 3px 1px;
404}
405
406/* Footnotes */
407.prose .footnotes {
408 margin-top: 4rem;
409 padding-top: 1.75rem;
410 position: relative;
411}
412
413.prose .footnotes::before {
414 content: '';
415 position: absolute;
416 top: 0;
417 left: 0;
418 width: 4rem;
419 height: 1px;
420 background-color: var(--border);
421}
422
423.prose cite {
424 font-style: normal;
425}
426
427/* Footnote references */
428.prose [data-footnote-backref] {
429 position: relative;
430 font-family: var(--mono);
431 font-size: var(--font-size-l);
432 top: -0.05em;
433}
434
435.prose [data-footnote-ref] {
436 font-size: 1em;
437 font-variant-numeric: tabular-nums;
438 font-feature-settings:
439 'tnum' 1,
440 'zero' 0,
441 'cv01' 1,
442 'cv02' 1,
443 'calt' 1,
444 'ss03' 1,
445 'liga' 1,
446 'ordn' 1;
447}
448
449.prose [data-footnote-ref],
450.prose [data-footnote-backref] {
451 color: var(--text-secondary);
452 opacity: 0.875;
453 text-decoration: none;
454 transition: color 0.2s ease-out;
455 padding-right: 0.125em;
456}
457
458.prose [data-footnote-ref]:hover,
459.prose [data-footnote-backref]:hover {
460 color: var(--text-primary);
461}
462
463/* Footnote highlight animation */
464.prose .footnotes li.footnote-highlight,
465.prose sup.footnote-highlight,
466.prose cite.footnote-highlight {
467 animation: footnote-highlight 1.35s ease-out;
468}
469
470@keyframes footnote-highlight {
471 0%,
472 87% {
473 background-color: var(--selection);
474 }
475 100% {
476 background-color: transparent;
477 }
478}
479
480/* Code blocks */
481.prose pre {
482 background-color: var(--astro-code-background);
483 border-radius: 8px;
484 padding: 1.25em 1.5em;
485 margin: 2em 0;
486 overflow-x: auto;
487}
488
489@media (max-width: 768px) {
490 .prose pre {
491 padding: 1em 1.25em;
492 }
493}
494
495.prose pre > code {
496 font-family: var(--mono);
497 font-feature-settings:
498 'liga' 0,
499 'calt' 0;
500 display: block;
501 white-space: pre;
502 word-break: normal;
503 overflow-wrap: normal;
504 padding: 0;
505 margin: 0;
506 background: none;
507 border: none;
508 line-height: 1.5;
509 border-radius: 0;
510}
511
512.prose pre > code * {
513 font-size: var(--font-size-s);
514}
515
516/* KaTeX Math Rendering */
517
518/* Hide MathML fallback to prevent duplication */
519.katex-mathml {
520 display: none !important;
521}
522
523/* Ensure display math is centered */
524.katex-display {
525 text-align: center;
526 margin: 1.75em 0;
527}
528
529/* Reset any conflicting styles that might interfere with KaTeX */
530.katex * {
531 box-sizing: content-box;
532}
533
534/* Ensure KaTeX elements inherit color properly */
535.katex,
536.katex * {
537 color: inherit;
538}
539
540/* Specific fixes for common CSS framework conflicts */
541.katex .base,
542.katex .strut,
543.katex .mathit,
544.katex .mathrm,
545.katex .mathbf,
546.katex .mathsf,
547.katex .mathtt {
548 line-height: initial;
549 vertical-align: baseline;
550}
551
552/* Dark mode support */
553@media (prefers-color-scheme: dark) {
554 .katex,
555 .katex * {
556 color: inherit;
557 }
558}
559
560/* Reading Time */
561.reading-time {
562 color: var(--text-secondary);
563 letter-spacing: -0.025em;
564}
565
566.reading-time .separator {
567 margin: 0 0.25em;
568}
569
570/* Video */
571.prose iframe {
572 width: 100%;
573 aspect-ratio: 16/9;
574 border: none;
575 border-radius: 6px;
576 margin: 0.25em 0 0 0;
577}
578
579/* Spotify */
580.prose iframe[src*='spotify.com'] {
581 aspect-ratio: auto;
582}