src: update pages, css, etc

src/app.css

@@ -5,7 +5,10 @@
   --font-display: "Inter", "sans-serif";
   --color-floral-white: #fffcf2;
   --color-timber-wolf: #ccc5b9;
-  --color-black-olive: #403d39;
   --color-eerie-black: #252422;
-  --color-flame: #eb5e28;
+  --color-accent-dark: #1e1d1b;
+}
+
+.color-transition {
+  transition: color 0.1s ease-in-out;
 }

src/lib/scripts/randomimage.ts

@@ -0,0 +1,10 @@
+import error from "$lib/images/error.png";
+import error1 from "$lib/images/error1.avif";
+import error2 from "$lib/images/error2.avif";
+import error3 from "$lib/images/error3.avif";
+import error4 from "$lib/images/error4.avif";
+
+const images = [error, error1, error2, error3, error4];
+const randomImage = images[Math.floor(Math.random() * 5)];
+
+export { randomImage };

src/routes/+error.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { page } from "$app/state";
-  import fdm from "$lib/images/fdm.png";
+  import { randomImage } from "$lib/scripts/randomimage";
 </script>
 
 <div
   class="font-display flex flex-col items-center justify-center h-screen bg-eerie-black text-floral-white"
 >
-  <img class="mb-4" src={fdm} alt="feelsdankman" />
-  <h1>{page.status}: {page.error?.message}</h1>
+  <img class="mb-4" src={randomImage} alt="" />
+  <h1 class="text-4xl font-bold">{page.status}: {page.error?.message}</h1>
 </div>

src/routes/+layout.svelte

@@ -3,13 +3,14 @@
 </script>
 
 <div
-  class="font-display flex items-center h-10 justify-center bg-eerie-black text-floral-white"
+  class="font-display flex items-center h-10 justify-center bg-accent-dark text-floral-white"
 >
-  <nav class="space-x-4">
-    <a href="/" class="hover:text-timber-wolf">home</a>
-    <a href="/about" class="hover:text-timber-wolf">about</a>
-    <a href="https://status.flake.sh/status/kumo" class="hover:text-timber-wolf"
-      >status</a
+  <nav class="space-x-4 text-xl">
+    <a href="/" class="hover:text-timber-wolf color-transition">home</a>
+    <a href="/about" class="hover:text-timber-wolf color-transition">about</a>
+    <a
+      href="https://status.flake.sh/status/kumo"
+      class="hover:text-timber-wolf color-transition">status</a
     >
   </nav>
 </div>

src/routes/+page.svelte

@@ -18,22 +18,22 @@
   <div class="flex space-x-4 mt-4">
     <a href="https://www.last.fm/user/notoh" aria-label="Lastfm">
       <Lastfm
-        className="w-8 h-8 fill-current text-floral-white hover:text-red-500"
+        className="w-8 h-8 fill-current text-floral-white hover:text-red-500 color-transition"
       />
     </a>
     <a href="https://git.flake.sh/notohh" aria-label="Forgejo">
       <Forgejo
-        className="w-8 h-8 fill-current text-floral-white hover:text-orange-400"
+        className="w-8 h-8 fill-current text-floral-white hover:text-orange-500 color-transition"
       />
     </a>
     <a href="https://bsky.app/profile/flake.sh" aria-label="Bluesky">
       <Bluesky
-        className="w-8 h-8 fill-current text-floral-white hover:text-blue-400"
+        className="w-8 h-8 fill-current text-floral-white hover:text-blue-500 color-transition"
       />
     </a>
     <a href="https://www.twitch.tv/notohh" aria-label="Twitch">
       <Twitch
-        className="w-8 h-8 fill-current text-floral-white hover:text-purple-500"
+        className="w-8 h-8 fill-current text-floral-white hover:text-purple-500 color-transition"
       />
     </a>
   </div>

src/routes/about/+page.svelte

@@ -1,5 +1,12 @@
 <div
   class="font-display flex flex-col items-center justify-center h-screen bg-eerie-black text-floral-white"
 >
-  <h1>nothing here yet lol</h1>
+  <h1 class="text-5xl mb-5">about me</h1>
+  <ul class="text-xl">
+    <li>23 y/o</li>
+    <li>interested in linux, devops, etc</li>
+    <li>metalhead</li>
+    <li>i use nixos btw</li>
+    <li>professional retard</li>
+  </ul>
 </div>