130 lines
5.4 KiB
Text
130 lines
5.4 KiB
Text
<style>
|
|
/* theme colors */
|
|
:root {
|
|
--base-luminance: 20%;
|
|
--base-chroma: 0.01;
|
|
--base-hue: 275deg;
|
|
|
|
--theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));
|
|
|
|
--theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
|
|
--theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
|
|
--theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
|
|
--theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
|
|
--theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
|
|
--theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
|
|
--theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
|
|
--theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
|
|
--theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
|
|
--theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
|
|
--theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
|
|
--theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
|
|
--theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
|
|
--theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
|
|
--theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
|
|
--theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
|
|
--theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
|
|
--theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
|
|
--theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
|
|
}
|
|
|
|
/* semantic color variables for this project */
|
|
:root {
|
|
--clr-page-background: var(--theme-c-primary-100);
|
|
--clr-text: var(--theme-c-primary-900);
|
|
|
|
--clr-nav-background: var(--theme-c-primary-200);
|
|
--clr-nav-border: var(--theme-c-primary-250);
|
|
--clr-nav-link-hover: var(--theme-c-primary-400);
|
|
|
|
--clr-box-background: var(--theme-c-primary-150);
|
|
--clr-box-border: var(--theme-c-primary-250);
|
|
--clr-box-shadow: var(--theme-c-primary-200);
|
|
--clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
|
|
--clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
|
|
|
|
--clr-color-box-background: var(--theme-c-primary-200);
|
|
|
|
--clr-quick-info-bg-start: var(--theme-c-primary-100);
|
|
--clr-quick-info-bg-end: var(--theme-c-primary-150);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--clr-page-background: var(--theme-c-primary-850);
|
|
--clr-text: var(--theme-c-primary-100);
|
|
|
|
--clr-nav-background: var(--theme-c-primary-700);
|
|
--clr-nav-border: var(--theme-c-primary-650);
|
|
--clr-nav-link-hover: var(--theme-c-primary-500);
|
|
|
|
--clr-box-background: var(--theme-c-primary-750);
|
|
--clr-box-border: var(--theme-c-primary-700);
|
|
--clr-box-shadow: var(--theme-c-primary-800);
|
|
|
|
--clr-color-box-background: var(--theme-c-primary-700);
|
|
|
|
--clr-quick-info-bg-start: var(--theme-c-primary-700);
|
|
--clr-quick-info-bg-end: var(--theme-c-primary-750);
|
|
}
|
|
}
|
|
|
|
.sebin {
|
|
--clr-accent-1: oklch(58% 0.16 33deg); /* scales */
|
|
--clr-accent-2: oklch(78% 0.13 68deg); /* chest */
|
|
--clr-accent-3: oklch(49% 0.08 265deg); /* hair */
|
|
--clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
|
|
--clr-accent-5: oklch(36% 0.01 17deg); /* horns */
|
|
--clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */
|
|
|
|
--clr-selection: var(--clr-accent-1);
|
|
--clr-selection-text: var(--theme-c-primary-100);
|
|
--clr-nav-link-active: var(--clr-accent-1);
|
|
--clr-heading-underline: var(--clr-accent-1);
|
|
--clr-heading-data: var(--clr-accent-1);
|
|
--clr-link: var(--clr-accent-1);
|
|
--clr-link-underline: var(--clr-accent-1);
|
|
--clr-gallery-indicator: var(--clr-accent-1);
|
|
}
|
|
|
|
.viktor {
|
|
--clr-accent-1: oklch(85% 0.04 56deg); /* front */
|
|
--clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
|
|
--clr-accent-3: oklch(30% 0.04 22deg); /* back main */
|
|
--clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
|
|
--clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
|
|
--clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
|
|
--clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
|
|
--clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */
|
|
|
|
--clr-selection: var(--clr-accent-8);
|
|
--clr-selection-text: var(--theme-c-primary-100);
|
|
--clr-nav-link-active: var(--clr-accent-8);
|
|
--clr-heading-underline: var(--clr-accent-8);
|
|
--clr-heading-data: var(--clr-accent-8);
|
|
--clr-link: var(--clr-accent-8);
|
|
--clr-link-underline: var(--clr-accent-8);
|
|
--clr-timeline-stroke: var(--clr-accent-8);
|
|
--clr-gallery-indicator: var(--clr-accent-8);
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
--clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
|
|
}
|
|
}
|
|
|
|
.jarek {
|
|
--clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
|
|
--clr-accent-2: oklch(56% 0.1 98deg); /* mane */
|
|
--clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
|
|
--clr-accent-4: oklch(81% 0.07 74deg); /* horn */
|
|
--clr-accent-5: oklch(84% 0.07 111deg); /* trii */
|
|
--clr-accent-6: oklch(69% 0.12 95deg); /* naughty */
|
|
|
|
--clr-selection: var(--clr-accent-1);
|
|
--clr-selection-text: var(--theme-c-primary-100);
|
|
--clr-nav-link-active: var(--clr-accent-1);
|
|
--clr-heading-underline: var(--clr-accent-1);
|
|
--clr-heading-data: var(--clr-accent-1);
|
|
--clr-link: var(--clr-accent-1);
|
|
--clr-link-underline: var(--clr-accent-1);
|
|
--clr-gallery-indicator: var(--clr-accent-1);
|
|
}
|
|
</style>
|