dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1:root {
2 --font-family-1: "Quantico", sans-serif;
3 --font-family-2: "Silkscreen", sans-serif;
4
5 --font-size-1: calc(14 / 16 * 1rem);
6 --font-size-2: calc(16 / 16 * 1rem);
7 --font-size-3: calc(20 / 16 * 1rem);
8 --font-size-4: calc(30 / 16 * 1rem);
9 --font-size-5: calc(40 / 16 * 1rem);
10 --font-size-button: calc(24 / 16 * 1rem);
11
12 --line-height-1: 1.2;
13 --line-height-2: 1.5;
14
15 --color-white: 255 255 255;
16 --color-black: 0 0 0;
17 --color-brown: 64 38 34;
18 --color-yellow: 230 160 0;
19 --color-light-yellow: 255 190 50;
20 --color-off-white: 255 234 188;
21 --color-red: 204 30 62;
22
23 --app-margin: max(20px, min(5vi, 100px));
24
25 --input-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M5 5h90v90H5z"/><path d="M0 5h5v90H0zM5 0h90v5H5zM5 95h90v5H5zM95 5h5v90h-5z"/></svg>');
26 --input-border-error: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M5 5h90v90H5z"/><path fill="rgb(204 30 62)" d="M0 5h5v90H0zM5 0h90v5H5zM5 95h90v5H5zM95 5h5v90h-5z"/></svg>');
27 --button-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>');
28 --button-border-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 190 50)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>');
29 --button-border-danger: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path fill="rgb(204 30 62)" d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>');
30 --button-rss: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(238 128 47)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>');
31}