Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284/* 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 typography-paragraph-body text-foreground-default; overflow-wrap: break-word; }
.markup > :first-child, /* the wrapper hides the render's first child from the rule above, so repeat it inside */ .markup > [data-markup] > :first-child { @apply mt-none; }
.markup > :last-child, .markup > [data-markup] > :last-child { @apply mb-none; }
.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6 { @apply mt-xl mb-sm font-medium text-foreground-default; }
.markup h1 { @apply border-b border-border-default pb-xs typography-heading-3; }
.markup h2 { @apply border-b border-border-default pb-xs typography-heading-4; }
.markup h3 { @apply typography-paragraph-large font-semibold; }
.markup h4, .markup h5, .markup h6 { @apply typography-paragraph-regular font-semibold; }
.markup a.anchor { @apply ml-xs 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-sm; }
.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-xl; }
.markup ul { @apply list-disc; }
.markup ol { @apply list-decimal; }
.markup li + li { @apply mt-2xs; }
.markup li > ul, .markup li > ol { @apply my-2xs; }
.markup dt { @apply mt-sm font-semibold; }
.markup dd { @apply pl-xl; }
.markup blockquote { @apply border-l-2 border-border-strong pl-md text-foreground-muted; }
.markup code { @apply rounded bg-background-inset px-2xs py-3xs font-mono text-[0.875em]; }
.markup pre { @apply overflow-x-auto rounded border border-border-default bg-background-canvas p-sm; }
/* pre above already has the padding and background, inline code would double it */ .markup pre code { @apply bg-transparent p-none font-mono text-[0.875em] leading-[calc(20/13)]; }
.markup :where([data-codeblock]) { @apply my-sm flex max-h-150 flex-col overflow-hidden rounded border border-border-default; }
.markup :where([data-codeblock][data-expanded]) { @apply max-h-[none]; }
.markup :where([data-codeblock]) > pre { @apply m-none min-h-0 flex-1 overflow-x-auto overflow-y-hidden rounded-none border-none; }
.markup :where([data-codeblock][data-expanded]) > pre { @apply overflow-auto; }
.markup :where([data-codeblock-toolbar]) { @apply box-content min-h-8 shrink-0 border-b border-border-default bg-background-default p-xs; }
.markup :where([data-mermaid]) { @apply my-sm; --pele-bg: var(--color-background-default); --pele-fg: var(--color-foreground-default); --pele-muted: var(--color-foreground-muted); --pele-line: var(--color-foreground-default); --pele-surface: var(--color-background-inset); --pele-surface-alt: var(--color-background-muted); --pele-border: var(--color-border-strong); --pele-accent: var(--color-background-info-emphasis); --pele-critical: var(--color-foreground-danger); --pele-radius: var(--radius-sm); --pele-font: var(--font-sans); --pele-font-mono: var(--font-mono); }
.markup kbd { @apply rounded border border-border-default bg-background-subtle px-1.5 py-3xs font-mono text-[0.875em]; }
.markup hr { @apply my-xl border-t border-border-default; }
.markup img, .markup video { @apply inline-block max-w-full; }
.markup img { @apply cursor-zoom-in rounded-sm outline -outline-offset-1 outline-black/8 dark:outline-white/8; }
.markup a img { @apply cursor-auto; }
.markup table { @apply block w-max max-w-full border-collapse overflow-x-auto; }
.markup th, .markup td { @apply border border-border-default px-sm 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-none; }
/* only the outermost list gives up its indent, a nested one still steps in */ .markup li > ul.task-list-container { @apply pl-xl; }
/* 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-2xs 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-2xl; }
.markup section.footnotes { @apply typography-paragraph-small text-foreground-muted; }
/* github style alerts, `> [!NOTE]` and friends */ .markup .markdown-alert { @apply my-sm border-l-2 border-border-default pl-md; }
.markup .markdown-alert-title { @apply font-semibold; }
.markup .markdown-alert > :last-child { @apply mb-none; }
.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; }}