From af524778849d94413ad3178c64b150c7bc3d653b Mon Sep 17 00:00:00 2001
From: schererleander <leander@schererleander.de>
Date: Thu, 26 Jun 2025 23:49:19 +0200
Subject: chore: styling

---
 src/index.css      | 59 +++++++++++++++++++++++++++++++++++++++++++++---------
 src/pages/Blog.tsx |  4 ++--
 src/pages/Post.tsx | 47 ++++++++++++++++++++-----------------------
 3 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/src/index.css b/src/index.css
index a25df62..fcfe02a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,17 +1,56 @@
-
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 @layer base {
-  body { @apply bg-white dark:bg-black/95; }
-  span, p, a, li, code { @apply dark:text-gray-200; }
-  svg:not(.no-global) { @apply transform duration-200 ease-in-out hover:scale-110 dark:text-gray-200 hover:text-gray-400 hover:dark:text-white;}
-  h1 { @apply text-4xl font-bold mb-4 dark:text-gray-200; }
-  h2 { @apply text-2xl font-semibold mb-2 dark:text-gray-200; }
-  h3 { @apply text-xl font-semibold dark:text-gray-200; }
-  section > * > a:not(.block):link { @apply underline text-blue-500; }
-  section > * > a:not(.block):visited { @apply underline text-purple-500; }
+  body {
+    @apply bg-white dark:bg-black/95;
+  }
+
+  span,
+  p,
+  a,
+  li,
+  code {
+    @apply dark:text-gray-200;
+  }
+
+  svg:not(.no-global) {
+    @apply transform duration-200 ease-in-out hover:scale-110 dark:text-gray-200 hover:text-gray-400 hover:dark:text-white;
+  }
+
+  h1 {
+    @apply text-4xl font-bold mb-4 dark:text-gray-200;
+  }
+
+  h2 {
+    @apply text-2xl font-semibold mb-2 dark:text-gray-200;
+  }
+
+  h3 {
+    @apply text-xl font-semibold dark:text-gray-200;
+  }
+
+  article>*>p {
+    @apply mb-4 leading-relaxed;
+  }
+
+  article>*>ul {
+    @apply list-disc pl-6 space-y-1;
+  }
+
+  article>*>*>img {
+    @apply mx-auto mb-4 w-64 rounded-lg shadow;
+  }
+
+  p>a:not(.block):link {
+    @apply underline text-blue-500;
+  }
+
+  p>a:not(.block):visited {
+    @apply underline text-purple-500;
+  }
+
   pre {
     @apply whitespace-pre overflow-x-auto max-w-full max-h-80 rounded-lg border p-2 my-2 border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900;
   }
@@ -19,4 +58,4 @@
   * {
     transition: background-color 0.25s, color 0.25s, border-color 0.25s;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index 42e2716..47b44d6 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -28,7 +28,7 @@ export default function Blog() {
       <h1 className="text-4xl font-bold mb-8">Blog</h1>
       
       {posts.map((post) => (
-        <a key={post.slug} href={`/blog/${post.slug}`} className="block">
+        <a key={post.slug} href={`/blog/${post.slug}`} className="block py-1">
           <CardLink
             title={post.title}
             body={post.excerpt}
@@ -38,4 +38,4 @@ export default function Blog() {
       ))}
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
index d3add83..b2b1d5b 100644
--- a/src/pages/Post.tsx
+++ b/src/pages/Post.tsx
@@ -1,32 +1,32 @@
-import { useParams } from "react-router-dom";
-import NotFoundPage from "./404Page";
-
-interface PostFile {
-  attributes: {
-    title: string;
-    date: string;
-    cover?: string;
-  };
-  markdown: string;
-  ReactComponent: React.FC<any>;
+import { useParams, Navigate } from "react-router-dom";
+import type { FC } from "react";
+
+interface Meta {
+  title: string;
+  date: string;
+  cover?: string;
+}
+
+interface Post {
+  attributes: Meta;
+  ReactComponent: FC;
 }
 
-const posts = import.meta.glob("../blog/*.md", {
-  eager: true,
-}) as Record<string, PostFile>;
+const posts = import.meta.glob<Post>("../blog/*.md", { eager: true });
+
+const formDate = new Intl.DateTimeFormat("de-DE", { dateStyle: "medium" });
 
 export default function Post() {
-  const { slug } = useParams<{ slug: string }>();
+  const { slug } = useParams();
+  
+  const post = posts[`../blog/${slug}.md`];
 
-  const match = Object.entries(posts).find(([path]) =>
-    path.endsWith(`${slug}.md`)
-  );
+  if (!post) return <Navigate to="/404" replace />;
 
-  if (!match) return <NotFoundPage />;
-  const { attributes: meta, ReactComponent: Content } = match[1];
+  const { attributes: meta, ReactComponent: Content } = post;
 
   return (
-    <article className="prose prose-zinc dark:prose-invert mx-auto px-4 py-10">
+    <article>
       <a href="/blog" className="no-underline hover:underline">
         ← Back
       </a>
@@ -40,10 +40,7 @@ export default function Post() {
       )}
 
       <h1>{meta.title}</h1>
-      <p className="text-sm text-zinc-500 mb-8">
-        {new Date(meta.date).toLocaleDateString("de-DE")}
-      </p>
-
+      <p className="text-sm text-zinc-500 mb-8">{formDate.format(new Date(meta.date))}</p>
       <Content />
     </article>
   );
-- 
cgit v1.3.1