static background not liking the hemo

This commit is contained in:
mehbark 2023-07-24 17:01:44 -04:00
parent 84a5fb4a21
commit 37e516f6fe

View file

@ -8,12 +8,50 @@ import { Main, render_and_copy } from "./common.tsx";
// moires are too headachey and cws would ruin the attention-grabbing aspect // moires are too headachey and cws would ruin the attention-grabbing aspect
// draggable window to reveal stuff? // draggable window to reveal stuff?
// i've been reading a lot of homestuck lately so something related to that would be nice // i've been reading a lot of homestuck lately so something related to that would be nice
// background-clip: text?
// ^ doesn't seem to really work :(
// vh units will work really well
// scrolling through my drafts is very headache lol
function vh_stripes(
percent_of_view_height: number,
...colors: string[]
): string {
const out = [];
const stripe_height = (percent_of_view_height * 100) / colors.length;
let start = 0;
for (const color of colors) {
const end = start + stripe_height;
out.push(`${color} ${start}vh ${end}vh`);
start = end;
}
return out.join(", ");
}
render_and_copy( render_and_copy(
<> <>
<Main> <div
<div class="moire"></div> id="main"
</Main> style={{
background: `linear-gradient(${vh_stripes(
0.9,
"#a10000",
"#a15000",
"#a1a100",
"#626262",
"#416600",
"#008141",
"#008282",
"#005682",
"#000056",
"#2b0057",
"#6a006a",
"#77003c"
)}) fixed`,
}}
></div>
<div id="fake-main"></div> <div id="fake-main"></div>
</> </>
); );