Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
CSS
at pds-branding
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182/* * 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); --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 */}
/* landing page */.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 2rem;}
/* 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;}
/* hero tweaks for the landing page */[data-has-hero] .hero { padding-block: 0 3rem;}
[data-has-hero] .hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em;}