182 lines
5.5 KiB
CSS
182 lines
5.5 KiB
CSS
:root {
|
|
/* colors */
|
|
--blue-100: #a2c4ff;
|
|
--blue-200: #6b9eff;
|
|
--blue-300: #3364ff;
|
|
--blue-400: #1e42c7;
|
|
|
|
--gray-100: #f9fafb;
|
|
--gray-200: #eceef1;
|
|
--gray-300: #dfe3e8;
|
|
--gray-400: #959eae;
|
|
--gray-500: #7f899b;
|
|
--gray-600: #626d7f;
|
|
--gray-700: #545e71;
|
|
--gray-800: #4a5365;
|
|
--gray-900: #14161a;
|
|
|
|
--gray-lighter: light-dark(var(--gray-200), var(--gray-700));
|
|
--gray-light: light-dark(var(--gray-300), var(--gray-600));
|
|
--gray-medium: var(--gray-400);
|
|
--gray-dark: light-dark(var(--gray-800), var(--gray-300));
|
|
|
|
/* base theme */
|
|
--color-lightest: var(--gray-100);
|
|
--color-darkest: var(--gray-900);
|
|
|
|
--accent-color: light-dark(var(--blue-300), var(--blue-200));
|
|
--accent-color-hover: light-dark(var(--blue-400), var(--blue-100));
|
|
--accent-color-active: light-dark(var(--blue-400), var(--blue-100));
|
|
|
|
--text-color: light-dark(var(--color-darkest), var(--color-lightest));
|
|
--text-color-inverted: light-dark(var(--color-lightest), var(--color-darkest));
|
|
--link-color: var(--accent-color);
|
|
--link-color-hover: var(--accent-color-hover);
|
|
--icon-color: var(--text-color);
|
|
--disabled-color: var(--gray-medium);
|
|
--code-color: light-dark(#6a3e9a, #d7a8ff);
|
|
|
|
--background-color: light-dark(var(--color-lightest), var(--color-darkest));
|
|
--background-color-inverted: light-dark(var(--color-darkest), var(--color-lightest));
|
|
|
|
--brand-buy-me-a-coffee: light-dark(#9500ff, #ffdd00);
|
|
--brand-github: light-dark(#333, #f5f5f5);
|
|
--brand-mastodon: light-dark(#563acc, #858afa);
|
|
--brand-npm: #cb3837;
|
|
--brand-proton: light-dark(#6d4af6, #c4b7ff);
|
|
--brand-rss: light-dark(#c24f19, #f26522);
|
|
|
|
--article: light-dark(#007272, #00ffff);
|
|
--about: light-dark(#e4513a, #ff967d);
|
|
--books: light-dark(#8b4513, #5fa050);
|
|
--calendar: light-dark(#2c5c2c, #7ed97e);
|
|
--concerts: light-dark(#b3365c, #ff82aa);
|
|
--country: light-dark(#146a67, #80dcdc);
|
|
--error: light-dark(#b81f1f, #ff8b8b);
|
|
--favorite: light-dark(#b03c72, #ff9ccd);
|
|
--link: light-dark(#7b5cba, #e2b8ff);
|
|
--music: light-dark(#3d7099, #76b8cc);
|
|
--newsletter: light-dark(#37b0b0, #91fffa);
|
|
--now: light-dark(#cc1076, #ff82d5);
|
|
--search: light-dark(#6b5e3a, #c0b594);
|
|
--tattoo: light-dark(#951b1b, #ff7373);
|
|
--tv: light-dark(#cc3600, #d65f2b);
|
|
--warning: light-dark(#cc6f00, #ffbf66);
|
|
--webrings: light-dark(#b054b0, #ffb3ff);
|
|
|
|
/* borders */
|
|
--border-default: 1px solid var(--accent-color);
|
|
--border-default-hover: 1px solid var(--accent-color-hover);
|
|
--border-gray: 1px solid var(--gray-light);
|
|
|
|
/* fonts */
|
|
--font-body: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-heading: "Space Grotesk", "Arial Black", "Arial Bold", Gadget, sans-serif;
|
|
--font-code: "MonoLisa", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, 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-light: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-bold: 700;
|
|
|
|
--line-height-sm: 1;
|
|
--line-height-md: 1.5;
|
|
--line-height-base: 2;
|
|
|
|
--underline-offset-default: 3px;
|
|
--underline-offset-hover: 4px;
|
|
|
|
/* 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-full: 100%;
|
|
|
|
--sizing-svg-sm: 18px;
|
|
--sizing-svg: 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;
|
|
--aspect-ratio-video: 16/9;
|
|
|
|
--aspect-ratio: var(--aspect-ratio-square);
|
|
|
|
/* grid columns */
|
|
--grid-columns-one: repeat(1, minmax(0, 1fr));
|
|
--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-square: var(--grid-columns-two);
|
|
--grid-vertical: var(--grid-columns-three);
|
|
|
|
--grid-shape: var(--grid-square);
|
|
|
|
@media screen and (min-width: 768px) {
|
|
--grid-square: var(--grid-columns-four);
|
|
--grid-vertical: var(--grid-columns-six);
|
|
}
|
|
|
|
/* transitions */
|
|
--transition-ease-in-out: cubic-bezier(.4, 0, .2, 1);
|
|
--transition-duration-default: 250ms;
|
|
|
|
/* transforms */
|
|
--transform-icon-default: rotate(0);
|
|
--transform-icon-tilt: rotate(7.5deg);
|
|
|
|
@media (prefers-reduced-motion) {
|
|
--transform-icon-tilt: var(--transform-icon-default);
|
|
--underline-offset-hover: var(--underline-offset-default);
|
|
}
|
|
|
|
/* filters */
|
|
--filter-image-default: contrast(1) saturate(1) brightness(1);
|
|
--filter-image-light: contrast(1.2) saturate(1.2) brightness(0.9);
|
|
--filter-image-dark: contrast(1.1) saturate(1.1) brightness(1.1);
|
|
|
|
/* svgs */
|
|
--stroke-width-default: 1.3;
|
|
--stroke-width-bold: 2;
|
|
|
|
/* shadows */
|
|
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
|
|
|
|
/* modals */
|
|
--modal-overlay-background: light-dark(#ffffffbf, #000000bf);
|
|
|
|
/* input accent color */
|
|
accent-color: var(--accent-color);
|
|
}
|