rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

Compare commits

base: rhi:b5a9606ccdeecb39d273c453ee2f551d0aa0b094
Branches Tags
rhi:🌐
..
compare: rhi:60201e27aa7b121c2779111d0512f2f60f47933f
Branches Tags
rhi:🌐

2 commits
b5a9606ccd ... 60201e27aa

Author SHA1 Message Date
Rhiannon Morris
60201e27aa mobile fixes 2024-12-03 20:54:19 +01:00
Rhiannon Morris
1e2cee8644 colour tweaks 2024-12-03 20:54:06 +01:00
3 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

8
rainbow-quox/colour.ts
View file

@ -13,9 +13,9 @@ const MINL_LIGHT = 0.7;
const MAXL_DARK = 0.65; const MAXL_DARK = 0.65;
const MINC_LIGHT = 0.08; const MINC_LIGHT = 0.08;
const MAXC_LIGHT = 0.125; const MAXC_LIGHT = 0.1;
const MINC_DARK = 0.12; 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 // max spread for a sequence of analogous colours. unless that would put them
// too close together // too close together
@ -169,9 +169,9 @@ function mkSpines(outer: Oklch): Oklch {
function mkVitiligo(outer: Oklch): Oklch { function mkVitiligo(outer: Oklch): Oklch {
return { 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), c: randBetween(min(outer.c, 0.1), MINC_LIGHT),
h: randBetween(outer.h + 20, outer.h - 20) h: outer.h
}; };
} }

2
rainbow-quox/index.html
View file

@ -1,5 +1,7 @@
<!doctype html> <!doctype html>
<meta name=viewport content='width=device-width, initial-scale=0.5'>
<title>rainbow quox</title> <title>rainbow quox</title>
<link rel=stylesheet href=style.css> <link rel=stylesheet href=style.css>

18
rainbow-quox/style.css
View file

@ -25,13 +25,16 @@
font-family: var(--font); font-family: var(--font);
color-scheme: light dark; color-scheme: light dark;
background: background: oklch(0.9 0.08 var(--hue));
light-dark(oklch(0.9 0.08 var(--hue)),
oklch(0.3 0.12 var(--hue)));
width: 100vw;
overflow-x: hidden; overflow-x: hidden;
} }
@media (prefers-color-scheme: dark) {
:root { background: oklch(0.3 0.12 var(--hue)); }
}
#pic { #pic {
position: relative; position: relative;
width: min(1000px, 75vw); width: min(1000px, 75vw);
@ -48,7 +51,7 @@
transition: all 0.45s cubic-bezier(.23,-0.03,.68,1.11); 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; } :not(.back) > #back { translate: -125vw; }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@ -157,9 +160,12 @@ nav {
} }
nav a { nav a {
color: light-dark(oklch(0.4 0.15 var(--c-hue)), color: oklch(0.4 0.15 var(--c-hue));
oklch(0.9 0.19 var(--c-hue)));
text-decoration: 3px solid underline; text-decoration: 3px solid underline;
text-decoration-color: text-decoration-color:
oklch(0.6 0.1 var(--c-hue)); oklch(0.6 0.1 var(--c-hue));
} }
@media (prefers-color-scheme: dark) {
nav a { color: oklch(0.9 0.19 var(--c-hue)); }
}