54 lines
1.5 KiB
CSS
54 lines
1.5 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
|
|
--bg: #0c0a12;
|
|
--bg-raised: #120f1a;
|
|
--surface: #16131f;
|
|
--surface-2: #1e1a2a;
|
|
--line: rgb(243 238 248 / 0.1);
|
|
--line-strong: rgb(243 238 248 / 0.2);
|
|
|
|
--text: #f3eef8;
|
|
--muted: #a8a0bb;
|
|
--faint: #857d99;
|
|
|
|
/* genderfluid flag */
|
|
--pink: #ff76a4;
|
|
--white: #ffffff;
|
|
--violet: #c011d7;
|
|
--black: #000000;
|
|
--blue: #2f3cbe;
|
|
|
|
/* lighter versions that are readable on the dark background */
|
|
--pink-text: #ff8db4;
|
|
--violet-text: #da7ff2;
|
|
--blue-text: #8f98ff;
|
|
--error: #ff9aa9;
|
|
|
|
--fluid: linear-gradient(110deg, var(--pink) 0%, var(--violet-text) 48%, var(--blue-text) 100%);
|
|
|
|
--font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif;
|
|
--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
|
|
|
--step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
|
|
--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
|
|
--step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
|
|
--step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem);
|
|
--step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
|
|
--step-4: clamp(2.2rem, 1.6rem + 3vw, 4.25rem);
|
|
--step-5: clamp(2.8rem, 1.7rem + 5.5vw, 6.5rem);
|
|
|
|
--radius-s: 0.6rem;
|
|
--radius: 1rem;
|
|
--radius-l: 1.5rem;
|
|
|
|
--gutter: clamp(1rem, 4vw, 2.5rem);
|
|
--container: 78rem;
|
|
--section: clamp(4.5rem, 3rem + 7vw, 9rem);
|
|
--header-h: 4.25rem;
|
|
|
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
}
|