death

src/pages/[category]/index.astro

@@ -41,6 +41,9 @@ posts.sort(sortItem);
           >autonomous-racing</a
         >
       </li>
+      <li class="topic death">
+        <a href="/death" data-topic="death">death</a>
+      </li>
     </ul>
 
     <div class="posts" id="posts">

src/pages/death.astro

@@ -0,0 +1,64 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+
+const title = "my father";
+---
+
+<BaseLayout title={title} useHeader={false}>
+  <div class="death-container">
+    <img id="death-image" src="/death/death.webp" alt="Philip Matthew Ruth" />
+
+    <div id="tribute-text" class="tribute">
+      rip philip matthew ruth<br />
+      february 8, 1967 – c. december 2, 2025
+    </div>
+
+    <div class="credit">
+      gary wray<br />
+      <em>waiting in line</em>, 2021
+    </div>
+  </div>
+
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      background: black;
+    }
+
+    .death-container {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .tribute {
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      font-size: 3em;
+      z-index: 10;
+      text-align: right;
+    }
+
+    .credit {
+      position: fixed;
+      bottom: 1.5rem;
+      left: 1.5rem;
+      z-index: 10;
+      font-size: 2em;
+      text-align: left;
+    }
+  </style>
+</BaseLayout>

src/pages/index.astro

@@ -57,6 +57,9 @@ for (const c of CATS) {
           >autonomous racing</a
         >
       </li>
+      <li class="topic death">
+        <a href="/death.html" data-topic="death">death</a>
+      </li>
     </ul>
     <div class="posts" id="posts"></div>
   </div>