74 lines
2.4 KiB
SCSS
74 lines
2.4 KiB
SCSS
:root {
|
|
// COLORS
|
|
--bg-color: var(--bg-color-l);
|
|
--fg-color: hsl(0 0% 0% / 80%);
|
|
--fg-muted-1: hsl(0 0% 0% / 5%);
|
|
--fg-muted-2: hsl(0 0% 0% / 10%);
|
|
--fg-muted-3: hsl(0 0% 0% / 20%);
|
|
--fg-muted-4: hsl(0 0% 0% / 50%);
|
|
--fg-muted-5: hsl(0 0% 0% / 60%);
|
|
--nav-bg: hsl(0 0% 95% / 70%);
|
|
--purple-bg: hsl(285 45% 46% / 10%);
|
|
--purple-fg: hsl(285 45% 46%);
|
|
--red-bg: hsl(357 78% 49% / 10%);
|
|
--red-fg: hsl(357 78% 49%);
|
|
--yellow-bg: hsl(42 96% 31% / 10%);
|
|
--yellow-fg: hsl(42 96% 31%);
|
|
--boosts-bg: hsl(285 45% 46% / 10%);
|
|
--boosts-fg: hsl(285 45% 46%);
|
|
--faves-bg: hsl(42 92% 47% / 10%);
|
|
--faves-fg: hsl(42 92% 47%);
|
|
|
|
// VARIABLES
|
|
--active: 0.9;
|
|
--bg-color-d: linear-gradient(hsl(0 0% 0% / 90%), hsl(0 0% 0% / 90%)), var(--primary-color);
|
|
--bg-color-l: linear-gradient(hsl(0 0% 100% / 80%), hsl(0 0% 100% / 80%)), var(--primary-color);
|
|
--blur: saturate(180%) blur(10px);
|
|
--container-width: 720px;
|
|
--edge-highlight: inset 0 1px 0 hsl(0 0% 100% / 10%);
|
|
--font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
--font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
|
|
--font-system: system-ui, sans-serif;
|
|
--rounded-corner-small: 8px;
|
|
--rounded-corner: 12px;
|
|
--shadow-raised: 0 0 0 1px hsl(0 0% 0% / 6%), 0 2px 6px 2px hsl(0 0% 0% / 14%), 0 4px 12px 4px hsl(0 0% 0% / 6%);
|
|
--shadow: 0 0 0 1px hsl(0 0% 0% / 3%), 0 1px 3px 1px hsl(0 0% 0% / 7%), 0 2px 6px 2px hsl(0 0% 0% / 3%);
|
|
--transition-long: 0.8s;
|
|
--transition-longer: 0.4s;
|
|
--transition: 0.2s;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
// COLORS
|
|
--bg-color: var(--bg-color-d);
|
|
--fg-color: hsl(0 0% 100%);
|
|
--fg-muted-1: hsl(0 0% 100% / 5%);
|
|
--fg-muted-2: hsl(0 0% 100% / 10%);
|
|
--fg-muted-3: hsl(0 0% 100% / 20%);
|
|
--fg-muted-4: hsl(0 0% 100% / 50%);
|
|
--fg-muted-5: hsl(0 0% 100% / 60%);
|
|
--nav-bg: hsl(0 0% 10% / 70%);
|
|
--purple-bg: hsl(299 55% 70% / 10%);
|
|
--purple-fg: hsl(299 55% 70%);
|
|
--red-bg: hsl(7 71% 60% / 10%);
|
|
--red-fg: hsl(6 90% 64%);
|
|
--yellow-bg: hsl(52 92% 67% / 10%);
|
|
--yellow-fg: hsl(52 92% 67%);
|
|
--boosts-bg: hsl(299 55% 70% / 10%);
|
|
--boosts-fg: hsl(299 55% 70%);
|
|
--faves-bg: hsl(56 92% 70% / 10%);
|
|
--faves-fg: hsl(56 92% 70%);
|
|
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|