Indicate that panquia is on fire

components/ServiceCard.vue

@@ -4,13 +4,17 @@ const props = defineProps<{
   href: string;
   img: string;
   unclickable?: boolean;
+  broken?: boolean;
 }>();
 
 const imgUrl = `/images/services/${props.img}`;
 </script>
 
 <template>
-  <a :href="unclickable ? '' : href" :class="['no-underline', { unclickable }]">
+  <a
+    :href="unclickable ? '' : href"
+    :class="['no-underline', { unclickable: unclickable || broken, broken }]"
+  >
     <div class="card flex flex-col items-center justify-around">
       <img class="m-0" :src="imgUrl" />
       <h3 class="m-0">{{ props.name }}</h3>
@@ -36,6 +40,26 @@ img {
   box-shadow: 0 0.1rem 0.5rem 0 gray;
 }
 
+a.broken::before {
+  content: "PANQUIA IS ON FIRE";
+  position: absolute;
+  color: red;
+  transform: rotate(-45deg);
+  font-size: 1.5rem;
+  text-align: center;
+  z-index: 2;
+  top: 40%;
+  left: -12.5%;
+  width: 125%;
+  font-family: "Roboto", sans-serif;
+  font-weight: bold;
+}
+
+a.broken > .card {
+  filter: grayscale(100%);
+  opacity: 0.4;
+}
+
 html.dark .card {
   border: 0.2rem solid rgb(126, 93, 98);
   background: rgb(110, 90, 92);

components/index/about.vue

@@ -40,8 +40,9 @@ import { projects } from "@/data/projects";
     <p>…and other things that I'm forgetting right now.</p>
     <p>
       I have two server machines at home — a Dell OptiPlex 780 and a Dell
-      Latitude E5520. One of them is a laptop and I'm surprised it hasn't burnt
+      Latitude E5520. One of them is a laptop and
-      up yet.
+      <s>I'm surprised it hasn't burnt up yet </s>
+      <span class="redphasis">it has burnt up.</span>
     </p>
     <h3>OptiPlex 780 ("asvyn")</h3>
     <ul>
@@ -58,6 +59,10 @@ import { projects } from "@/data/projects";
       <li><strong>RAM:</strong> 10 GB</li>
       <li><strong>Storage:</strong> 300 GB hard drive</li>
       <li><strong>OS:</strong> Arch Linux</li>
+      <li>
+        <strong>Status: </strong>
+        <span class="redphasis">ON FIRE.</span>
+      </li>
     </ul>
   </div>
 </template>
@@ -71,4 +76,9 @@ ul {
   margin: 0;
   line-height: 1.35;
 }
+
+.redphasis {
+  font-weight: bold;
+  color: red;
+}
 </style>

components/index/services.vue

@@ -36,7 +36,12 @@
       >
         Kobo Cloud
       </ServiceCard>
-      <ServiceCard name="Plex" href="https://plex.eggworld.me" img="plex.webp">
+      <ServiceCard
+        name="Plex"
+        href="https://plex.eggworld.me"
+        img="plex.webp"
+        broken
+      >
         Ad-filled media server
       </ServiceCard>
 
@@ -44,6 +49,7 @@
         name="Jellyfin"
         href="https://jellyfin.eggworld.me"
         img="jellyfin.webp"
+        broken
       >
         FOSS media server
       </ServiceCard>
@@ -52,7 +58,8 @@
         name="Minecraft"
         href="minecraft.eggworld.me"
         img="minecraft.webp"
-        :unclickable="true"
+        unclickable
+        broken
       >
         Whitelisted
       </ServiceCard>