From 60201e27aa7b121c2779111d0512f2f60f47933f Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Tue, 3 Dec 2024 20:54:19 +0100 Subject: [PATCH] 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)); } +}