style: update

4 files changed, 71 insertions, 19 deletions

diff --git a/src/index.css b/src/index.css
index 2679ef7..bad19d3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,15 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index d9eed89..8ca9968 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -14,7 +14,7 @@ export default function NotFound() {
 
   return (
     <>
-      <h1>404 - Not found</h1>
+      <h1 className="text-2xl font-semibold pt-4">404 - Not found</h1>
       <img src="/images/404.webp" className="rounded-lg" />
     </>
   );
diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index c950a23..6a5c22c 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -1,4 +1,12 @@
-import Entry from "../components/Entry";
+import { ArrowRight } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import Gallery from "@/components/Gallery";
 
 interface Meta {
   slug: string;
@@ -8,6 +16,14 @@ interface Meta {
   cover?: string;
 }
 
+const images =[
+  { src: "/images/3ds.webp", alt: "Nintendo 3DS", id: 1 },
+  { src: "/images/esp32.webp", alt: "ESP 32", id: 2 },
+  { src: "/images/setup.webp", alt: "Setup", id: 4 },
+  { src: "/images/ocarinaoftime.webp", alt: "Ocarina of Time", id: 6 },
+  { src: "/images/hellsparadise.webp", alt: "Hells paradise", id: 7 }
+]
+
 const postFiles = import.meta.glob("../blog/*.md", { eager: true }) as Record<
   string,
   { attributes: Omit<Meta, "slug"> }
@@ -25,21 +41,50 @@ const posts: Meta[] = Object.entries(postFiles)
 export default function Blog() {
   return (
     <>
-      <title>߸ projects</title>
-      <h1>Blog</h1>
-      <div className="grid grid-cols-2 gap-4 [grid-auto-rows:1fr]">
- 
-      {posts.map((post) => (
-          <Entry
-            title={post.title}
-            excerpt={post.excerpt}
-            cover={post.cover}
-            href={`/blog/${post.slug}`}
-            date={post.date}
-          />
-      ))}
-              </div>
+      <title>Blog</title>
+      <main className="container mx-auto py-12">
+          <h1 className="text-3xl font-semibold mb-4">
+            Blog Posts
+          </h1>
+          <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
+            {posts.map((post) => (
+              <Card className="bg-secondary border border-border p-0" key={post.slug}>
+                <CardHeader className="p-0">
+                  <a
+                    href={`/blog/${post.slug}`}
+                    className="block rounded-t-xl overflow-hidden"
+                  >
+                    <img
+                      src={post.cover}
+                      alt={post.title}
+                      className="h-48 w-full object-cover object-center"
+                      style={{ marginTop: 0, paddingTop: 0 }}
+                    />
+                  </a>
+                </CardHeader>
+                <CardContent className="pb-4 px-6">
+                  <CardTitle className="text-lg font-semibold hover:underline md:text-xl mb-2">
+                    <a href={`/blog/${post.slug}`}>{post.title}</a>
+                  </CardTitle>
+                  <CardDescription className="mb-4">{post.excerpt}</CardDescription>
+                  <a
+                    href={`/blog/${post.slug}`}
+                    className="inline-flex items-center text-foreground font-medium hover:underline text-sm"
+                  >
+                    Read more
+                    <ArrowRight className="ml-2 size-4" />
+                  </a>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
 
+          <section className="mt-12">
+          <h2 className="text-2xl font-semibold mb-6">Some images</h2>
+          <Gallery images={images} />
+        </section>
+        
+      </main>
     </>
   );
 }
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
index 76396ae..43ffe5e 100644
--- a/src/pages/Post.tsx
+++ b/src/pages/Post.tsx
@@ -39,9 +39,9 @@ export default function Post() {
         />
       )}
 
-      <h1>{meta.title}</h1>
-      <p className="text-sm text-zinc-500 mb-8">{formDate.format(new Date(meta.date))}</p>
-      <div className="post">
+      <h1 className="text-2xl font-bold mb-4">{meta.title}</h1>
+      <p className="text-sm text-muted-foreground mb-8">{formDate.format(new Date(meta.date))}</p>
+      <div className="prose prose-neutral prose-xl max-w-none prose-img:mx-auto prose-img:w-1/2 prose-img:rounded-lg prose-img:shadow-lg dark:prose-invert">
         <Content />
       </div>
     </>