rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

style stuff

Browse source
This commit is contained in:
Rhiannon Morris 2024-12-10 04:21:39 +01:00
parent 6b960decc9
commit 578176c845
7 changed files with 51 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

2
rainbow-quox/index.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang=en>
<html lang=en data-state=loading>
<meta name=viewport content='width=device-width, initial-scale=0.5'>

3
rainbow-quox/script/color.ts
View file

@ -272,7 +272,8 @@ function mkFins(r: Rand, h: Hue, outer: Oklch): FinCols {
const fins1 = new Oklch(ll(outer.l), cc(outer.l, outer.c), fin1Hue!);
const fins2 = new Oklch(ll(fins1.l), cc(fins1.l, fins1.c), fin2Hue!);
const fins3 = new Oklch(ll(fins2.l), cc(fins2.l, fins2.c), fin3Hue!);
const vitiligo4 = mkVitiligo(r, fins1);
const lighter = fins1.l >= fins3.l ? fins1 : fins3;
const vitiligo4 = mkVitiligo(r, lighter);
return { fins1, fins2, fins3, vitiligo4 };
}

2
rainbow-quox/script/quox.ts
View file

@ -335,7 +335,7 @@ async function setup() {
const swap = document.getElementById('swap')!;
addListeners();
document.documentElement.dataset.ready = '1';
document.documentElement.dataset.state = 'ready';
async function run(task: (k: Done) => Promise<void>): Promise<void> {
removeListeners();

0
rainbow-quox/bright-squares.png → rainbow-quox/style/bright-squares.png
View file

10
rainbow-quox/style/palette.scss
View file

@ -1,5 +1,5 @@
@import url(../fonts/muller/muller.css);
@import url(../fonts/pragmatapro/pragmatapro.css);
@import url(../../fonts/muller/muller.css);
@import url(../../fonts/pragmatapro/pragmatapro.css);
:root {
--hue: 300;
@ -14,7 +14,7 @@
.swatch, .text-bg {
transition: fill 0.2s ease;
fill: var(--col);
stroke: oklch(from var(--col) 0.15 0.25 calc(h + 180));
stroke: oklch(from var(--col) 0.15 0.15 h);
stroke-width: 2;
filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
@ -24,8 +24,8 @@
}
}
.light :is(text, use) { fill: oklch(from var(--col) 0.95 0.075 calc(h + 180)); }
.dark :is(text, use) { fill: oklch(from var(--col) 0.15 0.25 calc(h + 180)); }
.light :is(text, use) { fill: oklch(from var(--col) 0.96 0.05 calc(h + 180)); }
.dark :is(text, use) { fill: oklch(from var(--col) 0.18 0.2 calc(h + 180)); }
.name {
font-weight: 700;

83
rainbow-quox/style/style.scss
View file

@ -1,4 +1,4 @@
@import url(/fonts/muller/muller.css);
@import url(../../fonts/muller/muller.css);
@keyframes swap1 {
0% { transform: none; }
@ -32,7 +32,10 @@
padding: 0.2rem 0.5rem;
}
@layer layout {
@layer base, layering, come-in;
@layer base {
* { box-sizing: border-box; }
:root {
@ -57,12 +60,11 @@
--shadow-color: 6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45);
}
background-blend-mode: screen;
overflow-x: hidden;
}
body {
min-height: 100vh;
height: 100vh;
min-height: 100lvh;
padding: 1em;
margin: 0;
@ -72,7 +74,7 @@
}
#pic-holder, #main, #aux {
width: min(1000px, 75vw);
width: 1000px;
margin: auto;
aspect-ratio: 2000/1346;
}
@ -85,11 +87,38 @@
pointer-events: none;
}
#buttons {
position: absolute; top: -5em; left: 0;
#buttons { position: fixed; top: -60px; left: -20px; }
#reroll { position: absolute; bottom: 0; left: 0; }
#swap { position: absolute; bottom: 0; left: 2.5em; }
#buttons button {
@include box;
width: calc(6em + 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);
}
}
#back { position: fixed; top: 22px; left: 22px; }
#palette-holder { margin: -60px auto 0; }
#state-message {
@include box;
position: fixed; top: 1em; right: -1em;
padding-right: 2em;
}
}
@layer layering {
#main { z-index: 0; }
#aux { z-index: 1; }
@ -97,46 +126,14 @@
#buttons, #state-message, #palette-holder { z-index: 2; }
}
@layer a {
button {
@include box;
transform-origin: center right;
padding-right: 3em;
$rotate: rotate(-60deg);
transform: $rotate;
&:not(:first-child) { margin-left: -5em; }
:root:not([data-running]) &:active,
[data-running=swap] &#swap,
[data-running=reroll] &#reroll {
transform: $rotate translate(-1.5em);
}
}
#back { position: absolute; top: 22px; left: 22px; }
#palette-holder {
width: min(90vw, 1126px);
margin: 2.5rem auto 0;
}
#palette { width: 100%; }
#state-message {
@include box;
position: absolute; top: 1em; right: -1em;
padding-right: 2em;
}
}
@layer come-in {
button, #state-message, #palette { @include transy; }
button, #state-message, #palette, #back { @include transy; }
:root:not([data-ready]) {
[data-state=loading] {
button { transform: none; }
#state-message { transform: translateX(100%); }
#palette { transform: translateY(125%); }
#back { transform: translateX(-200%); }
}
}