Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118/* * starlight theme mapped onto the web app's tokens, which switch with the * theme themselves, so one mapping serves light and dark. the light selector * matches starlight-tailwind's, which would otherwise win on specificity */:root,:root[data-theme="light"] { --sl-font: var(--font-sans); --sl-font-mono: var(--font-mono);
/* the top bar and sidebar sit directly on the page background */ --sl-color-bg-nav: var(--sl-color-black); --sl-color-bg-sidebar: var(--sl-color-black);
--sl-color-white: var(--color-foreground-default); --sl-color-gray-1: var(--color-foreground-default); --sl-color-gray-2: var(--color-foreground-muted); --sl-color-gray-3: var(--color-foreground-subtle); --sl-color-gray-4: var(--color-border-strong); --sl-color-gray-5: var(--color-border-default); --sl-color-gray-6: var(--color-background-inset); --sl-color-gray-7: var(--color-background-subtle); /* the page background, like the app shell: white in light mode */ --sl-color-black: var(--color-background-default);
/* monochrome accents, like the web app's links */ --sl-color-accent-low: var(--color-background-inset); --sl-color-accent: var(--color-foreground-muted); --sl-color-accent-high: var(--color-foreground-default);
/* the web app's type scale for what markup.css doesn't cover: the page title, table of contents, and other starlight furniture */ --sl-text-body: 0.9375rem; /* paragraph-body */ --sl-line-height: 1.6; /* 24px on the 15px body */ --sl-text-body-sm: 0.8125rem; /* paragraph-regular */ --sl-text-sm: 0.8125rem; --sl-text-h1: 1.875rem; /* heading-2, the app's page titles */}
/* in dark mode the page falls back to the canvas shade, like the app shell */:root[data-theme="dark"] { --sl-color-black: var(--color-background-canvas);}
/* landing page */.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem;}
@media (min-width: 48rem) { .feature-grid { grid-template-columns: repeat(2, 1fr); }}
/* the cards are links, but shouldn't take the prose link's indigo hover color (the icon inherits currentColor from the anchor) */.feature-grid > a,.feature-grid > a:hover { color: var(--color-foreground-default);}
/* ButtonCard is sized for app chrome (12px). on the landing page the cards are content, so step them up like the welcome tiles in web: title one step above the description, the description one step below the body */.feature-grid > a { padding: var(--spacing-md);}
.feature-grid > a > div { gap: 0.25rem;}
.feature-grid > a .font-medium { font-size: 0.9375rem; /* typography-paragraph-body */ line-height: 1.5rem;}
.feature-grid > a span:not(.font-medium) { font-size: 0.8125rem; /* typography-paragraph-regular */ line-height: 1.25rem;}
.feature-grid > a svg { width: 1rem; height: 1rem;}
/* * pages without a table of contents drop `data-has-toc`, and starlight then * lets the main pane fill the full width and centers its content, so prose * jumps sideways between pages. size and align it as if the right column were * still there, leaving the space reserved, so nothing shifts */@media (min-width: 72rem) { [data-has-sidebar]:not([data-has-toc]) .main-pane { --sl-content-margin-inline: auto 0; order: 1; width: calc( var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2 ); }}
/* hero tweaks for the landing page */[data-has-hero] .hero { padding-block: 0 3rem;}
[data-has-hero] .hero h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); letter-spacing: -0.02em;}