Css fixes
This commit is contained in:
@@ -1,200 +1,202 @@
|
||||
.ui {
|
||||
/* == Font sizes == */
|
||||
--type--3: 0.625rem; /* 10px */
|
||||
--type--2: 0.6875rem; /* 11px */
|
||||
--type--1: 0.75rem; /* 12px */
|
||||
--type-0: 0.875rem; /* 14px — base */
|
||||
--type-1: 1rem; /* 16px */
|
||||
--type-2: 1.125rem; /* 18px */
|
||||
--type-3: 1.25rem; /* 20px */
|
||||
--type-4: 1.375rem; /* 22px */
|
||||
--type-5: 1.5625rem; /* 25px */
|
||||
--type-6: 1.75rem; /* 28px */
|
||||
--type-7: 1.9375rem; /* 31px */
|
||||
--type-8: 2.1875rem; /* 35px */
|
||||
--type-9: 2.5rem; /* 40px */
|
||||
--type-10: 2.75rem; /* 44px */
|
||||
@layer tokens {
|
||||
.ui {
|
||||
/* == Font sizes == */
|
||||
--type--3: 0.625rem; /* 10px */
|
||||
--type--2: 0.6875rem; /* 11px */
|
||||
--type--1: 0.75rem; /* 12px */
|
||||
--type-0: 0.875rem; /* 14px — base */
|
||||
--type-1: 1rem; /* 16px */
|
||||
--type-2: 1.125rem; /* 18px */
|
||||
--type-3: 1.25rem; /* 20px */
|
||||
--type-4: 1.375rem; /* 22px */
|
||||
--type-5: 1.5625rem; /* 25px */
|
||||
--type-6: 1.75rem; /* 28px */
|
||||
--type-7: 1.9375rem; /* 31px */
|
||||
--type-8: 2.1875rem; /* 35px */
|
||||
--type-9: 2.5rem; /* 40px */
|
||||
--type-10: 2.75rem; /* 44px */
|
||||
|
||||
/* == Line heights == */
|
||||
--leading--3: 1.6;
|
||||
--leading--2: 1.4545;
|
||||
--leading--1: 1.6667;
|
||||
--leading-0: 1.4286;
|
||||
--leading-1: 1.5;
|
||||
--leading-2: 1.3333;
|
||||
--leading-3: 1.4;
|
||||
--leading-4: 1.2727;
|
||||
--leading-5: 1.28;
|
||||
--leading-6: 1.2857;
|
||||
--leading-7: 1.1613;
|
||||
--leading-8: 1.1429;
|
||||
--leading-9: 1.2;
|
||||
--leading-10: 1.1818;
|
||||
/* == Line heights == */
|
||||
--leading--3: 1.6;
|
||||
--leading--2: 1.4545;
|
||||
--leading--1: 1.6667;
|
||||
--leading-0: 1.4286;
|
||||
--leading-1: 1.5;
|
||||
--leading-2: 1.3333;
|
||||
--leading-3: 1.4;
|
||||
--leading-4: 1.2727;
|
||||
--leading-5: 1.28;
|
||||
--leading-6: 1.2857;
|
||||
--leading-7: 1.1613;
|
||||
--leading-8: 1.1429;
|
||||
--leading-9: 1.2;
|
||||
--leading-10: 1.1818;
|
||||
|
||||
/* == Letter spacing == */
|
||||
--tracking--3: 0.012em;
|
||||
--tracking--2: 0.0082em;
|
||||
--tracking--1: 0.005em;
|
||||
--tracking-0: 0em;
|
||||
--tracking-1: -0.0037em;
|
||||
--tracking-2: -0.0067em;
|
||||
--tracking-3: -0.009em;
|
||||
--tracking-4: -0.0109em;
|
||||
--tracking-5: -0.0132em;
|
||||
--tracking-6: -0.015em;
|
||||
--tracking-7: -0.0165em;
|
||||
--tracking-8: -0.018em;
|
||||
--tracking-9: -0.0195em;
|
||||
--tracking-10: -0.0205em;
|
||||
/* == Letter spacing == */
|
||||
--tracking--3: 0.012em;
|
||||
--tracking--2: 0.0082em;
|
||||
--tracking--1: 0.005em;
|
||||
--tracking-0: 0em;
|
||||
--tracking-1: -0.0037em;
|
||||
--tracking-2: -0.0067em;
|
||||
--tracking-3: -0.009em;
|
||||
--tracking-4: -0.0109em;
|
||||
--tracking-5: -0.0132em;
|
||||
--tracking-6: -0.015em;
|
||||
--tracking-7: -0.0165em;
|
||||
--tracking-8: -0.018em;
|
||||
--tracking-9: -0.0195em;
|
||||
--tracking-10: -0.0205em;
|
||||
|
||||
/* == Prose leading == */
|
||||
--leading-prose: 1.7;
|
||||
--leading-prose-tight: 1.6;
|
||||
/* == Prose leading == */
|
||||
--leading-prose: 1.7;
|
||||
--leading-prose-tight: 1.6;
|
||||
|
||||
/* == Chrome tracking == */
|
||||
--tracking-label: 0.14em; /* step labels, buttons */
|
||||
--tracking-tag: 0.12em; /* tags */
|
||||
--tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
|
||||
--tracking-plate: 0.08em; /* plate numbers */
|
||||
--tracking-display: 0.01em; /* Blaka h1 */
|
||||
}
|
||||
|
||||
.content {
|
||||
/* == Font sizes == */
|
||||
--type--3: 0.625em;
|
||||
--type--2: 0.6875em;
|
||||
--type--1: 0.8125em;
|
||||
--type-0: 1em; /* 16px — base */
|
||||
--type-1: 1.1875em;
|
||||
--type-2: 1.4375em;
|
||||
--type-3: 1.6875em;
|
||||
--type-4: 2em;
|
||||
--type-5: 2.375em;
|
||||
--type-6: 2.8125em;
|
||||
--type-7: 3.375em;
|
||||
--type-8: 4em;
|
||||
--type-9: 4.75em;
|
||||
--type-10: 5.6875em;
|
||||
|
||||
/* == Line heights == */
|
||||
--leading--3: 2;
|
||||
--leading--2: 1.8182;
|
||||
--leading--1: 1.5385;
|
||||
--leading-0: 1.5;
|
||||
--leading-1: 1.4737;
|
||||
--leading-2: 1.3912;
|
||||
--leading-3: 1.3333;
|
||||
--leading-4: 1.25;
|
||||
--leading-5: 1.2632;
|
||||
--leading-6: 1.1556;
|
||||
--leading-7: 1.1852;
|
||||
--leading-8: 1.125;
|
||||
--leading-9: 1.1053;
|
||||
--leading-10: 1.0989;
|
||||
|
||||
/* == Letter spacing == */
|
||||
--tracking--3: 0.018em;
|
||||
--tracking--2: 0.0136em;
|
||||
--tracking--1: 0.0069em;
|
||||
--tracking-0: 0em;
|
||||
--tracking-1: -0.0047em;
|
||||
--tracking-2: -0.0091em;
|
||||
--tracking-3: -0.0122em;
|
||||
--tracking-4: -0.015em;
|
||||
--tracking-5: -0.0174em;
|
||||
--tracking-6: -0.0193em;
|
||||
--tracking-7: -0.0211em;
|
||||
--tracking-8: -0.0225em;
|
||||
--tracking-9: -0.0237em;
|
||||
--tracking-10: -0.0247em;
|
||||
--leading-prose: 1.6;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* === FONT FAMILIES == */
|
||||
--font-display: var(--font-blaka), serif;
|
||||
--font-header: var(--font-geist), sans-serif;
|
||||
--font-body: var(--font-julia-mono), monospace;
|
||||
--font-mono: var(--font-geist-mono), monospace;
|
||||
--font-symbols: var(--font-unigrim), monospace;
|
||||
--font-weight-display: 400;
|
||||
--font-weight-body: 400;
|
||||
--font-weight-emphasis: 700;
|
||||
--font-weight-label: 600;
|
||||
--font-weight-heading: 800;
|
||||
|
||||
/* === SIZE === */
|
||||
--size-0: 0;
|
||||
--size-px: 0.0625rem; /* 1px */
|
||||
--size-1: 0.125rem; /* 2px */
|
||||
--size-2: 0.25rem; /* 4px */
|
||||
--size-3: 0.375rem; /* 6px */
|
||||
--size-4: 0.5rem; /* 8px */
|
||||
--size-5: 0.625rem; /* 10px */
|
||||
--size-6: 0.75rem; /* 12px */
|
||||
--size-7: 0.875rem; /* 14px */
|
||||
--size-8: 1rem; /* 16px */
|
||||
--size-9: 1.25rem; /* 20px */
|
||||
--size-10: 1.5rem; /* 24px */
|
||||
--size-11: 2rem;
|
||||
--size-12: 2.5rem;
|
||||
--size-13: 3rem;
|
||||
--size-14: 4rem;
|
||||
--size-15: 5rem;
|
||||
--size-16: 6rem;
|
||||
|
||||
/* === SPACING === */
|
||||
--space-0: 0;
|
||||
--space-px: 0.0625em;
|
||||
--space-1: 0.125em;
|
||||
--space-2: 0.25em;
|
||||
--space-3: 0.375em;
|
||||
--space-4: 0.5em;
|
||||
--space-5: 0.625em;
|
||||
--space-6: 0.75em;
|
||||
--space-7: 0.875em;
|
||||
--space-8: 1em;
|
||||
--space-9: 1.25em;
|
||||
--space-10: 1.5em;
|
||||
--space-11: 2em;
|
||||
--space-12: 2.5em;
|
||||
--space-13: 3em;
|
||||
--space-14: 4em;
|
||||
--space-15: 5em;
|
||||
--space-16: 6em;
|
||||
|
||||
/* === BORDER === */
|
||||
--border-hairline: var(--size-px); /* 1px — inside a card */
|
||||
--border-card: var(--size-1); /* 2px — the card edge */
|
||||
--border-shell: var(--size-3); /* 6px?? no: see below */
|
||||
--border-boundary: 0.1875rem; /* 3px — section / shell boundary */
|
||||
--border-marker: var(--size-1); /* 2px — the tier row active marker */
|
||||
--radius: 0; /* always. */
|
||||
|
||||
/* === FIXED SLOTS === */
|
||||
--slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
|
||||
--slot-plate: 2.25rem; /* plate number column */
|
||||
--slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
|
||||
--slot-marker: var(--size-5); /* footnote marker column */
|
||||
--slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
|
||||
|
||||
/* ═══ MOTION ═══ */
|
||||
--motion-fast: 150ms; /* state change: hover, focus, press */
|
||||
--motion-normal: 300ms; /* reveals: chooser open, tier switch */
|
||||
--motion-slow: 500ms;
|
||||
--motion-instant: 0ms; /* roll results. Use this deliberately. */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
/* ═══ LAYOUT ═══ */
|
||||
--layout-max-width: 74rem; /* the tool shell */
|
||||
--layout-content-width: minmax(0, 78ch); /* article measure */
|
||||
--layout-margin-width: minmax(10ch, 1fr);
|
||||
--layout-step-columns: 2;
|
||||
--layout-gutter: var(--size-6); /* between step cards */
|
||||
--layout-section-gap: var(--size-9); /* header to grid */
|
||||
--layout-page-margin: var(--size-10);
|
||||
--layout-tier-height: 2.25rem;
|
||||
--layout-header-height: 3.125rem;
|
||||
--layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
|
||||
/* == Chrome tracking == */
|
||||
--tracking-label: 0.14em; /* step labels, buttons */
|
||||
--tracking-tag: 0.12em; /* tags */
|
||||
--tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
|
||||
--tracking-plate: 0.08em; /* plate numbers */
|
||||
--tracking-display: 0.01em; /* Blaka h1 */
|
||||
}
|
||||
|
||||
.content {
|
||||
/* == Font sizes == */
|
||||
--type--3: 0.625em;
|
||||
--type--2: 0.6875em;
|
||||
--type--1: 0.8125em;
|
||||
--type-0: 1em; /* 16px — base */
|
||||
--type-1: 1.1875em;
|
||||
--type-2: 1.4375em;
|
||||
--type-3: 1.6875em;
|
||||
--type-4: 2em;
|
||||
--type-5: 2.375em;
|
||||
--type-6: 2.8125em;
|
||||
--type-7: 3.375em;
|
||||
--type-8: 4em;
|
||||
--type-9: 4.75em;
|
||||
--type-10: 5.6875em;
|
||||
|
||||
/* == Line heights == */
|
||||
--leading--3: 2;
|
||||
--leading--2: 1.8182;
|
||||
--leading--1: 1.5385;
|
||||
--leading-0: 1.5;
|
||||
--leading-1: 1.4737;
|
||||
--leading-2: 1.3912;
|
||||
--leading-3: 1.3333;
|
||||
--leading-4: 1.25;
|
||||
--leading-5: 1.2632;
|
||||
--leading-6: 1.1556;
|
||||
--leading-7: 1.1852;
|
||||
--leading-8: 1.125;
|
||||
--leading-9: 1.1053;
|
||||
--leading-10: 1.0989;
|
||||
|
||||
/* == Letter spacing == */
|
||||
--tracking--3: 0.018em;
|
||||
--tracking--2: 0.0136em;
|
||||
--tracking--1: 0.0069em;
|
||||
--tracking-0: 0em;
|
||||
--tracking-1: -0.0047em;
|
||||
--tracking-2: -0.0091em;
|
||||
--tracking-3: -0.0122em;
|
||||
--tracking-4: -0.015em;
|
||||
--tracking-5: -0.0174em;
|
||||
--tracking-6: -0.0193em;
|
||||
--tracking-7: -0.0211em;
|
||||
--tracking-8: -0.0225em;
|
||||
--tracking-9: -0.0237em;
|
||||
--tracking-10: -0.0247em;
|
||||
--leading-prose: 1.6;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* === FONT FAMILIES == */
|
||||
--font-display: var(--font-blaka), serif;
|
||||
--font-header: var(--font-geist), sans-serif;
|
||||
--font-body: var(--font-julia-mono), monospace;
|
||||
--font-mono: var(--font-geist-mono), monospace;
|
||||
--font-symbols: var(--font-unigrim), monospace;
|
||||
--font-weight-display: 400;
|
||||
--font-weight-body: 400;
|
||||
--font-weight-emphasis: 700;
|
||||
--font-weight-label: 600;
|
||||
--font-weight-heading: 800;
|
||||
|
||||
/* === SIZE === */
|
||||
--size-0: 0;
|
||||
--size-px: 0.0625rem; /* 1px */
|
||||
--size-1: 0.125rem; /* 2px */
|
||||
--size-2: 0.25rem; /* 4px */
|
||||
--size-3: 0.375rem; /* 6px */
|
||||
--size-4: 0.5rem; /* 8px */
|
||||
--size-5: 0.625rem; /* 10px */
|
||||
--size-6: 0.75rem; /* 12px */
|
||||
--size-7: 0.875rem; /* 14px */
|
||||
--size-8: 1rem; /* 16px */
|
||||
--size-9: 1.25rem; /* 20px */
|
||||
--size-10: 1.5rem; /* 24px */
|
||||
--size-11: 2rem;
|
||||
--size-12: 2.5rem;
|
||||
--size-13: 3rem;
|
||||
--size-14: 4rem;
|
||||
--size-15: 5rem;
|
||||
--size-16: 6rem;
|
||||
|
||||
/* === SPACING === */
|
||||
--space-0: 0;
|
||||
--space-px: 0.0625em;
|
||||
--space-1: 0.125em;
|
||||
--space-2: 0.25em;
|
||||
--space-3: 0.375em;
|
||||
--space-4: 0.5em;
|
||||
--space-5: 0.625em;
|
||||
--space-6: 0.75em;
|
||||
--space-7: 0.875em;
|
||||
--space-8: 1em;
|
||||
--space-9: 1.25em;
|
||||
--space-10: 1.5em;
|
||||
--space-11: 2em;
|
||||
--space-12: 2.5em;
|
||||
--space-13: 3em;
|
||||
--space-14: 4em;
|
||||
--space-15: 5em;
|
||||
--space-16: 6em;
|
||||
|
||||
/* === BORDER === */
|
||||
--border-hairline: var(--size-px); /* 1px — inside a card */
|
||||
--border-card: var(--size-1); /* 2px — the card edge */
|
||||
--border-shell: var(--size-3); /* 6px?? no: see below */
|
||||
--border-boundary: 0.1875rem; /* 3px — section / shell boundary */
|
||||
--border-marker: var(--size-1); /* 2px — the tier row active marker */
|
||||
--radius: 0; /* always. */
|
||||
|
||||
/* === FIXED SLOTS === */
|
||||
--slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
|
||||
--slot-plate: 2.25rem; /* plate number column */
|
||||
--slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
|
||||
--slot-marker: var(--size-5); /* footnote marker column */
|
||||
--slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
|
||||
|
||||
/* ═══ MOTION ═══ */
|
||||
--motion-fast: 150ms; /* state change: hover, focus, press */
|
||||
--motion-normal: 300ms; /* reveals: chooser open, tier switch */
|
||||
--motion-slow: 500ms;
|
||||
--motion-instant: 0ms; /* roll results. Use this deliberately. */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
/* ═══ LAYOUT ═══ */
|
||||
--layout-max-width: 74rem; /* the tool shell */
|
||||
--layout-content-width: minmax(0, 78ch); /* article measure */
|
||||
--layout-margin-width: minmax(10ch, 1fr);
|
||||
--layout-step-columns: 2;
|
||||
--layout-gutter: var(--size-6); /* between step cards */
|
||||
--layout-section-gap: var(--size-9); /* header to grid */
|
||||
--layout-page-margin: var(--size-10);
|
||||
--layout-tier-height: 2.25rem;
|
||||
--layout-header-height: 3.125rem;
|
||||
--layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user