128 lines
2.5 KiB
CSS
128 lines
2.5 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 {
|
|
--hue: 300;
|
|
--c-hue: calc(180 + var(--hue));
|
|
min-height: 100vh;
|
|
align-items: center; justify-content: center;
|
|
|
|
--font: Muller, sans-serif;
|
|
font-family: var(--font);
|
|
|
|
color-scheme: light dark;
|
|
background: oklch(0.9 0.08 var(--hue));
|
|
transition: background 0.4s ease;
|
|
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root { background: oklch(0.3 0.12 var(--hue)); }
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#buttons {
|
|
flex: none;
|
|
display: flex; gap: 20px;
|
|
max-width: 40em;
|
|
margin: 1.5rem auto 2.5rem;
|
|
}
|
|
|
|
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 0.5em;
|
|
box-shadow: 6px 6px 2px oklch(0.4 0.2 var(--bg) / 0.45);
|
|
transition:
|
|
color 0.4s ease,
|
|
background 0.4s ease,
|
|
border 0.4s ease,
|
|
translate 0.015s linear,
|
|
box-shadow 0.015s linear;
|
|
|
|
:root:not([data-running]) &:active,
|
|
[data-running=swap] &#swap,
|
|
[data-running=reroll] &#reroll {
|
|
translate: 6px 6px;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
#back {
|
|
position: absolute;
|
|
bottom: 15px; 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%; }
|