feat: Move away from panda and make theme playful

package.json

@@ -3,13 +3,11 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "prepare": "pnpm run codegen",
     "dev": "astro dev",
     "start": "astro preview",
     "build": "CI=false astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro",
-    "codegen": "panda codegen"
+    "astro": "astro"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.8",
@@ -31,7 +29,5 @@
     "marked": "^15.0.7",
     "typescript": "^5.4.2"
   },
-  "devDependencies": {
-    "@pandacss/dev": "^0.35.0"
-  }
+  "devDependencies": {}
 }

postcss.config.cjs

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
-    '@pandacss/dev/postcss': {},
+    // PostCSS plugins can be added here as needed
+    // For now, we're using vanilla CSS with no build-time processing
   },
-}
+};

src/components/BlobCard.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+  title: string;
+  date?: string;
+  slug?: string;
+  href?: string;
+  class?: string;
+}
+
+const { title, date, slug, href, class: className } = Astro.props;
+---
+
+<div class:list={["blob-card", "card", className]}>
+  {href ? (
+    <a href={href} class="card-link">
+      <div class="card-content">
+        <h3 class="card-title">{title}</h3>
+        {date && <time class="card-date">{date}</time>}
+        {slug && <span class="card-slug">{slug}</span>}
+      </div>
+    </a>
+  ) : (
+    <div class="card-content">
+      <h3 class="card-title">{title}</h3>
+      {date && <time class="card-date">{date}</time>}
+      {slug && <span class="card-slug">{slug}</span>}
+    </div>
+  )}
+</div>
+
+<style>
+  .blob-card {
+    clip-path: ellipse(70% 60% at 50% 50%);
+    border-radius: 0; /* Override card border-radius for blob shape */
+  }
+</style> 

src/components/Container.astro

@@ -1,14 +1,6 @@
 ---
-import { container } from "../../styled-system/patterns";
 ---
 
-<div
-  class={container({
-    width: "full",
-    px: "4",
-    maxWidth: "4xl",
-    marginX: "auto",
-  })}
->
+<div class="container w-full px-4 max-w-4xl mx-auto">
   <slot />
 </div>

src/components/ContentfulPostsList.astro

@@ -1,7 +1,7 @@
 ---
 import { POSTS_PER_PAGE_MAX } from "../consts";
+import BlobCard from "./BlobCard.astro";
 
-import { css } from "../../styled-system/css";
 import {
   contentfulClient,
   type Post,
@@ -41,21 +41,33 @@ const {
 }: ContentfulPostsListProps = Astro.props;
 ---
 
-<ul class={css({ listStyle: "none", p: 0 })}>
+<div class="grid-cards">
   {
     posts
       .slice((pageParam - 1) * postsPerPage, pageParam * postsPerPage)
       .map((post: any) => (
-        <li
-          class={css({
-            mb: 4,
-            color: "primary",
-          })}
-        >
-          <a href={`/blog/${post.slug}`}>
-            Title:{post.title}, Date: {post.publishDate}, Slug: {post.slug}
-          </a>
-        </li>
+        <BlobCard
+          title={post.title}
+          date={post.publishDate}
+          slug={post.slug}
+          href={`/blog/${post.slug}`}
+        />
       ))
   }
-</ul>
+</div>
+
+<style>
+  .blob-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: var(--space-lg);
+    padding: var(--space-md) 0;
+  }
+
+  @media (max-width: 768px) {
+    .blob-cards-grid {
+      grid-template-columns: 1fr;
+      gap: var(--space-md);
+    }
+  }
+</style>

src/components/ContentfulWorksList.astro

@@ -1,7 +1,6 @@
 ---
 import Pagination from "./PagePagination.astro";
 import { POSTS_PER_PAGE_MAX } from "../consts";
-import { css } from "../../styled-system/css";
 import { contentfulClient, type Work } from "../lib/contentful";
 
 export const contentfulEntries = await contentfulClient.getEntries<Work>({
@@ -33,12 +32,7 @@ const works = contentfulPosts.slice(
 <ul>
   {
     works.map((post: any) => (
-      <li
-        class={css({
-          mb: 4,
-          color: "primary",
-        })}
-      >
+      <li class="mb-4 text-primary">
         Title: {post.title}, Date: {post.publishDate}, Slug: {post.slug}
       </li>
     ))

src/components/Footer.astro

@@ -1,12 +1,10 @@
 ---
-import { css } from "../../styled-system/css";
-
 const today = new Date();
 ---
 
-<footer class={css({ p: "2em 1em 6em 1em", bg: "gray.100", textAlign: "center" })}>
+<footer class="p-5 text-center bg-gray-100 font-playful">
 	&copy; {today.getFullYear()} Your name here. All rights reserved.
-	<div class={css({ display: "flex", justifyContent: "center", gap: "1em", mt: "1em" })} class="social-links">
+	<div class="flex justify-center gap-4 mt-4 social-links">
 		<a href="https://m.webtoo.ls/@astro" target="_blank">
 			<span class="sr-only">Follow Astro on Mastodon</span>
 			<svg
@@ -41,24 +39,3 @@ const today = new Date();
 		</a>
 	</div>
 </footer>
-<style>
-	footer {
-		padding: 2em 1em 6em 1em;
-		background: linear-gradient(var(--gray-gradient)) no-repeat;
-		color: rgb(var(--gray));
-		text-align: center;
-	}
-	.social-links {
-		display: flex;
-		justify-content: center;
-		gap: 1em;
-		margin-top: 1em;
-	}
-	.social-links a {
-		text-decoration: none;
-		color: rgb(var(--gray));
-	}
-	.social-links a:hover {
-		color: rgb(var(--gray-dark));
-	}
-</style>