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);
// })
// pretty hopeless to try to recreate the pulsing light

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

// TODO: rip a hole in the panel (for blood on back)
render_and_copy(
    <div
        style={{
            background: `url(${static_url("incipisphere-thingie.png")}) fixed`,
            display: "grid",
            overflow: "hidden",
            gridTemplateRows: "1fr",
        }}
    >
        <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>
);