Add liv

src/lib/elem/PageView.svelte

@@ -0,0 +1,16 @@
+<main>
+  <div id="holder">
+    <slot />
+  </div>
+</main>
+
+<style>
+  main {
+    min-height: 95vh;
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/routes/+layout.svelte

@@ -6,5 +6,36 @@
   <a href="/">home</a>
   <slot />
   <hr />
-  <pre>a website that was made</pre>
+  <pre>trinket</pre>
 </main>
+
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Lisu+Bosa&family=Major+Mono+Display&family=Noto+Serif+Vithkuqi&family=Roboto+Mono&family=Vina+Sans&display=swap");
+
+  pre {
+    animation-name: fontChange;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes fontChange {
+    0% {
+      font-family: "Noto Serif Vithkuqi", monospace;
+    }
+    20% {
+      font-family: "Noto Serif Vithkuqi", cursive;
+    }
+    40% {
+      font-family: "Roboto Mono", monospace;
+    }
+    60% {
+      font-family: "Ranchers", cursive;
+    }
+    80% {
+      font-family: "Vina Sans", cursive;
+    }
+    100% {
+      font-family: "Major Mono Display", monospace;
+    }
+  }
+</style>

src/routes/+page.svelte

@@ -2,7 +2,8 @@
   const links = [
     "fruit-bro",
     "bear",
-    "cave-buddy"
+    "cave-buddy",
+    "liv",
   ];
 </script>
 

src/routes/b/liv/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import CountDownTimer from "$lib/elem/CountDownTimer.svelte";
+  import PageView from "$lib/elem/PageView.svelte";
+</script>
+
+<main>
+  <h1>Happy Birthday!</h1>
+
+  <p>I'm not sure what to put here, so maybe I'll put a few memories</p>
+
+  <div id="exhibits">
+    <PageView>
+      <h2>Exhibit A</h2>
+      <img src="/liv/goldfish.png" alt="goldfish cracker" />
+      <blockquote>
+        this is a big fucking goldfish, you could probably take a nap on it and
+        when you wake up, just start munching away
+      </blockquote>
+    </PageView>
+
+    <PageView>
+      <h2>Exhibit B</h2>
+      <img
+        src="/liv/paranormal-activities_poster.jpg"
+        alt="movie poster for Paranormal Activities"
+      />
+      <blockquote>
+        a really bad movie - well, maybe it's just me. <br />
+        at least i had a good time watching it
+      </blockquote>
+    </PageView>
+
+    <PageView>
+      <h2>Exhibit C</h2>
+      <img src="/liv/nails.jpeg" alt="nails with acrylics" />
+      <blockquote>the bane of my existence, aka the tickle 3000s</blockquote>
+    </PageView>
+  </div>
+
+  <div id="message">
+    <p>
+      Well, that's enough memories for now. Especially since it's your birthday.
+      That means like, a whole entire year has gone bye since you were younger.
+    </p>
+    <p>
+      There's so much to say, but honestly, I'm sure you don't need me, of all
+      people telling it to you.
+    </p>
+    <p><b>Anyways</b></p>
+    <p>
+      Goodness knows you've been looking at this shitty site long enough, go
+      enjoy your special day and say hi to your lovely mom and grandparents for
+      me.
+    </p>
+  </div>
+
+  <CountDownTimer birthday={"Aug 4"} />
+</main>
+
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Edu+SA+Beginner:wght@400;700&display=swap");
+
+  main {
+    font-family: "Edu SA Beginner", cursive;
+
+    text-align: center;
+
+    background: pink;
+  }
+
+  img {
+    max-width: 80%;
+  }
+
+  blockquote {
+    color: grey;
+    size: 0.7rem;
+
+    font-style: italic;
+  }
+</style>