61 lines
No EOL
854 B
CSS
61 lines
No EOL
854 B
CSS
:root {
|
|
--spacing: 1em;
|
|
|
|
color-scheme: light dark;
|
|
|
|
--bg-hue: 210;
|
|
--bg-lum: 60%;
|
|
|
|
--hand-hue: calc(180 + var(--bg-hue));
|
|
--big-hand-lum: 15%;
|
|
--small-hand-lum: 50%;
|
|
--dots-lum: 90%;
|
|
}
|
|
|
|
a {
|
|
filter: saturate(0%);
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-lum: 20%;
|
|
--big-hand-lum: 90%;
|
|
--small-hand-lum:60%;
|
|
--dots-lum: 15%;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: hsl(var(--bg-hue),60%,var(--bg-lum));
|
|
display: grid;
|
|
justify-items: center;
|
|
grid-template: 1fr auto / 1fr;
|
|
height: 100svh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#board {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
main {
|
|
height: 100%;
|
|
}
|
|
|
|
path {
|
|
stroke: hsl(var(--hand-hue),50%,var(--lum));
|
|
}
|
|
|
|
#big-hand {
|
|
--lum: var(--big-hand-lum);
|
|
}
|
|
|
|
#small-hand {
|
|
--lum: var(--small-hand-lum);
|
|
}
|
|
|
|
#dots {
|
|
--lum: var(--dots-lum);
|
|
} |