95 lines
3.2 KiB
CSS
95 lines
3.2 KiB
CSS
:root {
|
|
|
|
/* ###### ##### ## ##### ###### */
|
|
/* ### ## ## ## ## ## ## ## */
|
|
/* ## ## ## ## ## ## ###### */
|
|
/* ### ## ## ## ## ## ## ## */
|
|
/* ###### ##### ####### ##### ## ## */
|
|
/*
|
|
use color-mix() with transparent to add transparency
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#adding_transparency
|
|
*/
|
|
|
|
&[data-color-scheme="light"] {
|
|
/* light gray */
|
|
--color-01-l: 90%;
|
|
--color-01-a: 0%;
|
|
--color-01-b: 0%;
|
|
|
|
/* black */
|
|
--color-02-l: 0%;
|
|
--color-02-a: 0%;
|
|
--color-02-b: 0%;
|
|
}
|
|
|
|
&[data-color-scheme="dark"] {
|
|
/* black */
|
|
--color-01-l: 0%;
|
|
--color-01-a: 0%;
|
|
--color-01-b: 0%;
|
|
|
|
/* light gray */
|
|
--color-02-l: 90%;
|
|
--color-02-a: 0%;
|
|
--color-02-b: 0%;
|
|
}
|
|
|
|
|
|
--color-01: oklab(var(--color-01-l) var(--color-01-a) var(--color-01-b));
|
|
--color-01-light: oklab(calc(var(--color-01-l) + 25%) var(--color-01-a) var(--color-01-b));
|
|
--color-01-dark: oklab(calc(var(--color-01-l) - 25%) var(--color-01-a) var(--color-01-b));
|
|
|
|
--color-02: oklab(var(--color-02-l) var(--color-02-a) var(--color-02-b));
|
|
--color-02-light: oklab(calc(var(--color-02-l) + 25%) var(--color-02-a) var(--color-02-b));
|
|
--color-02-dark: oklab(calc(var(--color-02-l) - 25%) var(--color-02-a) var(--color-02-b));
|
|
|
|
--link-color-01: var(--text-color-01);
|
|
--link-decoration-01: none;
|
|
--link-hover-color-01: var(--text-color-01);
|
|
--link-hover-decoration-01: underline;
|
|
|
|
--success-color: oklab(60.735% -40.534% 31.334%);
|
|
--info-color: oklab(61.465% -23.829% -17.445%);
|
|
--warning-color: oklab(82.103% 10.93% 66.106%);
|
|
--danger-color: oklab(50.864% 51.073% 25.414%);
|
|
|
|
|
|
|
|
|
|
/* ###### ###### ##### ###### ###### ## ## ###### */
|
|
/* ## ## ## ## ## ### ## ### ## ## */
|
|
/* ##### ###### ####### ## ## ## # ## ## ### */
|
|
/* ## ## ## ## ### ## ## ### ## ## */
|
|
/* ###### ## ## ## ###### ###### ## ## ##### */
|
|
|
|
|
|
--space: 1lh;
|
|
--eighth-space: calc(var(--space) * .125);
|
|
--quarter-space: calc(var(--space) * .25);
|
|
--half-space: calc(var(--space) * .5);
|
|
--three-quarter-space: calc(var(--space) * .75);
|
|
--one-and-quarter-space: calc(var(--space) * 1.25);
|
|
--one-and-half-space: calc(var(--space) * 1.5);
|
|
--one-and-three-quarter-space: calc(var(--space) * 1.75);
|
|
--double-space: calc(var(--space) * 2);
|
|
--tripple-space: calc(var(--space) * 3);
|
|
|
|
|
|
|
|
|
|
/* ###### ###### ####### ###### ## ## ###### */
|
|
/* ## ## ## ## ### ## ## */
|
|
/* ##### ## # ## ## # ## ## ### */
|
|
/* ## ## ## ## ## ### ## ## */
|
|
/* ###### ###### ####### ###### ## ## ##### */
|
|
|
|
|
|
--site-max-width: 1440px;
|
|
|
|
/* grid.css */
|
|
--content-gap: var(--double-space);
|
|
--content-padding: clamp(var(--space), 5dvw, var(--tripple-space));
|
|
--site-padding: max(5dvw, 10px);
|
|
--max-content-width: calc(var(--site-max-width) - var(--content-padding) * 2);
|
|
}
|