166 lines
4.1 KiB
CSS
166 lines
4.1 KiB
CSS
:root {
|
|
/* colors */
|
|
--blue-50: #eff5ff;
|
|
--blue-100: #dbe8fe;
|
|
--blue-200: #bfd7fe;
|
|
--blue-300: #93bbfd;
|
|
--blue-400: #609afa;
|
|
--blue-500: #3b82f6;
|
|
--blue-600: #2570eb;
|
|
--blue-700: #1d64d8;
|
|
--blue-800: #1e55af;
|
|
--blue-900: #1e478a;
|
|
--blue-950: #172e54;
|
|
|
|
--gray-50: #f6f7f8;
|
|
--gray-100: #eaecef;
|
|
--gray-200: #d9dee4;
|
|
--gray-300: #b8c2cc;
|
|
--gray-400: #a0adba;
|
|
--gray-500: #8996a8;
|
|
--gray-600: #778399;
|
|
--gray-700: #6b748a;
|
|
--gray-800: #5a6173;
|
|
--gray-900: #4b515d;
|
|
--gray-950: #30333b;
|
|
|
|
--white: #fff;
|
|
--black: #000;
|
|
|
|
--gray-light: var(--gray-200);
|
|
--gray-lighter: var(--gray-50);
|
|
--gray-dark: var(--gray-700);
|
|
|
|
/* base theme */
|
|
--color-lightest: var(--white);
|
|
--color-darkest: var(--black);
|
|
--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);
|
|
--selection-color: var(--accent-color);
|
|
|
|
--brand-hey: #5522fa;
|
|
--brand-github: #333;
|
|
--brand-npm: #cc3534;
|
|
--brand-mastodon: #6364ff;
|
|
--brand-lastfm: #d51007;
|
|
--brand-trakt: #ed1c24;
|
|
--brand-storygraph: #14919b;
|
|
--brand-buy-me-a-coffee: #40dca5;
|
|
--brand-rss: #f26522;
|
|
--webrings: #ec8fd0;
|
|
--moon: #655ad2;
|
|
--sun: #ffa700;
|
|
|
|
/* fonts */
|
|
--font-sans: "Poppins", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
|
--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
|
|
|
|
/* text */
|
|
--font-size-xs: .75rem;
|
|
--line-height-xs: 1rem;
|
|
|
|
--font-size-sm: .875rem;
|
|
--line-height-sm: 1.25rem;
|
|
|
|
--font-size-base: 1rem;
|
|
--line-height-base: 1.5rem;
|
|
|
|
--font-size-lg: 1.125rem;
|
|
--line-height-lg: 1.75rem;
|
|
|
|
--font-size-xl: 1.25rem;
|
|
--line-height-xl: 1.75rem;
|
|
|
|
--font-size-2xl: 1.5rem;
|
|
--line-height-2xl: 2rem;
|
|
|
|
--font-size-3xl: 1.875rem;
|
|
--line-height-3xl: 2.25rem;
|
|
|
|
--font-weight-base: 400;
|
|
--font-weight-bold: 700;
|
|
|
|
/* spacing */
|
|
--sizing-xs: .25rem;
|
|
--sizing-sm: .5rem;
|
|
--sizing-md: .75rem;
|
|
--sizing-lg: 1rem;
|
|
--sizing-base: 1.25rem;
|
|
--sizing-xl: 1.5rem;
|
|
--sizing-2xl: 1.75rem;
|
|
--sizing-3xl: 2rem;
|
|
|
|
/* 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-300);
|
|
--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);
|
|
--selection-color: var(--accent-color);
|
|
--gray-light: var(--gray-200);
|
|
--gray-lighter: var(--gray-50);
|
|
--gray-dark: var(--gray-700);
|
|
--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-300);
|
|
--brand-github: #f5f5f5;
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
:root {
|
|
--transition-duration-default: 0.01ms;
|
|
}
|
|
}
|