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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Makefile
View file

@ -4,11 +4,10 @@ MEDIA = \
$(wildcard media/flags/*) $(wildcard media/buttons/*) \ $(wildcard media/flags/*) $(wildcard media/buttons/*) \
$(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \ $(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \
$(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \ $(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \
rainbow-quox/palette.svg rainbow-quox/bright-squares.png \ rainbow-quox/palette.svg rainbow-quox/back.svg
rainbow-quox/back.svg
CSS = $(shell find fonts -type f) \ CSS = $(shell find fonts -type f) \
$(patsubst %.scss,%.css, \ $(patsubst %.scss,%.css, \
$(wildcard rainbow-quox/style/*.scss) $(wildcard style/*.css)) $(wildcard rainbow-quox/style/*) $(wildcard style/*))
SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/script/*.ts)) SCRIPTS = $(patsubst %.ts,%.js,$(wildcard script/*.ts rainbow-quox/script/*.ts))
MISC = $(shell find .well-known -type f) MISC = $(shell find .well-known -type f)
ALL = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC) ALL = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC)

2
rainbow-quox/index.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang=en> <html lang=en data-state=loading>
<meta name=viewport content='width=device-width, initial-scale=0.5'> <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 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 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 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 }; 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')!; const swap = document.getElementById('swap')!;
addListeners(); addListeners();
document.documentElement.dataset.ready = '1'; document.documentElement.dataset.state = 'ready';
async function run(task: (k: Done) => Promise<void>): Promise<void> { async function run(task: (k: Done) => Promise<void>): Promise<void> {
removeListeners(); 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/muller/muller.css);
@import url(../fonts/pragmatapro/pragmatapro.css); @import url(../../fonts/pragmatapro/pragmatapro.css);
:root { :root {
--hue: 300; --hue: 300;
@ -14,7 +14,7 @@
.swatch, .text-bg { .swatch, .text-bg {
transition: fill 0.2s ease; transition: fill 0.2s ease;
fill: var(--col); 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; stroke-width: 2;
filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45)); 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)); } .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.15 0.25 calc(h + 180)); } .dark :is(text, use) { fill: oklch(from var(--col) 0.18 0.2 calc(h + 180)); }
.name { .name {
font-weight: 700; 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 { @keyframes swap1 {
0% { transform: none; } 0% { transform: none; }
@ -32,7 +32,10 @@
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
} }
@layer layout {
@layer base, layering, come-in;
@layer base {
* { box-sizing: border-box; } * { box-sizing: border-box; }
:root { :root {
@ -57,12 +60,11 @@
--shadow-color: 6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45); --shadow-color: 6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45);
} }
background-blend-mode: screen; background-blend-mode: screen;
overflow-x: hidden;
} }
body { body {
min-height: 100vh; height: 100vh;
min-height: 100lvh;
padding: 1em; padding: 1em;
margin: 0; margin: 0;
@ -72,7 +74,7 @@
} }
#pic-holder, #main, #aux { #pic-holder, #main, #aux {
width: min(1000px, 75vw); width: 1000px;
margin: auto; margin: auto;
aspect-ratio: 2000/1346; aspect-ratio: 2000/1346;
} }
@ -85,11 +87,38 @@
pointer-events: none; pointer-events: none;
} }
#buttons { #buttons { position: fixed; top: -60px; left: -20px; }
position: absolute; top: -5em; left: 0; #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 { @layer layering {
#main { z-index: 0; } #main { z-index: 0; }
#aux { z-index: 1; } #aux { z-index: 1; }
@ -97,46 +126,14 @@
#buttons, #state-message, #palette-holder { z-index: 2; } #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 { @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; } button { transform: none; }
#state-message { transform: translateX(100%); } #state-message { transform: translateX(100%); }
#palette { transform: translateY(125%); } #palette { transform: translateY(125%); }
#back { transform: translateX(-200%); }
} }
} }