From 578176c845d1e35c780fe51a7c69bab5368dc441 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Tue, 10 Dec 2024 04:21:39 +0100 Subject: [PATCH] style stuff --- Makefile | 5 +- rainbow-quox/index.html | 2 +- rainbow-quox/script/color.ts | 3 +- rainbow-quox/script/quox.ts | 2 +- rainbow-quox/{ => style}/bright-squares.png | 0 rainbow-quox/style/palette.scss | 10 +-- rainbow-quox/style/style.scss | 83 ++++++++++----------- 7 files changed, 51 insertions(+), 54 deletions(-) rename rainbow-quox/{ => style}/bright-squares.png (100%) 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%); } } }