history, reduced-motion, editable name box, an easter egg
This commit is contained in:
parent
d52151e787
commit
0a59aa66f6
14 changed files with 782 additions and 127 deletions
BIN
rainbow-quox/style/3px-tile.png
(Stored with Git LFS)
Normal file
BIN
rainbow-quox/style/3px-tile.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
rainbow-quox/style/bright-squares.png
(Stored with Git LFS)
BIN
rainbow-quox/style/bright-squares.png
(Stored with Git LFS)
Binary file not shown.
BIN
rainbow-quox/style/groovepaper.dark.png
(Stored with Git LFS)
Normal file
BIN
rainbow-quox/style/groovepaper.dark.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
rainbow-quox/style/groovepaper.png
(Stored with Git LFS)
Normal file
BIN
rainbow-quox/style/groovepaper.png
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -1,3 +1,4 @@
|
|||
@use 'sass:math';
|
||||
@import url(../../fonts/muller/muller.css);
|
||||
|
||||
@keyframes swap1 {
|
||||
|
|
@ -19,26 +20,59 @@
|
|||
}
|
||||
|
||||
|
||||
@mixin transy {
|
||||
transition: transform 0.25s cubic-bezier(.47,.74,.61,1.2);
|
||||
// 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.15 var(--hue) / 0.45));
|
||||
filter: drop-shadow(6px 6px 0 oklch(0.1 0.125 var(--hue) / 0.45));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin box {
|
||||
$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;
|
||||
font: 700 20pt var(--font); // respecify font family for <button>
|
||||
color: oklch(0.95 0.075 var(--c-hue));
|
||||
background: oklch(0.5 0.2 var(--hue));
|
||||
border: 3px solid oklch(0.2 0.05 var(--hue));
|
||||
// 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;
|
||||
|
||||
|
|
@ -52,19 +86,20 @@
|
|||
--font: Muller, sans-serif;
|
||||
font-family: var(--font);
|
||||
|
||||
@function bg($lcs) {
|
||||
@function bg($lcs, $img) {
|
||||
$lg: to bottom in oklch;
|
||||
@each $l, $c in $lcs { $lg: $lg, oklch($l $c var(--hue)); }
|
||||
@return url(bright-squares.png), linear-gradient($lg);
|
||||
@return url(#{$img}), linear-gradient($lg);
|
||||
}
|
||||
|
||||
background: bg([0.9 0.08, 0.7 0.1]);
|
||||
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]);
|
||||
background: bg([0.3 0.08, 0.2 0.09], 'groovepaper.dark.png');
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
background-blend-mode: screen;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -78,6 +113,8 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
button { cursor: pointer; }
|
||||
|
||||
#pic-holder, #main, #aux {
|
||||
width: 1000px;
|
||||
// margin: auto;
|
||||
|
|
@ -101,34 +138,133 @@
|
|||
#hideui { position: absolute; bottom: 0; left: 5em; }
|
||||
|
||||
#buttons button {
|
||||
@include box;
|
||||
width: calc(6em + 100px);
|
||||
@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;
|
||||
|
||||
:root:not([data-running]) &:active,
|
||||
[data-running=swap] &#swap,
|
||||
[data-running=reroll] &#reroll {
|
||||
transform: $rotate translateX(-1.5em);
|
||||
@media not (prefers-reduced-motion: reduce) {
|
||||
:root:not([data-running]) &:active,
|
||||
[data-running=swap] &#swap,
|
||||
[data-running=reroll] &#reroll {
|
||||
transform: $rotate translateX(-1.5em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#back, #showui { position: fixed; top: 22px; left: 22px; }
|
||||
#showui { @include image-button; }
|
||||
|
||||
#back, #showui {
|
||||
@include shadow;
|
||||
position: fixed; top: 22px; left: 22px;
|
||||
}
|
||||
#showui { transform: translateX(-200%); }
|
||||
|
||||
#palette-holder {
|
||||
margin: -60px auto 0;
|
||||
padding-top: 25px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#palette, #showui { @include shadow; }
|
||||
#palette { @include shadow; }
|
||||
|
||||
#state-message {
|
||||
@include box;
|
||||
position: fixed; top: 1em; right: -1em;
|
||||
padding-right: 2em;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,22 +272,54 @@
|
|||
@layer layering {
|
||||
#main { z-index: 0; }
|
||||
#aux { z-index: 1; }
|
||||
|
||||
#buttons, #state-message, #palette-holder, #back, #showui { z-index: 2; }
|
||||
#buttons, #palette-holder, #back, #showui { z-index: 2; }
|
||||
#history-close-target { z-index: 3; }
|
||||
#history { z-index: 4; }
|
||||
}
|
||||
|
||||
|
||||
@layer come-in {
|
||||
#buttons button, #state-message, #palette, #back, #showui {
|
||||
@include transy;
|
||||
@media not (prefers-reduced-motion: reduce) {
|
||||
#buttons button, #current, #palette, #back, #showui, .history-item {
|
||||
@include transy;
|
||||
}
|
||||
|
||||
#current { @include transy(all); }
|
||||
#close-history { @include transy; }
|
||||
}
|
||||
|
||||
[data-state=fullquox], [data-state=loading] {
|
||||
#buttons button { transform: none; }
|
||||
#state-message { transform: translateX(100%); }
|
||||
#current { transform: translateX(100%); }
|
||||
#palette { transform: translateY(125%); }
|
||||
#back { transform: translateX(-200%); }
|
||||
}
|
||||
|
||||
[data-state=fullquox] { #showui { transform: none; } }
|
||||
[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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue