Compare commits
No commits in common. "60201e27aa7b121c2779111d0512f2f60f47933f" and "b5a9606ccdeecb39d273c453ee2f551d0aa0b094" have entirely different histories.
60201e27aa
...
b5a9606ccd
3 changed files with 10 additions and 18 deletions
|
@ -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)
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
<!doctype html>
|
||||
|
||||
<meta name=viewport content='width=device-width, initial-scale=0.5'>
|
||||
|
||||
<title>rainbow quox</title>
|
||||
|
||||
<link rel=stylesheet href=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)); }
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue