From 1e2cee8644dd466f86af4b6a9f64e32b770705d6 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Tue, 3 Dec 2024 20:54:06 +0100 Subject: [PATCH 1/2] colour tweaks --- rainbow-quox/colour.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/rainbow-quox/colour.ts b/rainbow-quox/colour.ts index 82b21c0..8955457 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.125; +const MAXC_LIGHT = 0.1; const MINC_DARK = 0.12; -const MAXC_DARK = 0.2; +const MAXC_DARK = 0.175; // 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.85), MAXL), + l: randBetween(max(outer.l, 0.94), 0.985), // exception to MAXL c: randBetween(min(outer.c, 0.1), MINC_LIGHT), - h: randBetween(outer.h + 20, outer.h - 20) + h: outer.h }; } From 60201e27aa7b121c2779111d0512f2f60f47933f Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Tue, 3 Dec 2024 20:54:19 +0100 Subject: [PATCH 2/2] mobile fixes --- rainbow-quox/index.html | 2 ++ rainbow-quox/style.css | 18 ++++++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/rainbow-quox/index.html b/rainbow-quox/index.html index c6b08b2..63f0e51 100644 --- a/rainbow-quox/index.html +++ b/rainbow-quox/index.html @@ -1,5 +1,7 @@ + + rainbow quox diff --git a/rainbow-quox/style.css b/rainbow-quox/style.css index 58e3c9d..1e39063 100644 --- a/rainbow-quox/style.css +++ b/rainbow-quox/style.css @@ -25,13 +25,16 @@ font-family: var(--font); color-scheme: light dark; - background: - light-dark(oklch(0.9 0.08 var(--hue)), - oklch(0.3 0.12 var(--hue))); + background: oklch(0.9 0.08 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); @@ -48,7 +51,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) { @@ -157,9 +160,12 @@ nav { } nav a { - color: light-dark(oklch(0.4 0.15 var(--c-hue)), - oklch(0.9 0.19 var(--c-hue))); + color: oklch(0.4 0.15 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)); } +}