148 lines
3 KiB
CSS
148 lines
3 KiB
CSS
@import url(/fonts/muller/muller.css);
|
|
|
|
@property --transition {
|
|
syntax: "*";
|
|
inherits: true;
|
|
initial-value: none;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* { transition: none; }
|
|
}
|
|
|
|
@keyframes swap1 {
|
|
0% { transform: none; }
|
|
49% { transform: translateX(-150vw); }
|
|
50% { content-visibility: hidden; }
|
|
100% { content-visibility: hidden; transform: none; }
|
|
}
|
|
|
|
@keyframes swap2 {
|
|
0% { content-visibility: hidden; transform: translateX(150vw); }
|
|
49% { content-visibility: visible; opacity: 1; }
|
|
100% { transform: none; opacity: 1; }
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0 }
|
|
to { opacity: 1 }
|
|
}
|
|
|
|
:root, body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
:root {
|
|
--hue: 300;
|
|
--c-hue: calc(180 + var(--hue));
|
|
align-items: center; justify-content: center;
|
|
|
|
--font: Muller, sans-serif;
|
|
font-family: var(--font);
|
|
|
|
--shadow-color: 6px 6px 2px oklch(0.4 0.2 var(--hue) / 0.45);
|
|
@media (prefers-color-scheme: dark) {
|
|
--shadow-color: 6px 6px 2px oklch(0.1 0.15 var(--hue) / 0.45);
|
|
}
|
|
|
|
color-scheme: light dark;
|
|
background:
|
|
url(bright-squares.png),
|
|
linear-gradient(to bottom in oklch,
|
|
oklch(0.9 0.08 var(--hue)),
|
|
oklch(0.7 0.10 var(--hue)));
|
|
background-blend-mode: screen;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
background:
|
|
url(bright-squares.png),
|
|
linear-gradient(to bottom in oklch,
|
|
oklch(0.3 0.08 var(--hue)),
|
|
oklch(0.2 0.09 var(--hue)));
|
|
}
|
|
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#pic-holder, #pic, #pic2 {
|
|
width: min(1000px, 75vw);
|
|
margin: auto;
|
|
aspect-ratio: 2000/1346;
|
|
flex: 1;
|
|
}
|
|
|
|
#pic-holder { position: relative; }
|
|
#pic, #pic2 { position: absolute; inset: 0; }
|
|
|
|
#pic2 {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
#buttons {
|
|
flex: none;
|
|
display: flex;
|
|
margin: 0 2rem 2.5rem;
|
|
align-items: start;
|
|
z-index: 1;
|
|
translate: -2em -6em;
|
|
}
|
|
|
|
button {
|
|
--fg: var(--c-hue);
|
|
--bg: var(--hue);
|
|
font: 700 20pt var(--font);
|
|
background: oklch(0.5 0.2 var(--bg));
|
|
color: oklch(0.95 0.075 var(--fg));
|
|
border: 3px solid oklch(0.2 0.05 var(--bg));
|
|
padding: 0.2em 4em 0.2em 0.5em;
|
|
transform-origin: center right;
|
|
box-shadow: var(--shadow-color);
|
|
transition: all 0.4s ease;
|
|
|
|
[data-ready] & { transform: rotate(-60deg); }
|
|
|
|
:root:not([data-running]) &:active,
|
|
[data-running=swap] &#swap,
|
|
[data-running=reroll] &#reroll {
|
|
transform: rotate(-60deg) translate(-1em);
|
|
}
|
|
|
|
+ button { margin-left: -6.5em; }
|
|
}
|
|
|
|
#back {
|
|
position: absolute;
|
|
top: 22px; left: 22px;
|
|
|
|
a {
|
|
color: oklch(0.4 0.15 var(--c-hue));
|
|
text-decoration: 3px solid underline;
|
|
text-decoration-color: oklch(0.6 0.1 var(--c-hue));
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
color: oklch(0.9 0.19 var(--c-hue));
|
|
}
|
|
}
|
|
|
|
/* #palette-holder { */
|
|
/* overflow: auto; */
|
|
/* } */
|
|
|
|
#palette-holder {
|
|
width: min(90vw, 1126px);
|
|
margin: 2.5rem auto 0;
|
|
}
|
|
#palette { width: 100%; }
|