diff --git a/Makefile b/Makefile
index 3decea3..4181a75 100644
--- a/Makefile
+++ b/Makefile
@@ -4,11 +4,10 @@ MEDIA = \
$(wildcard media/flags/*) $(wildcard media/buttons/*) \
$(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \
$(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \
- rainbow-quox/palette.svg rainbow-quox/bright-squares.png \
- rainbow-quox/back.svg
+ rainbow-quox/palette.svg rainbow-quox/back.svg
CSS = $(shell find fonts -type f) \
$(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))
MISC = $(shell find .well-known -type f)
ALL = $(CSS) $(PAGES) $(MEDIA) $(SCRIPTS) $(MISC)
diff --git a/rainbow-quox/index.html b/rainbow-quox/index.html
index 30a2e8a..d57bd28 100644
--- a/rainbow-quox/index.html
+++ b/rainbow-quox/index.html
@@ -1,5 +1,5 @@
-
+
diff --git a/rainbow-quox/script/color.ts b/rainbow-quox/script/color.ts
index dd1a9b9..2fa9fab 100644
--- a/rainbow-quox/script/color.ts
+++ b/rainbow-quox/script/color.ts
@@ -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 };
}
diff --git a/rainbow-quox/script/quox.ts b/rainbow-quox/script/quox.ts
index b2c51de..d3cdc81 100644
--- a/rainbow-quox/script/quox.ts
+++ b/rainbow-quox/script/quox.ts
@@ -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): Promise {
removeListeners();
diff --git a/rainbow-quox/bright-squares.png b/rainbow-quox/style/bright-squares.png
similarity index 100%
rename from rainbow-quox/bright-squares.png
rename to rainbow-quox/style/bright-squares.png
diff --git a/rainbow-quox/style/palette.scss b/rainbow-quox/style/palette.scss
index a1b62c5..1bda3c4 100644
--- a/rainbow-quox/style/palette.scss
+++ b/rainbow-quox/style/palette.scss
@@ -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;
diff --git a/rainbow-quox/style/style.scss b/rainbow-quox/style/style.scss
index cb056ba..7be4f59 100644
--- a/rainbow-quox/style/style.scss
+++ b/rainbow-quox/style/style.scss
@@ -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%); }
}
}