40 lines
920 B
SCSS
40 lines
920 B
SCSS
@import url(../fonts/muller/muller.css);
|
|
@import url(../fonts/pragmatapro/pragmatapro.css);
|
|
|
|
:root {
|
|
--hue: 300;
|
|
--c-hue: calc(var(--hue) + 180);
|
|
--col: oklch(0.8 0.04 var(--hue));
|
|
color-scheme: light dark;
|
|
|
|
font-family: 'Muller', sans-serif;
|
|
text-anchor: end;
|
|
}
|
|
|
|
.swatch, .text-bg {
|
|
transition: fill 0.2s ease;
|
|
fill: var(--col);
|
|
stroke: oklch(from var(--col) 0.15 0.25 calc(h + 180));
|
|
stroke-width: 2;
|
|
|
|
filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
|
|
}
|
|
}
|
|
|
|
.light :is(text, use) { fill: oklch(from var(--col) 0.95 0.075 calc(h + 180)); }
|
|
.dark :is(text, use) { fill: oklch(from var(--col) 0.15 0.25 calc(h + 180)); }
|
|
|
|
.name {
|
|
font-weight: 700;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.hex {
|
|
font-family: monospace;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
}
|
|
|