clean up old code (??? what was i COOKING)

src/lib/Footer.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let remote;
+  export let hash;
+</script>
+
+<footer class="center">
+  <hr>
+
+  <div class="center">
+    <a href="https://stats.uptimerobot.com/ZyM4vi7Ao7" style="text-decoration: none">Status</a> • <a href="{remote.replace('.git', '')}/src/commit/{hash}" style="text-decoration: none">Source ({hash.slice(0, 7)})</a>
+  </div>
+
+  <i>Thank you for sus lel meem fof.</i><br>
+  <img src="wawoo.png" alt="wawoo.png">
+  <img src="cat.gif" alt="a jumping cat">
+  <br>
+  <img src="badges/badge1.gif" alt="badge that says 'best viewed with any browser, any os'">
+  <img src="badges/badge2.gif" alt="aol instant messenger badge">
+  <img src="badges/badge3.gif" alt="'written in the vi editor' badge">
+  <img src="badges/badge4.gif" alt="'get quake now' badge">
+  <a class="stealth-link" href="https://dark-firepit.cloud"><img src="badges/dark-firepit.png" alt="the dark-firepit badge"></a>
+  <a class="stealth-link" href="https://oat.zone"><img src="badges/oat-zone.gif" alt="the oat.zone badge"></a>
+</footer>

src/lib/Header.svelte

@@ -1,14 +1,15 @@
-<script>
-
-</script>
-
 <style>
   .logo {
     border-radius: 50%;
     animation: 2s glow infinite ease-in-out;
     animation-direction: alternate;
+    display: block;
+    margin: 1.5rem auto;
+    margin-top: 3rem;
   }
 </style>
 
-<img src="/logo.png" width="128" height="128" class="logo center" alt="dark-firepit logo">
+<header>
-<h1 class="center glow-text"><a class="stealth-link" href="/">dark-firepit</a></h1>
+  <img src="/logo.png" width="128" height="128" class="logo" alt="dark-firepit logo">
+  <h1 class="center glow-text"><a class="stealth-link" href="/">dark-firepit</a></h1>
+</header>

src/lib/People.svelte

@@ -203,7 +203,7 @@ a set of 2 wedding videos.
     transition-timing-function: ease-out;
     height: 175px;
     transition: width 0.5s, height 0.45s, top 0.5s, left 0.45s, background-color 0.1s;
-    background-color: transparent;
+    background-color: rgba(25, 25, 25, 0.6);
     gap: 0.7em;
     color: #fff;
     overflow: hidden;

src/lib/YoutubeEmbed.svelte

@@ -0,0 +1,5 @@
+<script>
+  let hash;
+</script>
+
+<iframe width="1280" height="720" src="https://www.youtube.com/embed/{hash}" title="An unintentional CTF, and how we solved it [BlanketCon 23 UNAUTHORIZED????]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen/>

src/routes/+page.svelte

@@ -4,6 +4,7 @@
   import tippy from 'tippy.js';
   import 'tippy.js/dist/tippy.css';
   import { onMount } from "svelte";
+  import Footer from "../lib/Footer.svelte";
 
   let tipFriendCloud;
 
@@ -25,17 +26,17 @@
 <main>
   <Header/>
 
-  <div class="big paragraph neat-bg-container">
+  <div class="big neat-bg-container">
     <div class="neat-bg" style="transform: skewY(1deg)"></div>
     <pre>firepit</pre> is a friend group of sane<em>*</em> developers, mathematicians, artists
     and overall queer furries.
   </div>
 
-  <div class="paragraph center">
+  <p class="center">
     This domain <em>(and associated server)</em> is used for hosting various
     <span class="has-tooltip" bind:this={tipFriendCloud}>friend cloud</span> services. <span title="among us">Among</span> those
     services is:
-  </div>
+  </p>
 
   <el>
     <li><a href="https://nextcloud.oat.zone">Nextcloud</a></li>
@@ -43,9 +44,9 @@
     <li><a href="https://nitter.oat.zone/">Nitter</a></li>
   </el>
 
-  <div class="paragraph">
+  <p>
     Alongside those, we also host some miscellaneous pages and services:
-  </div>
+  </p>
 
   <el>
     <li><a href="/videos-of-all-time">Videos of all time</a></li>
@@ -59,59 +60,44 @@
     </li>
   </el>
 
-  <div class="paragraph">
+  <p>
     And occasionally, we fork or develop software:
-  </div>
+  </p>
 
   <el>
     <li><a href="https://git.oat.zone/dark-firepit/dark-firepit-modpack">1.19.2 Minecraft modpack</a></li>
     <li><a href="https://git.oat.zone/dark-firepit/dotfiles">NixOS system configuration</a></li>
   </el>
 
