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: 1.5px solid var(--border);
191 margin: 0 0 1.75em 0.125em;
192 padding: 0 0 0 1.5em;
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 border: 1.35px solid var(--text-tertiary);
324 opacity: 0.75;
325}
326
327.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked::before {
328 content: '✓';
329 font-family: var(--sans);
330 color: var(--text-primary);
331 opacity: 0.6;
332 font-weight: var(--font-weight-bold);
333 position: absolute;
334 left: 0.15em;
335 top: 0.05em;
336 font-size: 0.75em;
337 line-height: 1;
338}
339
340.prose ul.contains-task-list li.task-list-item input[type='checkbox'] + * {
341 display: inline;
342 margin-left: 0;
343 line-height: 1.75;
344 white-space: nowrap;
345}
346
347/* .prose ul.contains-task-list li.task-list-item:has(input[type='checkbox']:checked) {
348 text-decoration: line-through;
349} */
350
351/* Subscript and superscript */
352.prose sup,
353.prose sub,
354.prose sup a {
355 margin: 0 0.125em;
356 font-size: 0.875em;
357 line-height: 1;
358}
359
360/* Horizontal rule */
361.prose hr {
362 margin: 3.75em 0;
363 height: auto;
364 border: none;
365 background: none;
366 text-align: center;
367 position: relative;
368}
369
370.prose hr::before {
371 content: '***';
372 font-family: var(--mono);
373 color: var(--text-tertiary);
374 font-size: 0.875em;
375 letter-spacing: 0.25em;
376}
377
378/* Keyboard input */
379.prose kbd {
380 font-family: var(--mono);
381 font-size: var(--font-size-s);
382 border: 1px solid var(--text-tertiary);
383 padding: 1px 4px;
384 border-radius: 5px;
385 min-width: 1.75em;
386 display: inline-block;
387 text-align: center;
388 /* box-shadow: inset 0 -2.5px 0 var(--border); */
389}
390
391/* Highlighted text */
392.prose mark {
393 background-color: var(--mark);
394 color: var(--text-primary);
395 padding: 3px 1px;
396}
397
398/* Footnotes */
399.prose .footnotes {
400 margin-top: 4rem;
401 padding-top: 1.75rem;
402 position: relative;
403}
404
405.prose .footnotes::before {
406 content: '';
407 position: absolute;
408 top: 0;
409 left: 0;
410 width: 4rem;
411 height: 1px;
412 background-color: var(--border);
413}
414
415.prose cite {
416 font-style: normal;
417}
418
419/* Footnote references */
420.prose [data-footnote-backref] {
421 position: relative;
422 font-family: var(--mono);
423 font-size: var(--font-size-l);
424 top: -0.05em;
425}
426
427.prose [data-footnote-ref] {
428 font-size: 1em;
429 font-variant-numeric: tabular-nums;
430 font-feature-settings:
431 'tnum' 1,
432 'zero' 0,
433 'cv01' 1,
434 'cv02' 1,
435 'calt' 1,
436 'ss03' 1,
437 'liga' 1,
438 'ordn' 1;
439}
440
441.prose [data-footnote-ref],
442.prose [data-footnote-backref] {
443 color: var(--text-secondary);
444 opacity: 0.875;
445 text-decoration: none;
446 transition: color 0.2s ease-out;
447 padding-right: 0.5em;
448}
449
450.prose [data-footnote-ref]:hover,
451.prose [data-footnote-backref]:hover {
452 color: var(--text-primary);
453}
454
455/* Code blocks */
456.prose pre {
457 background-color: var(--astro-code-background);
458 border-radius: 8px;
459 padding: 1.25em 1.5em;
460 margin: 2em 0;
461 overflow-x: auto;
462}
463
464@media (max-width: 768px) {
465 .prose pre {
466 padding: 1em 1.25em;
467 }
468}
469
470.prose pre > code {
471 font-family: var(--mono);
472 font-feature-settings:
473 'liga' 0,
474 'calt' 0;
475 display: block;
476 white-space: pre-wrap;
477 word-break: break-word;
478 overflow-wrap: anywhere;
479 padding: 0;
480 margin: 0;
481 background: none;
482 border: none;
483 line-height: 1.5;
484 border-radius: 0;
485}
486
487.prose pre > code * {
488 font-size: var(--font-size-s);
489}
490
491/* KaTeX Math Rendering */
492
493/* Hide MathML fallback to prevent duplication */
494.katex-mathml {
495 display: none !important;
496}
497
498/* Ensure display math is centered */
499.katex-display {
500 text-align: center;
501 margin: 1.75em 0;
502}
503
504/* Reset any conflicting styles that might interfere with KaTeX */
505.katex * {
506 box-sizing: content-box;
507}
508
509/* Ensure KaTeX elements inherit color properly */
510.katex,
511.katex * {
512 color: inherit;
513}
514
515/* Specific fixes for common CSS framework conflicts */
516.katex .base,
517.katex .strut,
518.katex .mathit,
519.katex .mathrm,
520.katex .mathbf,
521.katex .mathsf,
522.katex .mathtt {
523 line-height: initial;
524 vertical-align: baseline;
525}
526
527/* Dark mode support */
528@media (prefers-color-scheme: dark) {
529 .katex,
530 .katex * {
531 color: inherit;
532 }
533}
534
535/* Reading Time */
536.reading-time {
537 color: var(--text-secondary);
538 letter-spacing: -0.025em;
539}
540
541.reading-time .separator {
542 margin: 0 0.25em;
543}
544
545/* Video */
546.prose iframe {
547 width: 100%;
548 aspect-ratio: 16/9;
549 border: none;
550 border-radius: 6px;
551 margin: 0.25em 0 0 0;
552}
553
554/* Spotify */
555.prose iframe[src*='spotify.com'] {
556 aspect-ratio: auto;
557}