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