cohost/html/hs-mortality.tsx

// https://mspaintadventures.fandom.com/wiki/Mortality
// bobbing would be great...
// ^ requires a bit too much artistry to fill in the gaps i fear
// ^ or just. clone stamp that could work
// ^ it did, yay! :D
// bit of code i used on this page that i felt proud of:
// https://homestuck.net/img/resources/assets/uncategorized-assets/
// document.querySelectorAll("a").forEach(a => {
//  const img = document.createElement("img");
//  img.src = a.href;
//  a.insertAdjacentElement("afterend", img);
// })
// didn't find anything there btw
// pretty hopeless to try to recreate the pulsing light
// ^ a gif would have worked lel
// ^ but, again, artistry

import {
    DragResizableImage,
    HomestuckSpan,
    Main,
    render_and_copy,
    static_url,
} from "./common.tsx";

// DONE: rip a hole in the panel (for blood on back)
render_and_copy(
    <div
        style={{
            background: `url(${static_url("incipisphere-thingie.png")}) fixed`,
            width: "fit-content",
            display: "grid",
            overflow: "hidden",
            gridTemplateRows: "1fr",
        }}
    >
        <DragResizableImage
            url={static_url("homestuck-3853-egbertful.png")}
            width={650}
            height={650}
            top={0}
            left={0}
            indicator_opacity={0.6}
        />
        <img
            id="panel"
            src={static_url("homestuck-3853-transparent-egbertless.png")}
            alt="part of page 3853 of homestuck. rose lalonde, wearing a black dress with a pinkish-purple sash and a green communicator on her head, is lying incapicitated on the grey ground. a pool of blood is collecting, with an incisphereish thingie showing through it. there is a blue, partially sloppily clone-stamped void with a dark purple horizon above it."
            style={{
                gridArea: "1/1",
                margin: 0,
                aspectRatio: 1,
            }}
        />
        {/* <img
            id="egbert"
            src={static_url("homestuck-3853-egbertful.png")}
            alt="part of page 3853 of homestuck. egbert's silhouette with colorful tendrils all around it and a patch of blood that also shows the incipisphereish thingie."
            style={{
                gridArea: "1/1",
                margin: 0,
                aspectRatio: 1,
                transform: "translateY(-0.15rem)",
                animation: "0.15s infinite alternate-reverse linear spin",
            }}
        /> */}
        <div style={{ backgroundColor: "white" }}>
            basically,{" "}
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment">
                background-attachment: fixed
            </a>{" "}
            + some <a href="https://photopea.com">photopea</a> fun{" "}
            <HomestuckSpan color="#008282">:]</HomestuckSpan>
        </div>
    </div>
);