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.3125rem;
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.125rem;
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.625em;
314 position: relative;
315 top: 0.15em;
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.125em;
454}
455
456.prose [data-footnote-ref]:hover,
457.prose [data-footnote-backref]:hover {
458 color: var(--text-primary);
459}
460
461/* Footnote highlight animation */
462.prose .footnotes li.footnote-highlight,
463.prose sup.footnote-highlight,
464.prose cite.footnote-highlight {
465 animation: footnote-highlight 1.35s ease-out;
466}
467
468@keyframes footnote-highlight {
469 0%,
470 87% {
471 background-color: var(--selection);
472 }
473 100% {
474 background-color: transparent;
475 }
476}
477
478/* Code blocks */
479.prose pre {
480 background-color: var(--astro-code-background);
481 border-radius: 8px;
482 padding: 1.25em 1.5em;
483 margin: 2em 0;
484 overflow-x: auto;
485}
486
487@media (max-width: 768px) {
488 .prose pre {
489 padding: 1em 1.25em;
490 }
491}
492
493.prose pre > code {
494 font-family: var(--mono);
495 font-feature-settings:
496 'liga' 0,
497 'calt' 0;
498 display: block;
499 white-space: pre;
500 word-break: normal;
501 overflow-wrap: normal;
502 padding: 0;
503 margin: 0;
504 background: none;
505 border: none;
506 line-height: 1.5;
507 border-radius: 0;
508}
509
510.prose pre > code * {
511 font-size: var(--font-size-s);
512}
513
514/* KaTeX Math Rendering */
515
516/* Hide MathML fallback to prevent duplication */
517.katex-mathml {
518 display: none !important;
519}
520
521/* Ensure display math is centered */
522.katex-display {
523 text-align: center;
524 margin: 1.75em 0;
525}
526
527/* Reset any conflicting styles that might interfere with KaTeX */
528.katex * {
529 box-sizing: content-box;
530}
531
532/* Ensure KaTeX elements inherit color properly */
533.katex,
534.katex * {
535 color: inherit;
536}
537
538/* Specific fixes for common CSS framework conflicts */
539.katex .base,
540.katex .strut,
541.katex .mathit,
542.katex .mathrm,
543.katex .mathbf,
544.katex .mathsf,
545.katex .mathtt {
546 line-height: initial;
547 vertical-align: baseline;
548}
549
550/* Dark mode support */
551@media (prefers-color-scheme: dark) {
552 .katex,
553 .katex * {
554 color: inherit;
555 }
556}
557
558/* Reading Time */
559.reading-time {
560 color: var(--text-secondary);
561 letter-spacing: -0.025em;
562}
563
564.reading-time .separator {
565 margin: 0 0.25em;
566}
567
568/* Video */
569.prose iframe {
570 width: 100%;
571 aspect-ratio: 16/9;
572 border: none;
573 border-radius: 6px;
574 margin: 0.25em 0 0 0;
575}
576
577/* Spotify */
578.prose iframe[src*='spotify.com'] {
579 aspect-ratio: auto;
580}