feat: use comic mono package, show relative time in status for log

package.json

@@ -40,6 +40,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@fontsource/comic-mono": "^5.1.0",
     "@neodrag/svelte": "^2.3.1",
     "@skyware/bot": "^0.3.8",
     "@std/toml": "npm:@jsr/std__toml",
@@ -49,7 +50,8 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "robots-parser": "^3.0.1",
-    "steamgriddb": "^2.2.0"
+    "steamgriddb": "^2.2.0",
+    "svelte-time": "^2.0.0"
   },
   "trustedDependencies": [
     "@sveltejs/kit",

src/components/note.svelte

@@ -65,7 +65,7 @@
     }
 </script>
 
-<div class="text-wrap break-words max-w-[70ch] leading-none">
+<div class="text-wrap break-words max-w-[70ch] leading-tight">
 {#if !onlyContent}<Token v={renderDate(note.published)} small={!isHighlighted}/>{/if} <Token v={note.content} str/>
 {#if note.hasMedia}<Token v="-contains media-" keywd small/>{/if}
 {#if note.hasQuote}<Token v="-contains quote-" keywd small/>{/if}

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import getTitle from '$lib/getTitle';
 	import NavButton from '../components/navButton.svelte';
 	import Tooltip from '../components/tooltip.svelte';
+	import "@fontsource/comic-mono";
 	import '../styles/app.css';
 
 	interface Props {

src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import Note from '../components/note.svelte';
 	import Window from '../components/window.svelte';
 	import LatestStuff from './lateststuff.md';
+	import Time from "svelte-time";
 
 	interface Props {
 		data: any;
@@ -151,15 +152,15 @@
 		</Window>
 		<Window title="status" style="mt-auto" removePadding>
 			{#if data.lastNote}
-			<div class="m-1.5 flex flex-col font-monospace">
+			<div class="m-1.5 flex flex-col font-monospace text-sm">
-				<div
+				<p
-					class="prose prose-ralsei items-center p-1 border-4 text-sm font-bold bg-ralsei-black"
+					class="prose prose-ralsei p-1 border-4 text-sm bg-ralsei-black"
 					style="border-style: double double none double;"
 				>
-					<a href="/entries">last log</a>
+					<a href="/entries">last log was...</a>
-					<span class="border-4 pl-[1ch]" style="border-style: none none none double;">published on {renderDate(data.lastNote.published)}</span>
+					published <Time relative format="dddd @ h:mm A · MMMM D, YYYY" timestamp={data.lastNote.published}/>!
-				</div>
+				</p>
-				<div class="mt-0 p-1 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
+				<div class="mt-0 p-1.5 border-4 border-double bg-ralsei-black min-w-full max-w-[40ch]">
 					<Note note={data.lastNote} onlyContent/>
 				</div>
 			</div>
@@ -190,7 +191,7 @@
 						<a
 							title={data.lastTrack.name}
 							href="https://www.last.fm/user/yusdacra"
-							class="hover:underline">{data.lastTrack.name}</a
+							class="hover:underline motion-safe:hover:animate-squiggle">{data.lastTrack.name}</a
 						>
 					</p>
 					<p

tailwind.config.js

@@ -50,7 +50,7 @@ export default {
     },
     fontFamily: {
       'sans-serif': ['"Comic Sans", sans-serif'],
-      monospace: ['"Comic Shanns", monospace'],
+      monospace: ['"Comic Mono", monospace'],
     }
   },
   plugins: [