Markdown rendering

templates/input.css

@@ -1,2 +1,87 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@layer components {
+  .prose-compact {
+    @apply prose prose-slate max-w-none;
+
+    --tw-prose-body: theme(colors.gray.700);
+    --tw-prose-headings: theme(colors.gray.900);
+    --tw-prose-links: theme(colors.blue.600);
+    --tw-prose-code: theme(colors.gray.800);
+  }
+
+  .prose-compact p {
+    @apply mb-2 mt-0;
+  }
+
+  .prose-compact h1 {
+    @apply pb-2 mb-3 border-b-2 border-gray-100;
+  }
+
+  .prose-compact h2 {
+    @apply mt-4 pb-2 mb-3 border-b-2 border-gray-100 font-semibold;
+  }
+
+  .prose-compact h3 {
+    @apply mt-3 mb-1;
+  }
+
+  .prose-compact h4,
+  .prose-compact h5,
+  .prose-compact h6 {
+    @apply mt-2 mb-1;
+  }
+
+  .prose-compact ul,
+  .prose-compact ol {
+    @apply my-2 space-y-0;
+  }
+
+  .prose-compact li {
+    @apply my-0;
+  }
+
+  .prose-compact blockquote {
+    @apply my-3 py-2;
+  }
+
+  .prose-compact img {
+    @apply m-0 align-top;
+  }
+
+  .prose-compact a:has(img) {
+    @apply no-underline border-0 inline-block align-top;
+  }
+
+  .prose-compact a img {
+    @apply inline-block align-top;
+  }
+
+  .prose-compact :not(pre) > code {
+    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono font-normal;
+  }
+
+  .prose-compact :not(pre) > code::before,
+  .prose-compact :not(pre) > code::after {
+    content: none !important;
+  }
+
+  .prose-compact pre {
+    @apply my-3 p-4 bg-gray-100 text-gray-800 rounded-sm overflow-x-auto border border-gray-200;
+  }
+
+  .prose-compact pre code {
+    @apply bg-transparent text-gray-800 p-0 rounded-none;
+  }
+
+  .prose-compact pre code::before,
+  .prose-compact pre code::after {
+    content: none !important;
+  }
+}

templates/post.html

@@ -32,7 +32,7 @@
                     </div>
                 </div>
             </header>
-            <div class="px-8 py-8 prose prose-lg max-w-none">{{ post.content | safe }}</div>
+            <div class="px-8 py-8 prose-compact">{{ post.content | safe }}</div>
         </article>
         <div class="mt-8 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg text-white p-8 text-center">
             <h3 class="text-2xl font-bold mb-2">Enjoyed this post?</h3>