-  <div class="big paragraph neat-bg-container center">
+  <div class="big neat-bg-container center">
     <div class="neat-bg" style="transform: skewY(-1deg)"></div>
     But who are we, really?
   </div>
 
-  <div class="paragraph center">
+  <p class="center">
     We consist of 14 people, give or take:
-  </div>
+  </p>
+
+  <hr>
 
   <People/>
 
-  <div class="big paragraph neat-bg-container center">
+  <div class="big neat-bg-container center">
     <div class="neat-bg" style="transform: skewY(0.5deg)"></div>
     Why not reach out?
   </div>
 
-  <div class="paragraph">
+  <p>
     <b>Tell us feedback about our services!</b> Tell us suggestions, issues, or just tell us about your day.
     We'll be sure to communally decide how to reply with the most informative, funniest or otherwise best
     response possible.
-  </div>
+  </p>
 
-  <div class="paragraph">
+  <p>
     Currently, you'll just have to use Jill's email, which would be <b>oat at [its domain]</b> (be sure
     to include <i>"firepit"</i> somewhere in the subject line). However, in the future we're looking to get
     more contact options. <i>Don't expect any requests to join the group to be taken seriously.</i>
-  </div>
+  </p>
 
-  <hr style="width: 120%; left: -10%; position: relative">
+  <Footer remote={data.remote} hash={data.hash}/>
-
-  <div class="center">
-    <a href="https://stats.uptimerobot.com/ZyM4vi7Ao7" style="text-decoration: none">Status</a> • <a href="{data.remote.replace('.git', '')}/src/commit/{data.hash}" style="text-decoration: none">Source ({data.hash.slice(0, 7)})</a>
-  </div>
-
-  <footer class="center">
-    <i>Thank you for sus lel meem fof.</i><br>
-    <img src="wawoo.png" alt="wawoo.png">
-    <img src="cat.gif" alt="a jumping cat">
-    <br>
-    <img src="badges/badge1.gif" alt="badge that says 'best viewed with any browser, any os'">
-    <img src="badges/badge2.gif" alt="aol instant messenger badge">
-    <img src="badges/badge3.gif" alt="'written in the vi editor' badge">
-    <img src="badges/badge4.gif" alt="'get quake now' badge">
-    <a class="stealth-link" href="https://dark-firepit.cloud"><img src="badges/dark-firepit.png" alt="the dark-firepit badge"></a>
-    <a class="stealth-link" href="https://oat.zone"><img src="badges/oat-zone.gif" alt="the oat.zone badge"></a>
-  </footer>
 </main>

src/routes/videos-of-all-time/+page.svelte

@@ -43,7 +43,7 @@
 <main style="width: 1100px">
   <Header/>
 
-  <div class="big paragraph neat-bg-container center">
+  <div class="big neat-bg-container center">
     <div class="neat-bg" style="transform: skewY(1deg)"></div>
     videos of all fucking time compilation
   </div>

src/style.css

@@ -10,7 +10,7 @@ a:not(.stealth-link) {
 }
 a:not(.stealth-link):hover {
   color: var(--accent-color-highlight);
-  filter: drop-shadow(0px 0px 4px var(--accent-color-highlight));
+  filter: drop-shadow(0px 0px 6px var(--accent-color-highlight));
 }
 a.stealth-link {
   color: #fff;
@@ -42,16 +42,11 @@ main {
   max-width: 90%;
   width: 600px;
 
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2em;
-  padding-top: 3em;
   margin-bottom: 6em;
 }
 .center {
-  align-self: center;
   text-align: center;
+  margin: auto;
 }
 pre {
   display: inline;
@@ -61,10 +56,28 @@ em {
 }
 .big {
   font-size: 28px;
-}
+
-.paragraph {
   line-height: 1.3;
   text-align: justify;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+
+  width: fit-content;
+}
+p {
+  line-height: 1.3;
+  text-align: justify;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+hr {
+  border-color: #222230;
+  margin: 1rem -2rem;
+}
+@media (max-width: 650px) {
+  hr {
+    margin: 1rem 1rem;
+  }
 }
 
 @keyframes glow {

update.sh

@@ -2,4 +2,4 @@
 pnpm run build
 # clean up old assets
 #ssh dark-firepit "rm -f /var/www/dark-firepit.cloud/_app"
-rsync -z -h -v -r -P -t ./build/ dark-firepit:/var/www/dark-firepit.cloud/
+rsync -z -h -v -r -P -t ./build/ lucent-firepit:/var/www/dark-firepit.cloud/