Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236/* styles for rendered markdown, see $lib/markup. the html is sanitised to a known set of tags and classes, so everything here is addressed by element */@layer components { .markup { @apply text-paragraph-regular text-foreground-default; }
.markup > :first-child { @apply mt-0; }
.markup > :last-child { @apply mb-0; }
.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6 { @apply mt-6 mb-3 font-medium text-foreground-default; }
.markup h1 { @apply border-b border-border-default pb-2 text-heading-3; }
.markup h2 { @apply border-b border-border-default pb-2 text-heading-4; }
.markup h3 { @apply text-paragraph-large font-semibold; }
.markup h4, .markup h5, .markup h6 { @apply text-paragraph-regular font-semibold; }
.markup a.anchor { @apply ml-2 text-foreground-placeholder no-underline opacity-0 transition-opacity; }
.markup :hover > a.anchor, .markup a.anchor:focus-visible { @apply opacity-100; }
.markup p, .markup blockquote, .markup ul, .markup ol, .markup pre, .markup table, .markup details { @apply my-3; }
.markup a { @apply text-foreground-link-default underline hover:text-foreground-link-hover; }
.markup a.mention { @apply font-medium no-underline hover:underline; }
.markup strong { @apply font-semibold; }
.markup ul, .markup ol { @apply pl-6; }
.markup ul { @apply list-disc; }
.markup ol { @apply list-decimal; }
.markup li + li { @apply mt-1; }
.markup li > ul, .markup li > ol { @apply my-1; }
.markup dt { @apply mt-3 font-semibold; }
.markup dd { @apply pl-6; }
.markup blockquote { @apply border-l-2 border-border-strong pl-4 text-foreground-muted; }
.markup code { @apply rounded bg-background-inset px-1 py-0.5 font-mono text-monospace-small; }
.markup pre { @apply overflow-x-auto rounded border border-border-default bg-background-inset p-3; }
/* pre above already has the padding and background, inline code would double it */ .markup pre code { @apply bg-transparent p-0 font-mono text-monospace-small; }
.markup kbd { @apply rounded border border-border-default bg-background-subtle px-1.5 py-0.5 font-mono text-monospace-small; }
.markup hr { @apply my-6 border-t border-border-default; }
.markup img, .markup video { @apply inline-block max-w-full; }
.markup table { @apply block w-max max-w-full border-collapse overflow-x-auto; }
.markup th, .markup td { @apply border border-border-default px-3 py-1.5 text-left; }
.markup th { @apply bg-background-subtle font-semibold; }
.markup summary { @apply cursor-pointer font-medium; }
.markup ul.task-list-container { @apply list-none pl-0; }
/* only the outermost list gives up its indent, a nested one still steps in */ .markup li > ul.task-list-container { @apply pl-6; }
/* the checkbox and its label stay in the inline flow, so a nested list still drops to its own line */ .markup input[type="checkbox"] { @apply mr-1 translate-y-0.5; }
/* a footnote you jump to lands mid screen rather than up against the top */ .markup :is(a.footnote-anchor, li.footnote-item)[id] { scroll-margin-top: 48vh; }
.markup sup.footnote-ref a { @apply no-underline hover:underline; }
.markup hr.footnotes-sep { @apply mt-8; }
.markup section.footnotes { @apply text-paragraph-small text-foreground-muted; }
/* github style alerts, `> [!NOTE]` and friends */ .markup .markdown-alert { @apply my-3 border-l-2 border-border-default pl-4; }
.markup .markdown-alert-title { @apply font-semibold; }
.markup .markdown-alert > :last-child { @apply mb-0; }
.markup .markdown-alert-note { @apply border-background-info-emphasis; }
.markup .markdown-alert-note .markdown-alert-title { @apply text-foreground-info; }
.markup .markdown-alert-tip { @apply border-background-success-emphasis; }
.markup .markdown-alert-tip .markdown-alert-title { @apply text-foreground-success; }
.markup .markdown-alert-important { @apply border-background-info-emphasis; }
.markup .markdown-alert-important .markdown-alert-title { @apply text-foreground-info; }
.markup .markdown-alert-warning { @apply border-background-warning-emphasis; }
.markup .markdown-alert-warning .markdown-alert-title { @apply text-foreground-warning; }
.markup .markdown-alert-caution { @apply border-background-danger-emphasis; }
.markup .markdown-alert-caution .markdown-alert-title { @apply text-foreground-danger; }}