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