70 lines
2.3 KiB
CSS
70 lines
2.3 KiB
CSS
@plugin '@tailwindcss/typography';
|
|
|
|
/* html {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-weight: 300;
|
|
} */
|
|
|
|
@layer base {
|
|
.prose {
|
|
@apply prose-headings:!mb-3 prose-headings:!text-foreground prose-h3:italic prose-p:!text-foreground prose-a:!text-foreground prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-accent prose-blockquote:!border-l-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-foreground prose-figcaption:opacity-70 prose-strong:!text-foreground prose-code:rounded prose-code:bg-muted/75 prose-code:p-1 prose-code:!text-foreground prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-foreground prose-ul:overflow-x-clip prose-ul:!text-foreground prose-li:marker:!text-accent prose-table:text-foreground prose-th:border prose-th:border-border prose-td:border prose-td:border-border prose-img:mx-auto prose-img:!my-2 prose-img:border-2 prose-img:border-border prose-hr:!border-border;
|
|
}
|
|
|
|
.prose a {
|
|
@apply break-words hover:!text-accent;
|
|
}
|
|
|
|
.prose a {
|
|
color: #d26878 !important;
|
|
text-decoration: underline !important;
|
|
text-decoration-style: solid !important;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.prose thead th:first-child,
|
|
tbody td:first-child,
|
|
tfoot td:first-child {
|
|
padding-inline-start: 0.5714286em !important;
|
|
}
|
|
|
|
.prose h2#table-of-contents {
|
|
@apply mb-2;
|
|
}
|
|
|
|
.prose details {
|
|
@apply inline-block cursor-pointer text-foreground select-none;
|
|
}
|
|
|
|
.prose summary {
|
|
@apply focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent focus-visible:outline-dashed;
|
|
}
|
|
|
|
.prose h2#table-of-contents+p {
|
|
@apply hidden;
|
|
}
|
|
|
|
/* ===== Code Blocks & Syntax Highlighting ===== */
|
|
pre:has(code) {
|
|
@apply border border-border;
|
|
}
|
|
|
|
code,
|
|
blockquote {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
pre>code {
|
|
white-space: pre;
|
|
}
|
|
|
|
/* Apply Dark Theme (if multi-theme specified) */
|
|
html[data-theme="dark"] pre:has(code),
|
|
html[data-theme="dark"] pre:has(code) span {
|
|
color: var(--shiki-dark) !important;
|
|
background-color: var(--shiki-dark-bg) !important;
|
|
font-style: var(--shiki-dark-font-style) !important;
|
|
font-weight: var(--shiki-dark-font-weight) !important;
|
|
text-decoration: var(--shiki-dark-text-decoration) !important;
|
|
}
|
|
}
|