From f0acc64141b3c2c65fc9c0d366fc68decb881bc9 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Fri, 3 Mar 2023 23:11:56 +0100
Subject: [PATCH] improved post styles

---
 src/lib/layouts/post.svelte | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/lib/layouts/post.svelte b/src/lib/layouts/post.svelte
index 3cf03e5..8a0260c 100644
--- a/src/lib/layouts/post.svelte
+++ b/src/lib/layouts/post.svelte
@@ -39,7 +39,10 @@
 <main class:dark={$darkmode} class="post-layout">
     <span><a href="/posts">Posts</a> /</span>
     <h1>{title}</h1>
-    <span>Written {dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span>
+    <div class="flex justify-between flex-wrap">
+        <span>Written {dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span>
+        <span>{categories.join(", ")}</span>
+    </div>
     <slot />
     <noscript>Although the page mostly works without Javascript, you won't be able to comment. Also, I acknowledge the privacy flaws, but Javascript is a fundamental part of modern web, and shouldn't be disabled. Maybe use an adblock instead of disabling it for everything?</noscript>
     <script src="https://utteranc.es/client.js"
@@ -134,11 +137,18 @@
     }
     :global(body .post-layout p img) {
         @apply inline;
+    }
+    :global(body .post-layout pre) {
+        @apply rounded-lg bg-dark-400;
+    }
+    :global(body .post-layout ul) {
+        @apply list-disc list-inside;
+    }
+    :global(body .post-layout ul li) {
+        @apply my-0.5;
     }
 	main {
-        margin: 0 auto;
-        max-width: 800px;
-        padding: 0 20px 20px;
+        @apply m-auto max-w-3xl p-4 py-6;
 	}
     h1 {
         @apply text-4xl font-bold;