336 lines
7.7 KiB
SCSS
336 lines
7.7 KiB
SCSS
@use 'sass:math';
|
|
@import url(../../fonts/muller/muller.css);
|
|
|
|
@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 }
|
|
}
|
|
|
|
|
|
// https://oakreef.ie/transy :)
|
|
$transy-default: 250ms;
|
|
@mixin transy($prop: transform, $duration: $transy-default) {
|
|
transition: $prop $duration cubic-bezier(.47,.74,.61,1.2);
|
|
}
|
|
|
|
@mixin shadow {
|
|
filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
|
|
@media (prefers-color-scheme: dark) {
|
|
filter: drop-shadow(6px 6px 0 oklch(0.1 0.125 var(--hue) / 0.45));
|
|
}
|
|
}
|
|
|
|
$box-texture: url(3px-tile.png);
|
|
$box-bg: oklch(0.3 0.2 var(--hue));
|
|
$box-fg: oklch(0.95 0.075 var(--c-hue));
|
|
|
|
$button-bg: oklch(0.5 0.25 var(--hue));
|
|
$button-fg: oklch(0.98 0.1 var(--c-hue));
|
|
|
|
@mixin box($font-scale: 1, $button: false) {
|
|
@include shadow;
|
|
// respecify font family for <button>
|
|
font: 700 (20pt * $font-scale) var(--font);
|
|
padding: 0.2rem 0.5rem;
|
|
@if $button {
|
|
background: $box-texture, $button-bg;
|
|
color: $button-fg;
|
|
} @else {
|
|
background: $box-texture, $box-bg;
|
|
color: $box-fg;
|
|
}
|
|
background-blend-mode: hard-light;
|
|
border: 3px solid oklch(0.2 0.05 var(--hue));
|
|
}
|
|
|
|
@mixin image-button {
|
|
@include box($button: true);
|
|
padding: 5px;
|
|
border: 2px solid $button-fg;
|
|
> * { display: block; }
|
|
}
|
|
|
|
@mixin button-arrow {
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 1.25ex; aspect-ratio: 2/3;
|
|
background:
|
|
conic-gradient(from -124deg at 100% 50%,
|
|
currentcolor, currentcolor 68deg, transparent 68deg);
|
|
}
|
|
}
|
|
|
|
@layer base, layering, come-in;
|
|
|
|
@layer base {
|
|
* { box-sizing: border-box; }
|
|
|
|
:root {
|
|
--hue: 300;
|
|
--c-hue: calc(180 + var(--hue));
|
|
|
|
--font: Muller, sans-serif;
|
|
font-family: var(--font);
|
|
|
|
@function bg($lcs, $img) {
|
|
$lg: to bottom in oklch;
|
|
@each $l, $c in $lcs { $lg: $lg, oklch($l $c var(--hue)); }
|
|
@return url(#{$img}), linear-gradient($lg);
|
|
}
|
|
|
|
background: bg([0.9 0.08, 0.7 0.1], 'groovepaper.png');
|
|
background-blend-mode: screen;
|
|
|
|
color-scheme: light dark;
|
|
@media (prefers-color-scheme: dark) {
|
|
background: bg([0.3 0.08, 0.2 0.09], 'groovepaper.dark.png');
|
|
background-blend-mode: multiply;
|
|
}
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: 100lvh;
|
|
padding: 1em;
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
button { cursor: pointer; }
|
|
|
|
#pic-holder, #main, #aux {
|
|
width: 1000px;
|
|
// margin: auto;
|
|
aspect-ratio: 2000/1346;
|
|
}
|
|
|
|
#pic-holder {
|
|
position: relative;
|
|
margin: 6em auto 0 auto;
|
|
}
|
|
#main, #aux { position: absolute; inset: 0; }
|
|
|
|
#aux {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#buttons { position: fixed; top: -60px; left: -20px; }
|
|
#reroll { position: absolute; bottom: 0; left: 0; }
|
|
#swap { position: absolute; bottom: 0; left: 2.5em; }
|
|
#hideui { position: absolute; bottom: 0; left: 5em; }
|
|
|
|
#buttons button {
|
|
@include box($button: true);
|
|
@include button-arrow;
|
|
&::before { margin-right: 0.5ex; }
|
|
width: calc(6em + 1.5ex + 100px);
|
|
text-align: left;
|
|
|
|
$rotate: rotate(-60deg);
|
|
transform: $rotate;
|
|
transform-origin: center right;
|
|
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
:root:not([data-running]) &:active,
|
|
[data-running=swap] &#swap,
|
|
[data-running=reroll] &#reroll {
|
|
transform: $rotate translateX(-1.5em);
|
|
}
|
|
}
|
|
}
|
|
|
|
#showui { @include image-button; }
|
|
|
|
#back, #showui {
|
|
@include shadow;
|
|
position: fixed; top: 22px; left: 22px;
|
|
}
|
|
#showui { transform: translateX(-200%); }
|
|
|
|
#palette-bar {
|
|
margin: -60px auto 0;
|
|
position: relative;
|
|
}
|
|
#palette-holder {
|
|
padding-top: 25px;
|
|
overflow-y: hidden;
|
|
}
|
|
#palette { @include shadow; }
|
|
#download-button {
|
|
@include image-button;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 20px;
|
|
}
|
|
|
|
|
|
@mixin history-flex {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: end;
|
|
gap: 3px;
|
|
}
|
|
@mixin history-box($font-scale: 1, $button: false) {
|
|
@include box($font-scale, $button);
|
|
border-right: none;
|
|
width: 100%;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
#history {
|
|
$width: 24em;
|
|
width: $width;
|
|
position: fixed; top: 3rem; right: -1rem;
|
|
@include history-flex;
|
|
}
|
|
#current {
|
|
@include history-box;
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
display: grid;
|
|
grid-template: "a c" "b c" / auto min-content;
|
|
gap: 0 15px;
|
|
align-items: start;
|
|
}
|
|
#current-hello {
|
|
grid-area: a;
|
|
font-size: 75%;
|
|
}
|
|
#current-name {
|
|
grid-area: b;
|
|
max-width: 16em;
|
|
word-break: break-word;
|
|
&::spelling-error { text-decoration: none; }
|
|
}
|
|
#history-button {
|
|
@include image-button;
|
|
grid-area: c;
|
|
}
|
|
:is(#current-name, .history-item) img { max-width: 50%; }
|
|
|
|
#close-history {
|
|
@include box(0.8, $button: true);
|
|
margin: 0; height: 1lh; width: 1lh;
|
|
position: absolute; top: 0; left: calc(-1lh);
|
|
img {
|
|
position: absolute;
|
|
inset: 0; width: 100%; height: 100%;
|
|
object-position: center;
|
|
}
|
|
}
|
|
|
|
#history-items {
|
|
$bottom-fade-size: 3lh;
|
|
$top-fade-size: math.div($bottom-fade-size, 2);
|
|
@include history-flex;
|
|
position: absolute;
|
|
top: -$top-fade-size; left: 0;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
height: 65vh;
|
|
overflow: hidden auto;
|
|
padding: $top-fade-size 0 $bottom-fade-size;
|
|
mask: linear-gradient(to bottom,
|
|
transparent, black $top-fade-size,
|
|
black calc(100% - $bottom-fade-size), transparent);
|
|
}
|
|
.history-item {
|
|
@include history-box(0.8, $button: true);
|
|
@include button-arrow;
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
}
|
|
.history-colors {
|
|
height: 0.8em;
|
|
flex: none;
|
|
}
|
|
.history-name {
|
|
width: 100%;
|
|
padding-right: 2rem;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.history-item, #close-history { transform: translateX(25em); }
|
|
#history-close-target {
|
|
position: absolute;
|
|
inset: 0 0 0 0;
|
|
}
|
|
}
|
|
|
|
|
|
@layer layering {
|
|
#main { z-index: 0; }
|
|
#aux { z-index: 1; }
|
|
#buttons, #palette-holder, #back, #showui { z-index: 2; }
|
|
#history-close-target { z-index: 3; }
|
|
#history { z-index: 4; }
|
|
}
|
|
|
|
|
|
@layer come-in {
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
#buttons button, #current, #palette, #back, #showui, .history-item {
|
|
@include transy;
|
|
}
|
|
|
|
#current { @include transy(all); }
|
|
#close-history { @include transy; }
|
|
#download-button { @include transy(opacity); }
|
|
}
|
|
|
|
[data-state=fullquox], [data-state=loading] {
|
|
#buttons button { transform: none; }
|
|
#current { transform: translateX(100%); }
|
|
#palette { transform: translateY(125%); }
|
|
#download-button { opacity: 0; }
|
|
#back { transform: translateX(-200%); }
|
|
}
|
|
|
|
[data-state=fullquox] {
|
|
#showui { transform: none; }
|
|
}
|
|
|
|
[data-state=history] {
|
|
#history-items { pointer-events: auto; }
|
|
#close-history { pointer-events: auto; transform: none; }
|
|
|
|
#current { opacity: 0; }
|
|
|
|
@for $i from 0 through 6 {
|
|
.history-item:nth-child(#{$i}) {
|
|
transform: translateX(3% * $i); }
|
|
}
|
|
.history-item:nth-child(n+7) { transform: translateX(3% * 7); }
|
|
}
|
|
|
|
@media not (prefers-reduced-motion: reduce) {
|
|
@for $i from 2 through 6 {
|
|
.history-item:nth-child(#{$i}) {
|
|
transition-delay: ($i - 1) * 40ms;
|
|
}
|
|
}
|
|
.history-item:nth-child(n+7) {
|
|
transition-delay: 240ms;
|
|
}
|
|
}
|
|
}
|