298 lines
8.4 KiB
CSS
298 lines
8.4 KiB
CSS
:root {
|
|
/* colors */
|
|
--blue-100: #a2c4ff;
|
|
--blue-200: #6b9eff;
|
|
--blue-300: #4a78ff;
|
|
--blue-400: #3364ff;
|
|
--blue-500: #2553e6;
|
|
--blue-600: #1e42c7;
|
|
|
|
--gray-100: #f6f7f8;
|
|
--gray-200: #eceef1;
|
|
--gray-300: #dfe3e8;
|
|
--gray-400: #959eae;
|
|
--gray-500: #7f899b;
|
|
--gray-600: #626d7f;
|
|
--gray-700: #545e71;
|
|
--gray-800: #4a5365;
|
|
--gray-900: #1a1d22;
|
|
|
|
--white: #fff;
|
|
--black: #000;
|
|
|
|
--gray-lighter: var(--gray-200);
|
|
--gray-light: var(--gray-300);
|
|
--gray-medium: var(--gray-400);
|
|
--gray-dark: var(--gray-800);
|
|
|
|
/* 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-400);
|
|
--accent-color-hover: var(--blue-600);
|
|
|
|
--brand-github-light: #333;
|
|
--brand-github-dark: #f5f5f5;
|
|
|
|
--brand-gmail: #ea4335;
|
|
--brand-github: #333;
|
|
--brand-npm: #cc3534;
|
|
--brand-mastodon: #6364ff;
|
|
--brand-listenbrainz: #e97941;
|
|
--brand-buy-me-a-coffee: #40dca5;
|
|
--brand-rss: #f26522;
|
|
|
|
--moon: #6a5acd;
|
|
--sun: #ffa500;
|
|
|
|
--article-light: #007272;
|
|
--about-light: #e4513a;
|
|
--books-light: #1a7b1a;
|
|
--collected-light: #9a501a;
|
|
--concerts-light: #cb426e;
|
|
--country-light: #146a67;
|
|
--error-light: #b81f1f;
|
|
--favorite-light: #b03c72;
|
|
--link-light: #7b5cba;
|
|
--music-light: #1565c3;
|
|
--newsletter-light: #37b0b0;
|
|
--now-light: #cc1076;
|
|
--search-light: #3a6b94;
|
|
--tattoo-light: #951b1b;
|
|
--tv-light: #cc3600;
|
|
--warning-light: #cc6f00;
|
|
--webrings-light: #b054b0;
|
|
|
|
--article-dark: #00ffff;
|
|
--about-dark: #ff967d;
|
|
--books-dark: #6fff6f;
|
|
--collected-dark: #ffae73;
|
|
--concerts-dark: #ff82aa;
|
|
--country-dark: #80dcdc;
|
|
--error-dark: #ff8b8b;
|
|
--favorite-dark: #ff9ccd;
|
|
--link-dark: #e2b8ff;
|
|
--music-dark: #99ccff;
|
|
--newsletter-dark: #91fffa;
|
|
--now-dark: #ff82d5;
|
|
--search-dark: #a0b8d9;
|
|
--tattoo-dark: #ff7373;
|
|
--tv-dark: #ff8f66;
|
|
--warning-dark: #ffbf66;
|
|
--webrings-dark: #ffb3ff;
|
|
|
|
--article: var(--article-light);
|
|
--about: var(--about-light);
|
|
--books: var(--books-light);
|
|
--collected: var(--collected-light);
|
|
--concerts: var(--concerts-light);
|
|
--country: var(--country-light);
|
|
--error: var(--error-light);
|
|
--favorite: var(--favorite-light);
|
|
--link: var(--link-light);
|
|
--music: var(--music-light);
|
|
--newsletter: var(--newsletter-light);
|
|
--now: var(--now-light);
|
|
--search: var(--search-light);
|
|
--tattoo: var(--tattoo-light);
|
|
--tv: var(--tv-light);
|
|
--warning: var(--warning-light);
|
|
--webrings: var(--webrings-light);
|
|
|
|
/* borders */
|
|
--border-default: 1px solid var(--accent-color);
|
|
--border-gray: 1px solid var(--gray-light);
|
|
|
|
/* fonts */
|
|
--font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono,
|
|
Lucida Console, ui-monospace, monospace;
|
|
|
|
/* text */
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-sm: 0.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: 700;
|
|
|
|
--line-height-sm: 1;
|
|
--line-height-md: 1.5;
|
|
--line-height-base: 2;
|
|
|
|
/* sizing */
|
|
--sizing-xs: 0.25rem;
|
|
--sizing-sm: 0.5rem;
|
|
--sizing-md: 0.75rem;
|
|
--sizing-lg: 1rem;
|
|
--sizing-base: 1.5rem;
|
|
--sizing-xl: 1.75rem;
|
|
--sizing-2xl: 2rem;
|
|
--sizing-3xl: 2.25rem;
|
|
|
|
--sizing-svg-sm: 18px;
|
|
--sizing-svg-base: 24px;
|
|
|
|
/* spacing */
|
|
--spacing-xs: var(--sizing-xs);
|
|
--spacing-sm: var(--sizing-sm);
|
|
--spacing-md: var(--sizing-md);
|
|
--spacing-lg: var(--sizing-lg);
|
|
--spacing-base: var(--sizing-base);
|
|
--spacing-xl: var(--sizing-xl);
|
|
--spacing-2xl: var(--sizing-2xl);
|
|
--spacing-3xl: var(--sizing-3xl);
|
|
|
|
--margin-vertical-base-horizontal-zero: var(--spacing-base) 0;
|
|
|
|
/* radii */
|
|
--border-radius-slight: var(--sizing-xs);
|
|
--border-radius-full: 9999px;
|
|
|
|
/* aspect ratios */
|
|
--aspect-ratio-square: 1/1;
|
|
--aspect-ratio-vertical: 2/3;
|
|
--aspect-ratio-banner: 3/2;
|
|
|
|
/* grid columns */
|
|
--grid-columns-two: repeat(2, minmax(0, 1fr));
|
|
--grid-columns-three: repeat(3, minmax(0, 1fr));
|
|
--grid-columns-four: repeat(4, minmax(0, 1fr));
|
|
--grid-columns-six: repeat(6, minmax(0, 1fr));
|
|
|
|
--grid-poster: var(--grid-columns-two);
|
|
--grid-square: var(--grid-columns-two);
|
|
--grid-vertical: var(--grid-columns-three);
|
|
|
|
@media screen and (min-width: 768px) {
|
|
--grid-poster: var(--grid-columns-three);
|
|
--grid-square: var(--grid-columns-four);
|
|
--grid-vertical: var(--grid-columns-six);
|
|
}
|
|
|
|
/* 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;
|
|
--inline-margin-bottom: -5px;
|
|
|
|
/* shadows */
|
|
--box-shadow-media: inset 0 -85px 60px -40px var(--black);
|
|
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
|
|
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
|
|
|
/* modals */
|
|
--modal-overlay-background-light: #ffffffbf;
|
|
--modal-overlay-background-dark: #000000bf;
|
|
--modal-overlay-background: var(--modal-overlay-background-light);
|
|
|
|
/* input accent color */
|
|
accent-color: var(--accent-color);
|
|
}
|
|
|
|
/* light theme */
|
|
:root[data-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-400);
|
|
--accent-color-hover: var(--blue-600);
|
|
--gray-light: var(--gray-300);
|
|
--gray-lighter: var(--gray-200);
|
|
--gray-dark: var(--gray-800);
|
|
--modal-overlay-background: var(--modal-overlay-background-light);
|
|
--brand-github: var(--brand-github-light);
|
|
--article: var(--article-light);
|
|
--about: var(--about-light);
|
|
--books: var(--books-light);
|
|
--collected: var(--collected-light);
|
|
--concerts: var(--concerts-light);
|
|
--country: var(--country-light);
|
|
--error: var(--error-light);
|
|
--favorite: var(--favorite-light);
|
|
--link: var(--link-light);
|
|
--music: var(--music-light);
|
|
--newsletter: var(--newsletter-light);
|
|
--now: var(--now-light);
|
|
--search: var(--search-light);
|
|
--tattoo: var(--tattoo-light);
|
|
--tv: var(--tv-light);
|
|
--warning: var(--warning-light);
|
|
--webrings: var(--webrings-light);
|
|
}
|
|
|
|
/* dark theme */
|
|
:root[data-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-200);
|
|
--accent-color-hover: var(--blue-100);
|
|
--gray-light: var(--gray-600);
|
|
--gray-lighter: var(--gray-700);
|
|
--gray-dark: var(--gray-300);
|
|
--modal-overlay-background: var(--modal-overlay-background-dark);
|
|
--brand-github: var(--brand-github-dark);
|
|
--article: var(--article-dark);
|
|
--about: var(--about-dark);
|
|
--books: var(--books-dark);
|
|
--collected: var(--collected-dark);
|
|
--concerts: var(--concerts-dark);
|
|
--country: var(--country-dark);
|
|
--error: var(--error-dark);
|
|
--favorite: var(--favorite-dark);
|
|
--link: var(--link-dark);
|
|
--music: var(--music-dark);
|
|
--newsletter: var(--newsletter-dark);
|
|
--now: var(--now-dark);
|
|
--search: var(--search-dark);
|
|
--tattoo: var(--tattoo-dark);
|
|
--tv: var(--tv-dark);
|
|
--warning: var(--warning-dark);
|
|
--webrings: var(--webrings-dark);
|
|
}
|
|
|
|
@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-200);
|
|
--accent-color-hover: var(--blue-100);
|
|
--gray-light: var(--gray-600);
|
|
--gray-lighter: var(--gray-700);
|
|
--gray-dark: var(--gray-300);
|
|
--modal-overlay-background: var(--modal-overlay-background-dark);
|
|
--brand-github: var(--brand-github-dark);
|
|
--article: var(--article-dark);
|
|
--about: var(--about-dark);
|
|
--books: var(--books-dark);
|
|
--collected: var(--collected-dark);
|
|
--concerts: var(--concerts-dark);
|
|
--country: var(--country-dark);
|
|
--error: var(--error-dark);
|
|
--favorite: var(--favorite-dark);
|
|
--link: var(--link-dark);
|
|
--music: var(--music-dark);
|
|
--newsletter: var(--newsletter-dark);
|
|
--now: var(--now-dark);
|
|
--search: var(--search-dark);
|
|
--tattoo: var(--tattoo-dark);
|
|
--tv: var(--tv-dark);
|
|
--warning: var(--warning-dark);
|
|
--webrings: var(--webrings-dark);
|
|
}
|
|
}
|