mortality: peek behind the curtain

html/common.tsx

@@ -430,3 +430,25 @@ export const string_split_once = (
     if (idx < 0) return;
     return [str.slice(0, idx), str.slice(idx + on.length)];
 };
+
+// TODO: not stringly-typed style
+export const HomestuckSpan = ({
+    children,
+    color,
+    style,
+}: {
+    children: ComponentChildren;
+    color?: string;
+    style?: JSX.CSSProperties;
+    attributes?: JSX.HTMLAttributes;
+}) => (
+    <span
+        style={{
+            fontFamily: "'courier-std', courier, monospace",
+            fontWeight: "bold",
+            ...{ color },
+        }}
+    >
+        {...toChildArray(children)}
+    </span>
+);

html/hs-mortality.tsx

@@ -12,10 +12,18 @@
 // })
 // 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 { Main, render_and_copy, static_url } from "./common.tsx";
+import {
+    DragResizableImage,
+    HomestuckSpan,
+    Main,
+    render_and_copy,
+    static_url,
+} from "./common.tsx";
 
-// TODO: rip a hole in the panel (for blood on back)
+// DONE: rip a hole in the panel (for blood on back)
 render_and_copy(
     <div
         style={{
@@ -26,6 +34,14 @@ render_and_copy(
             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")}
@@ -36,7 +52,7 @@ render_and_copy(
                 aspectRatio: 1,
             }}
         />
-        <img
+        {/* <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."
@@ -47,6 +63,14 @@ render_and_copy(
                 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>
 );