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)); }
+}