diff --git a/rainbow-quox/colour.ts b/rainbow-quox/colour.ts
index 8955457..82b21c0 100644
--- a/rainbow-quox/colour.ts
+++ b/rainbow-quox/colour.ts
@@ -13,9 +13,9 @@ const MINL_LIGHT = 0.7;
const MAXL_DARK = 0.65;
const MINC_LIGHT = 0.08;
-const MAXC_LIGHT = 0.1;
+const MAXC_LIGHT = 0.125;
const MINC_DARK = 0.12;
-const MAXC_DARK = 0.175;
+const MAXC_DARK = 0.2;
// max spread for a sequence of analogous colours. unless that would put them
// too close together
@@ -169,9 +169,9 @@ function mkSpines(outer: Oklch): Oklch {
function mkVitiligo(outer: Oklch): Oklch {
return {
- l: randBetween(max(outer.l, 0.94), 0.985), // exception to MAXL
+ l: randBetween(max(outer.l, 0.85), MAXL),
c: randBetween(min(outer.c, 0.1), MINC_LIGHT),
- h: outer.h
+ h: randBetween(outer.h + 20, outer.h - 20)
};
}
diff --git a/rainbow-quox/index.html b/rainbow-quox/index.html
index 63f0e51..c6b08b2 100644
--- a/rainbow-quox/index.html
+++ b/rainbow-quox/index.html
@@ -1,7 +1,5 @@
-
-
rainbow quox
diff --git a/rainbow-quox/style.css b/rainbow-quox/style.css
index 1e39063..58e3c9d 100644
--- a/rainbow-quox/style.css
+++ b/rainbow-quox/style.css
@@ -25,16 +25,13 @@
font-family: var(--font);
color-scheme: light dark;
- background: oklch(0.9 0.08 var(--hue));
+ background:
+ light-dark(oklch(0.9 0.08 var(--hue)),
+ oklch(0.3 0.12 var(--hue)));
- width: 100vw;
overflow-x: hidden;
}
-@media (prefers-color-scheme: dark) {
- :root { background: oklch(0.3 0.12 var(--hue)); }
-}
-
#pic {
position: relative;
width: min(1000px, 75vw);
@@ -51,7 +48,7 @@
transition: all 0.45s cubic-bezier(.23,-0.03,.68,1.11);
}
-.back > #front { translate: -125vw; }
+.back > #front { translate: 125vw; }
:not(.back) > #back { translate: -125vw; }
@media (prefers-reduced-motion: reduce) {
@@ -160,12 +157,9 @@ nav {
}
nav a {
- color: oklch(0.4 0.15 var(--c-hue));
+ color: light-dark(oklch(0.4 0.15 var(--c-hue)),
+ oklch(0.9 0.19 var(--c-hue)));
text-decoration: 3px solid underline;
text-decoration-color:
oklch(0.6 0.1 var(--c-hue));
}
-
-@media (prefers-color-scheme: dark) {
- nav a { color: oklch(0.9 0.19 var(--c-hue)); }
-}