Something went wrong. Try again.
Fork of Chiri for Astro for my blog
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582/* Base styles for all elements */.prose * { margin: 0; padding: 0; font-size: var(--font-size-m);}
/* Main content container */.prose { margin-bottom: 8rem;}
/* Remove margin-top for the first child */.prose .content > :first-child { margin-top: 0;}
/* Post title section */.prose .title { margin-bottom: 2.5em;}
.prose .title h1 { margin: 0 0 0.375rem 0;}
/* Headings (h1-h5) Adjust size or spacing below if needed. */.prose h1,.prose h2,.prose h3,.prose h4,.prose h5 { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); line-height: 1.75; margin: 3.75em 0 1.75em 0;}
/* Bold text */.prose strong,.prose b { font-weight: var(--font-weight-bold);}
/* Italic text */.prose em { font-family: var(--serif); font-style: italic; letter-spacing: 0;}
/* Links */.prose a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--text-tertiary); transition: text-decoration-color 0.2s ease-out;}
.prose a:hover { color: var(--primary); text-decoration-color: var(--text-primary);}
/* Paragraphs */.prose p { line-height: 1.75; margin: 1.75em 0;}
/* Tables */.prose table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.75em 0; font-size: var(--font-size-m); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;}
/* Table cells */.prose th,.prose td { border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0.5em 1em; text-align: left;}
.prose th:last-child,.prose td:last-child { border-right: none;}
.prose tr:last-child td { border-bottom: none;}
.prose th { background: var(--astro-code-background); font-weight: var(--font-weight-bold);}
/* Images */.prose img { max-width: 100%; height: auto; display: block; margin: 2em 0;}
.img-placeholder { background: var(--code-bg); display: block;}
/* Loading state for images */.prose img[loading='lazy'] { opacity: 0; animation: fadeIn 0.3s ease-out forwards;}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}
.prose figure { margin-bottom: 2em; text-align: center;}
.prose figure img { margin-bottom: 1em;}
.prose figure figcaption { color: var(--text-secondary); font-size: var(--font-size-s); text-align: center;}
.prose p > img { position: relative; margin-bottom: 2em;}
.prose p > img::after { content: attr(alt); display: block; position: absolute; left: 0; width: 100%; text-align: center; color: var(--text-secondary); font-size: var(--font-size-s); margin-top: 0.75em;}
.prose .img-caption { display: block; text-align: center; color: var(--text-secondary); font-size: var(--font-size-s); margin-bottom: 2em;}
/* Inline code */.prose code { padding: 2.5px 3.5px; border-radius: 5px; background-color: var(--code-bg); border: 0.5px solid var(--border); font-family: var(--mono); font-size: 0.9em; font-feature-settings: 'liga' 0, 'calt' 0; -webkit-font-feature-settings: 'liga' 0, 'calt' 0;}
/* Blockquotes */.prose blockquote { border-left: 2px solid var(--border); margin: 0 0 1.75em 0.125em; padding: 0 0 0 1.375em; text-align: left;}
.prose blockquote p { margin: 0;}
.prose blockquote cite { display: inline-block; margin-top: 0.5em;}
/* Unordered lists */.prose ul { list-style-type: none; padding-left: 0; margin-left: 1rem; margin-bottom: 1.75em; line-height: 1.75;}
.prose ul ul { margin-left: 0.625rem; margin-top: 0.5em; margin-bottom: 0.5em;}
.prose ul li { position: relative; padding-left: 0.125rem; margin-bottom: 0.5em;}
.prose ul li:last-child { margin-bottom: 0;}
.prose ul li > ul { margin-top: 0.5em; margin-bottom: 0.5em;}
.prose ul li::before { --size: 0.3125rem; content: ''; position: absolute; left: -0.785rem; top: calc((1.75em - var(--size)) / 2); width: var(--size); height: var(--size); border-radius: 50%; background-color: var(--text-tertiary);}
/* Ordered lists */.prose ol { list-style-position: outside; padding-left: 0; margin-left: 1.25rem; margin-bottom: 1.75em; counter-reset: item;}
.prose ol li { display: block; position: relative; padding-left: 0.125rem; margin-bottom: 0.5em;}
.prose ol li:last-child { margin-bottom: 0;}
.prose ol li::before { content: counter(item) '.'; counter-increment: item; position: absolute; left: -1.15rem; width: 1.5rem; text-align: left; color: var(--text-secondary); opacity: 0.75; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 0, 'cv01' 1, 'cv02' 1, 'calt' 1, 'ss03' 1, 'liga' 1, 'ordn' 1;}
/* Task lists */.prose ul.contains-task-list { list-style: none; margin-left: 0; white-space: nowrap;}
.prose ul.contains-task-list li::before { content: none;}
.prose ul.contains-task-list li.task-list-item { padding-left: 0.125em; margin-bottom: 0.5em;}
.prose ul.contains-task-list li.task-list-item:last-child { margin-bottom: 0;}
/* Task list checkboxes */.prose ul.contains-task-list li.task-list-item input[type='checkbox'] { margin-right: 0.625em; position: relative; top: 0.15em; width: 1em; height: 1em; border: 1.35px solid var(--text-tertiary); border-radius: 4px; background: transparent; appearance: none; -webkit-appearance: none;}
.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked { position: relative; background: var(--code-bg); font-family: var(--sans); border: 1.35px solid var(--text-tertiary); opacity: 0.75;}
.prose ul.contains-task-list li.task-list-item input[type='checkbox']:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-45%, -55%); font-family: var(--sans); font-size: 10px; font-weight: 650; color: var(--text-primary); opacity: 0.55;}
.prose ul.contains-task-list li.task-list-item input[type='checkbox'] + * { display: inline; margin-left: 0; line-height: 1.75; white-space: nowrap;}
/* .prose ul.contains-task-list li.task-list-item:has(input[type='checkbox']:checked) { text-decoration: line-through;} */
/* Subscript and superscript */.prose sup,.prose sub,.prose sup a { margin: 0 0.125em; font-size: 0.875em; line-height: 1;}
/* Horizontal rule */.prose hr { margin: 3.75em 0; height: auto; border: none; background: none; text-align: center; position: relative;}
.prose hr::before { content: '***'; font-family: var(--mono); color: var(--text-tertiary); font-size: 0.875em; letter-spacing: 0.25em;}
/* Keyboard input */.prose kbd { font-family: var(--mono); font-size: var(--font-size-s); border: 1px solid var(--text-tertiary); padding: 1px 4px; border-radius: 5px; min-width: 1.75em; display: inline-block; text-align: center; /* box-shadow: inset 0 -2.5px 0 var(--border); */}
/* Highlighted text */.prose mark { background-color: var(--mark); color: var(--text-primary); padding: 3px 1px;}
/* Footnotes */.prose .footnotes { margin-top: 4rem; padding-top: 1.75rem; position: relative;}
.prose .footnotes::before { content: ''; position: absolute; top: 0; left: 0; width: 4rem; height: 1px; background-color: var(--border);}
.prose cite { font-style: normal;}
/* Footnote references */.prose [data-footnote-backref] { position: relative; font-family: var(--mono); font-size: var(--font-size-l); top: -0.05em;}
.prose [data-footnote-ref] { font-size: 1em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 0, 'cv01' 1, 'cv02' 1, 'calt' 1, 'ss03' 1, 'liga' 1, 'ordn' 1;}
.prose [data-footnote-ref],.prose [data-footnote-backref] { color: var(--text-secondary); opacity: 0.875; text-decoration: none; transition: color 0.2s ease-out; padding-right: 0.125em;}
.prose [data-footnote-ref]:hover,.prose [data-footnote-backref]:hover { color: var(--text-primary);}
/* Footnote highlight animation */.prose .footnotes li.footnote-highlight,.prose sup.footnote-highlight,.prose cite.footnote-highlight { animation: footnote-highlight 1.35s ease-out;}
@keyframes footnote-highlight { 0%, 87% { background-color: var(--selection); } 100% { background-color: transparent; }}
/* Code blocks */.prose pre { background-color: var(--astro-code-background); border-radius: 8px; padding: 1.25em 1.5em; margin: 2em 0; overflow-x: auto;}
@media (max-width: 768px) { .prose pre { padding: 1em 1.25em; }}
.prose pre > code { font-family: var(--mono); font-feature-settings: 'liga' 0, 'calt' 0; display: block; white-space: pre; word-break: normal; overflow-wrap: normal; padding: 0; margin: 0; background: none; border: none; line-height: 1.5; border-radius: 0;}
.prose pre > code * { font-size: var(--font-size-s);}
/* KaTeX Math Rendering */
/* Hide MathML fallback to prevent duplication */.katex-mathml { display: none !important;}
/* Ensure display math is centered */.katex-display { text-align: center; margin: 1.75em 0;}
/* Reset any conflicting styles that might interfere with KaTeX */.katex * { box-sizing: content-box;}
/* Ensure KaTeX elements inherit color properly */.katex,.katex * { color: inherit;}
/* Specific fixes for common CSS framework conflicts */.katex .base,.katex .strut,.katex .mathit,.katex .mathrm,.katex .mathbf,.katex .mathsf,.katex .mathtt { line-height: initial; vertical-align: baseline;}
/* Dark mode support */@media (prefers-color-scheme: dark) { .katex, .katex * { color: inherit; }}
/* Reading Time */.reading-time { color: var(--text-secondary); letter-spacing: -0.025em;}
.reading-time .separator { margin: 0 0.25em;}
/* Video */.prose iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 6px; margin: 0.25em 0 0 0;}
/* Spotify */.prose iframe[src*='spotify.com'] { aspect-ratio: auto;}