162 lines
3.9 KiB
CSS
162 lines
3.9 KiB
CSS
:root {
|
|
/* colors */
|
|
--blue-50: #eff5ff;
|
|
--blue-100: #e2ecff;
|
|
--blue-200: #c5d8ff;
|
|
--blue-300: #a8c4ff;
|
|
--blue-400: #7aa6ff;
|
|
--blue-500: #4b88ff;
|
|
--blue-600: #3168e9;
|
|
--blue-700: #2458d4;
|
|
--blue-800: #1d4bac;
|
|
--blue-900: #1c3e91;
|
|
--blue-950: #183275;
|
|
|
|
--gray-50: #f6f7f8;
|
|
--gray-100: #eceef1;
|
|
--gray-200: #dfe3e8;
|
|
--gray-300: #c5ccd5;
|
|
--gray-400: #adb4c0;
|
|
--gray-500: #959eae;
|
|
--gray-600: #7f899b;
|
|
--gray-700: #707b8e;
|
|
--gray-800: #626d7f;
|
|
--gray-900: #545e71;
|
|
--gray-950: #4a5365;
|
|
--gray-darkest: #1a1d22;
|
|
|
|
--white: #fff;
|
|
--black: #000;
|
|
|
|
--gray-light: var(--gray-200);
|
|
--gray-lighter: var(--gray-50);
|
|
--gray-dark: var(--gray-950);
|
|
|
|
/* base theme */
|
|
--color-lightest: var(--gray-50);
|
|
--color-darkest: var(--gray-darkest);
|
|
--text-color: var(--color-darkest);
|
|
--background-color: var(--color-lightest);
|
|
--text-color-inverted: var(--color-lightest);
|
|
--background-color-inverted: var(--color-darkest);
|
|
--accent-color: var(--blue-600);
|
|
--accent-color-hover: var(--blue-800);
|
|
|
|
--brand-fastmail: #0067b9;
|
|
--brand-github: #333;
|
|
--brand-npm: #cc3534;
|
|
--brand-mastodon: #6364ff;
|
|
--brand-listenbrainz: #e97941;
|
|
--brand-buy-me-a-coffee: #40dca5;
|
|
--brand-rss: #f26522;
|
|
--posts: #008080;
|
|
--music: #1e90ff;
|
|
--tv: #ff4500;
|
|
--books: #32cd32;
|
|
--links: #9370db;
|
|
--about: #ff6347;
|
|
--search: #4682b4;
|
|
--webrings: #da70d6;
|
|
--moon: #6a5acd;
|
|
--sun: #ffa500;
|
|
--favorite: #ff69b4;
|
|
--warning: #ff8c00;
|
|
--error: #d92525;
|
|
|
|
/* fonts */
|
|
--font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
|
|
|
|
/* text */
|
|
--font-size-xs: .7rem;
|
|
--font-size-sm: .85rem;
|
|
--font-size-base: 1rem;
|
|
--font-size-lg: 1.15rem;
|
|
--font-size-xl: 1.3rem;
|
|
--font-size-2xl: 1.45rem;
|
|
--font-size-3xl: 1.6rem;
|
|
|
|
--font-weight-base: 400;
|
|
--font-weight-bold: 600;
|
|
--font-weight-extrabold: 800;
|
|
|
|
/* spacing */
|
|
--sizing-xs: .25rem;
|
|
--sizing-sm: .5rem;
|
|
--sizing-md: .75rem;
|
|
--sizing-lg: 1rem;
|
|
--sizing-base: 1.5rem;
|
|
--sizing-xl: 1.75rem;
|
|
--sizing-2xl: 2rem;
|
|
--sizing-3xl: 2.25rem;
|
|
|
|
--sizing-svg-base: 24px;
|
|
|
|
/* radii */
|
|
--rounded-none: 0;
|
|
--rounded-sm: .125rem;
|
|
--rounded: .25rem;
|
|
--rounded-md: .375rem;
|
|
--rounded-lg: .5rem;
|
|
--rounded-full: 9999px;
|
|
|
|
/* transitions */
|
|
--transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-duration-default: 300ms;
|
|
|
|
/* svgs */
|
|
--stroke-width-default: 1.4;
|
|
--stroke-width-bold: 2;
|
|
|
|
/* input accent color */
|
|
accent-color: var(--accent-color);
|
|
}
|
|
|
|
/* dark theme */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--text-color: var(--color-lightest);
|
|
--background-color: var(--color-darkest);
|
|
--text-color-inverted: var(--color-darkest);
|
|
--background-color-inverted: var(--color-lightest);
|
|
--accent-color: var(--blue-400);
|
|
--accent-color-hover: var(--blue-200);
|
|
--gray-light: var(--gray-900);
|
|
--gray-lighter: var(--gray-950);
|
|
--gray-dark: var(--gray-200);
|
|
--brand-github: #f5f5f5;
|
|
}
|
|
}
|
|
|
|
/* light theme */
|
|
:root.theme__light {
|
|
--text-color: var(--color-darkest);
|
|
--background-color: var(--color-lightest);
|
|
--text-color-inverted: var(--color-lightest);
|
|
--background-color-inverted: var(--color-darkest);
|
|
--accent-color: var(--blue-600);
|
|
--accent-color-hover: var(--blue-800);
|
|
--gray-light: var(--gray-200);
|
|
--gray-lighter: var(--gray-50);
|
|
--gray-dark: var(--gray-950);
|
|
--brand-github: #333;
|
|
}
|
|
|
|
/* dark theme */
|
|
:root.theme__dark {
|
|
--text-color: var(--color-lightest);
|
|
--background-color: var(--color-darkest);
|
|
--text-color-inverted: var(--color-darkest);
|
|
--background-color-inverted: var(--color-lightest);
|
|
--accent-color: var(--blue-400);
|
|
--accent-color-hover: var(--blue-200);
|
|
--gray-light: var(--gray-900);
|
|
--gray-lighter: var(--gray-950);
|
|
--gray-dark: var(--gray-200);
|
|
--brand-github: #f5f5f5;
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
:root {
|
|
--transition-duration-default: 0.01ms;
|
|
}
|
|
}
|