54 lines
2.7 KiB
CSS
54 lines
2.7 KiB
CSS
:root {
|
|
/*
|
|
Colors - pulled from https://nipponcolors.com
|
|
|
|
HSL(a) is used for better control.
|
|
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
|
|
https://css-tricks.com/color-alpha-anywhere/
|
|
*/
|
|
--color-black-hsl: 0 0% 11%; /* #1C1C1C */
|
|
--color-black: hsl(var(--color-black-hsl));
|
|
--color-orange-hsl: 19 88% 53%; /* #F05E1C */
|
|
--color-orange: hsl(var(--color-orange-hsl));
|
|
--color-white-hsl: 60 100% 99%; /* #FFFFFC */
|
|
--color-white: hsl(var(--color-white-hsl));
|
|
|
|
/* Font-families */
|
|
--font-monospace: "Inconsolata", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
|
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
|
|
|
/* Font-sizing */
|
|
--font-size-body: 1rem; /* 16px */
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem; /* 4px */
|
|
--spacing-s: 0.5rem; /* 8px */
|
|
--spacing-m: 1rem;
|
|
--spacing-l: 2rem; /* 32px */
|
|
--spacing-xl: 4rem; /* 64px */
|
|
|
|
/* SVGs */
|
|
--svg-search-gray: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUyNTI1MiIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
|
|
--svg-search-light-gray: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzg3ODc4NyIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
|
|
}
|
|
|
|
/* Dark Mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--primary-background-color: var(--color-black);
|
|
--primary-font-color: var(--color-white);
|
|
--primary-link-color: hsl(var(--color-white-hsl) / 0.5);
|
|
--primary-link-hover-color: var(--color-white);
|
|
}
|
|
}
|
|
|
|
/* Light Mode */
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--primary-background-color: hsl(var(--color-black-hsl) / 0.075);
|
|
--primary-font-color: hsl(var(--color-black-hsl) / 0.75);
|
|
--primary-link-color: hsl(var(--color-black-hsl) / 0.75);
|
|
--primary-link-hover-color: var(--color-black);
|
|
}
|
|
}
|