static background not liking the hemo
This commit is contained in:
parent
84a5fb4a21
commit
37e516f6fe
1 changed files with 41 additions and 3 deletions
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue