Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451/* layout: no top bar on desktop, the sidebar carries logo and search, no dividers anywhere, a narrow reading column */:root,:root[data-theme="light"] { --sl-content-width: 36rem; --sl-sidebar-width: 18.5rem; --sl-sidebar-pad-x: 3rem; /* one top inset shared by sidebar, content and table of contents */ --docs-top: 5rem; --sl-color-hairline: transparent; --sl-color-hairline-light: transparent; --sl-color-hairline-shade: transparent;}
@media (min-width: 50rem) { :root[data-has-sidebar] { --sl-nav-height: 0rem; }
:root[data-has-sidebar] .header { display: none; }}
/* the landing page keeps a header, but it scrolls away with the page */:root:not([data-has-sidebar]) .header { position: absolute; background: transparent;}
.docs-header,.docs-header-end { display: flex; align-items: center; gap: 0.5rem;}
.docs-header { justify-content: space-between; height: 100%;}
::selection { background-color: var(--color-background-info-subtle-hover); color: var(--color-foreground-default);}
/* sidebar */@media (min-width: 50rem) { .sidebar-content { padding-top: var(--docs-top); /* more gutter on the left, with the freed space taken from the invisible right side so the nav keeps its width and long labels don't wrap */ padding-inline: 5rem 1rem; gap: 1.75rem; }
:root[data-has-sidebar] main > .content-panel:first-of-type { padding-top: var(--docs-top); /* the title panel and the body panel each add 1.5rem of padding, which leaves a 3rem gap under the title; trim it to the reference's 1rem */ padding-bottom: 0.5rem; }
:root[data-has-sidebar] main > .content-panel:first-of-type + .content-panel { padding-top: 0.5rem; }
.right-sidebar-panel { padding-top: var(--docs-top); }
:root[data-has-sidebar] main > .content-panel:first-of-type h1 { margin-top: 0; }}
/* the "On this page" label is just a bold entry, the same size as the links */.right-sidebar-panel h2 { font-size: var(--sl-text-xs); font-weight: var(--font-weight-semibold);}
/* every ToC entry aligns with the label: no indent for nested headings */.right-sidebar-panel nav a { padding-inline-start: 0;}
.sidebar-top { align-items: center; justify-content: space-between;}
.sidebar-top .site-title img { height: 1.75rem; width: auto;}
/* search: a pill at the top of the sidebar that opens the search dialog */.sidebar-search button[data-open-modal] { display: flex; width: 100%; height: 2rem; max-width: none; gap: 0.5rem; padding-inline: 0.75rem; border: 1px solid var(--color-border-default); border-radius: 9999px; background-color: var(--color-background-default); color: var(--color-foreground-subtle); font-size: 0.875rem;}
.sidebar-search button[data-open-modal]:hover { border-color: var(--color-border-strong); color: var(--color-foreground-muted);}
.sidebar-search button[data-open-modal] > span { display: block;}
.sidebar-search button[data-open-modal] kbd { margin-inline-start: auto; background: transparent; color: var(--color-foreground-subtle);}
site-search dialog { margin-top: 12vh; border: 1px solid var(--color-border-default); border-radius: 1rem; background-color: var(--color-background-default); box-shadow: 0 24px 48px -12px var(--color-shadow-ambient-strong);}
site-search dialog::backdrop { /* the web app's modal scrim: black in both themes, so dark mode dims rather than lightens the page behind the dialog */ background-color: rgb(0 0 0 / 0.4); -webkit-backdrop-filter: none; backdrop-filter: none;}
/* the sidebar scrolls, but without a visible scrollbar */.sidebar-pane { scrollbar-width: none;}
.sidebar-pane::-webkit-scrollbar { display: none;}
/* the mobile menu toggle is a ghost button, like the theme toggle beside it */starlight-menu-button button { background-color: transparent; box-shadow: none; border-radius: var(--radius-md); color: var(--color-foreground-muted);}
starlight-menu-button button:hover,starlight-menu-button[aria-expanded="true"] button { background-color: var(--color-background-inset);}
starlight-menu-button button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px;}
/* on mobile the header reserves room for the fixed menu button: keep the gap between the theme toggle and that button at 0.5rem */@media (max-width: 49.999rem) { :root[data-has-sidebar] .header { padding-inline-end: calc(0.5rem + var(--sl-nav-pad-x) + var(--sl-menu-button-size)); }}
/* the nav: one size throughout, bold group headings, whitespace between groups */.docs-nav { font-size: 0.875rem; line-height: 1.2;}
.docs-nav ul { list-style: none; margin: 0; padding: 0;}
.docs-nav > * + * { margin-top: 1.75rem;}
.docs-nav h2,.docs-nav h3 { margin: 0 0 0.25rem; font-size: inherit; line-height: inherit; color: var(--color-foreground-default);}
.docs-nav h2 { font-weight: var(--font-weight-semibold);}
.docs-nav h3 { font-weight: var(--font-weight-medium);}
.docs-nav .subgroup { margin-block: 0.75rem;}
.docs-nav a { display: block; padding-block: 0.25rem; color: var(--color-foreground-muted); text-decoration: none;}
.docs-nav a:hover { color: var(--color-foreground-default);}
.docs-nav a[aria-current="page"] { color: var(--color-foreground-default); font-weight: var(--font-weight-medium);}
/* content: markup.css does the typography. what's left is fitting it around the elements starlight adds */
/* body text sits a step below the brightest foreground; headings and links stay bright. markup.css sets the container colour and each heading's, so a rule on the container re-tints the prose without dimming the headings */.markup { color: var(--color-foreground-muted);}
/* tables take the web app's card/panel radius (--radius-md). the outer border sits on the table (a block scroll container), so its corners follow the radius cleanly: the cells keep only their inner rules and no border is clipped at the corners */.markup table { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0;}
/* code blocks are the same kind of panel, so match the table radius. markup.css gives every `pre` the smaller inline radius, which also wins over expressive-code's own border radius, so override it here */.markup pre { border-radius: var(--radius-md);}
/* keyboard keys follow kumo-svelte's prose `kbd`: a flat keycap -- a hairline border on the base surface, no inset shadow -- set in mono at 0.875em */.markup kbd { padding: 0.125rem 0.375rem; border: 1px solid var(--color-border-default); border-radius: 0.25rem; background-color: var(--color-background-default); color: var(--color-foreground-default); font-family: var(--font-mono); font-size: 0.875em; font-weight: 400; line-height: inherit; box-shadow: none;}
.markup :is(th, td) { border: 0; border-inline-end: 1px solid var(--color-border-default); border-block-end: 1px solid var(--color-border-default);}
/* the last column and row drop their inner rules, the table border closes them */.markup tr > :last-child { border-inline-end: 0;}
.markup tbody tr:last-child > * { border-block-end: 0;}
/* prose stays left-aligned; just avoid orphans and overlong tokens */.markup :is(p, li, dd, blockquote) { text-wrap: pretty; overflow-wrap: break-word;}
.markup :is(h1, h2, h3, h4, h5, h6) { text-wrap: balance;}
/* starlight wraps each heading with its anchor link. the rule under a readme's h1 and h2 goes on the wrapper, so it spans the column */.markup .sl-heading-wrapper { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-sm);}
.markup .sl-heading-wrapper > :is(h1, h2, h3, h4, h5, h6) { margin: 0; border: 0; padding: 0;}
.markup .sl-heading-wrapper:is(.level-h1, .level-h2) { border-bottom: 1px solid var(--color-border-default); padding-bottom: var(--spacing-xs);}
.markup > :first-child,.markup > .sl-heading-wrapper:first-child { margin-top: 0;}
/* keep the shared markup styles' always-on underline: the text stays the brightest foreground, the underline is muted until hover, then brightens. this drops the indigo link-hover colour (web/src/markup.css). the heading anchor keeps its `#` */.markup a:not(.sl-anchor-link) { color: var(--color-foreground-default); text-decoration-color: var(--color-foreground-muted);}
.markup a:not(.sl-anchor-link):hover { color: var(--color-foreground-default); text-decoration-color: var(--color-foreground-default);}
/* the anchor link, shown as tangled.org's `#` on hover */.markup .sl-anchor-link { margin-inline-start: var(--spacing-xs); color: var(--color-foreground-placeholder); text-decoration: none; opacity: 0; transition: opacity 150ms;}
.markup .sl-heading-wrapper:hover .sl-anchor-link,.markup .sl-anchor-link:focus-visible { opacity: 1;}
.markup .sl-anchor-link svg { display: none;}
.markup .sl-anchor-link::before { content: "#";}
/* asides, styled like tangled.org's github alerts */.markup .starlight-aside { margin-block: var(--spacing-sm); padding: 0 0 0 var(--spacing-md); border: 0; border-inline-start: 2px solid var(--color-border-default); background: transparent;}
.markup .starlight-aside__title { gap: 0; font-size: inherit; font-weight: var(--font-weight-semibold);}
.markup .starlight-aside__icon { display: none;}
.markup .starlight-aside--note,.markup .starlight-aside--tip { border-color: var(--color-background-info-emphasis);}
.markup .starlight-aside--note .starlight-aside__title { color: var(--color-foreground-info);}
.markup .starlight-aside--tip { border-color: var(--color-background-success-emphasis);}
.markup .starlight-aside--tip .starlight-aside__title { color: var(--color-foreground-success);}
.markup .starlight-aside--caution { border-color: var(--color-background-warning-emphasis);}
.markup .starlight-aside--caution .starlight-aside__title { color: var(--color-foreground-warning);}
.markup .starlight-aside--danger { border-color: var(--color-background-danger-emphasis);}
.markup .starlight-aside--danger .starlight-aside__title { color: var(--color-foreground-danger);}
/* no next/previous links at the foot of the page */.pagination-links { display: none;}
/* expressive code sets its own size on pre; markup.css sizes code at 0.875em of pre, so pre takes the body size and code lands on tangled.org's 13px */.markup .expressive-code pre { font-size: 0.9375rem;}
/* no copy button on code blocks */.expressive-code .copy { display: none;}
/* starlight sizes the heading wrapper with its own scale, which the anchor link inherits; match each level to the heading markup.css gives it */.markup .sl-heading-wrapper.level-h1 { font-size: 1.5rem;}
.markup .sl-heading-wrapper.level-h2 { font-size: 1.25rem;}
.markup .sl-heading-wrapper.level-h3 { font-size: 1rem;}
.markup .sl-heading-wrapper:is(.level-h4, .level-h5, .level-h6) { font-size: 0.8125rem;}
/* starlight lets inline code break anywhere; in a table that splits short identifiers mid-word, so keep them whole and let the table scroll instead */.markup :is(td, th) code { overflow-wrap: normal; white-space: nowrap;}