You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
4.7 KiB
150 lines
4.7 KiB
2 years ago
|
@font-face {
|
||
|
|
font-family: computer;
|
||
|
|
src: url(/fonts/computer.woff);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* The use of the word "value" here is not a generic variable name.
|
||
|
|
* It's from painting and has a technical meaning of "the light or dark of a shape".
|
||
|
|
* The value numbers loosely map to the % luminance in the hsl() function, and you can
|
||
|
|
* adjust these values easily to test out different light/dark arrangements without
|
||
|
|
* having to adjust every variable below. See the static/color.css for a simple example
|
||
|
|
* that uses color but is still monochrome.
|
||
|
|
*/
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* light values */
|
||
|
|
--value9: hsl(0, 0%, 100%); /* not used too often */
|
||
|
|
--value8: hsl(0, 0%, 99%);
|
||
|
|
--value7: hsl(0, 0%, 90%);
|
||
|
|
--value6: hsl(0, 0%, 85%);
|
||
|
|
--value5: hsl(0, 0%, 80%);
|
||
|
|
|
||
|
|
/* dark values */
|
||
|
|
--value4: hsl(0, 0%, 44%);
|
||
|
|
--value3: hsl(0, 0%, 33%);
|
||
|
|
--value2: hsl(0, 0%, 22%);
|
||
|
|
--value1: hsl(0, 0%, 11%);
|
||
|
|
--value0: hsl(0, 0%, 1%);
|
||
|
|
|
||
|
|
/* fake the colors for monochrome */
|
||
|
|
--orange: var(--value2);
|
||
|
|
--yellow: var(--value1);
|
||
|
|
--red: var(--value0);
|
||
|
|
--purple: var(--value2);
|
||
|
|
--blue: var(--value1);
|
||
|
|
--green: var(--value0);
|
||
|
|
|
||
|
|
/* you always need dark and light variants it seems */
|
||
|
|
--invert-orange: var(--value7);
|
||
|
|
--invert-yellow: var(--value8);
|
||
|
|
--invert-red: var(--value9);
|
||
|
|
--invert-purple: var(--value7);
|
||
|
|
--invert-blue: var(--value8);
|
||
|
|
--invert-green: var(--value9);
|
||
|
|
|
||
|
|
/* the rest of the variables use the above */
|
||
|
|
--border-radius: 5px;
|
||
|
|
--box-shadow: 0 2px 2px;
|
||
|
|
--color: var(--value0);
|
||
|
|
--color-accent: var(--value3);
|
||
|
|
--color-icon-image: var(--value1);
|
||
|
|
--color-inactive: var(--value3);
|
||
|
|
--color-inactive-secondary: var(--value5);
|
||
|
|
--color-bg: var(--value8);
|
||
|
|
--color-bg-secondary: var(--value6);
|
||
|
|
--color-bg-tertiary: var(--value5);
|
||
|
|
--color-secondary: var(--value1);
|
||
|
|
--color-secondary-accent: var(--blue);
|
||
|
|
--color-shadow: var(--value4);
|
||
|
|
--color-shadow-secondary: var(--value3);
|
||
|
|
--color-shadow-dark: var(--value2);
|
||
|
|
--color-bg-inverted: var(--value2);
|
||
|
|
--color-text: var(--value0);
|
||
|
|
--color-text-inverted: var(--value7);
|
||
|
|
--color-bright: var(--value8);
|
||
|
|
--color-overlay-text: var(--value1);
|
||
|
|
--color-overlay-background: var(--value6);
|
||
|
|
--color-overlay-shadow: var(--value0);
|
||
|
|
--color-border-tabs: var(--value2);
|
||
|
|
--color-input-button: var(--value8);
|
||
|
|
--color-input-border: var(--value1);
|
||
|
|
--color-input-bg: var(--value6);
|
||
|
|
--color-border: var(--value3);
|
||
|
|
--color-error: var(--red);
|
||
|
|
--color-warning: var(--orange);
|
||
|
|
--color-good: var(--green);
|
||
|
|
--color-info: var(--yellow);
|
||
|
|
--color-pulse-1: hsla(0, 0%, 53%, 1);
|
||
|
|
--color-pulse-2: hsla(0, 0%, 53%, 0.7);
|
||
|
|
--color-pulse-3: hsla(0, 0%, 53%, 0.1);
|
||
|
|
--color-pulse-4: hsla(0, 0%, 53%, 0);
|
||
|
|
--font-family: "Andale Mono", "Monaco", monospace, monospace;
|
||
|
|
--font-computer: computer, monospace, monospace;
|
||
|
|
--font-size: 1.05em;
|
||
|
|
--font-text-size: 1.4em; /* for paragraphs mostly */
|
||
|
|
--font-heading-size: 2em;
|
||
|
|
--font-heading-weight: 300;
|
||
|
|
--font-header-nav: 1.3em;
|
||
|
|
--font-button-size: 1.4em;
|
||
|
|
--hover-brightness: 1.2;
|
||
|
|
--justify-important: center;
|
||
|
|
--justify-blockquote: left;
|
||
|
|
--justify-normal: left;
|
||
|
|
--line-height: 1.5;
|
||
|
|
--width-card: 385px;
|
||
|
|
--width-card-medium: 460px;
|
||
|
|
--width-card-wide: 800px;
|
||
|
|
--width-content: 1080px;
|
||
|
|
--width-badge: 20px;
|
||
|
|
--font-size-badge: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme="dark"] {
|
||
|
|
/* fake the colors for monochrome */
|
||
|
|
--orange: var(--value7);
|
||
|
|
--yellow: var(--value8);
|
||
|
|
--red: var(--value9);
|
||
|
|
--purple: var(--value7);
|
||
|
|
--blue: var(--value8);
|
||
|
|
--green: var(--value9);
|
||
|
|
|
||
|
|
/* you always need dark and light variants it seems */
|
||
|
|
--invert-orange: var(--value2);
|
||
|
|
--invert-yellow: var(--value1);
|
||
|
|
--invert-red: var(--value0);
|
||
|
|
--invert-purple: var(--value2);
|
||
|
|
--invert-blue: var(--value1);
|
||
|
|
--invert-green: var(--value0);
|
||
|
|
|
||
|
|
--color: var(--value8);
|
||
|
|
--color-accent: var(--value7);
|
||
|
|
--color-icon-image: var(--value8);
|
||
|
|
--color-bg: var(--value0);
|
||
|
|
--color-bg-secondary: var(--value2);
|
||
|
|
--color-bg-tertiary: var(--value3);
|
||
|
|
--color-shadow-secondary: var(--value6);
|
||
|
|
--color-secondary: var(--value7);
|
||
|
|
--color-secondary-accent: var(--value7);
|
||
|
|
--color-shadow: var(--value2);
|
||
|
|
--color-text: var(--value8);
|
||
|
|
--color-text-secondary: var(--value8);
|
||
|
|
--color-text-inverted: var(--value1);
|
||
|
|
--color-inactive: var(--value4);
|
||
|
|
--color-bg-inverted: var(--value6);
|
||
|
|
--color-input-border: var(--value7);
|
||
|
|
--color-input-button: var(--value6);
|
||
|
|
--color-border: var(--value3);
|
||
|
|
--color-input-bg: var(--value7);
|
||
|
|
--color-error: var(--red);
|
||
|
|
--color-warning: var(--orange);
|
||
|
|
--color-good: var(--green);
|
||
|
|
--color-info: var(--yellow);
|
||
|
|
--color-pulse-1: hsla(0, 0%, 80%, 1);
|
||
|
|
--color-pulse-2: hsla(0, 0%, 80%, 0.7);
|
||
|
|
--color-pulse-3: hsla(0, 0%, 80%, 0.1);
|
||
|
|
--color-pulse-4: hsla(0, 0%, 80%, 0);
|
||
|
|
--color-overlay-text: var(--value7);
|
||
|
|
--color-overlay-background: var(--value2);
|
||
|
|
--color-overlay-shadow: var(--value6);
|
||
|
|
}
|