From a4a92d785750dfefaf27a29aa945462cd7e24c63 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Fri, 26 Sep 2025 13:40:02 +0100
Subject: [PATCH] improved styling

---
 src/components/ProjectListItem.astro | 38 ++++++++++++++++++----------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/ProjectListItem.astro b/src/components/ProjectListItem.astro
index 736e53d4..5df403b7 100644
--- a/src/components/ProjectListItem.astro
+++ b/src/components/ProjectListItem.astro
@@ -12,28 +12,38 @@ const { title, description, date, image, slug } = Astro.props;
     }
     .project-title {
         color: var(--ayu-accent);
-        transition: color 0.2s;
     }
-    .project-item:hover .project-title {
-        color: var(--ayu-red-500);
+    .project-description {
+        color: var(--ayu-fg);
+    }
+    .project-date {
+        color: var(--ayu-gutter);
     }
 </style>
 
-<a href={`/projects/${slug}`} class="project-item block border p-4 mb-4">
-    <div class="flex gap-4">
+<a href={`/projects/${slug}`} class="project-item block border">
+    <div class="flex gap-4 p-4">
         <div class="w-16 h-16 flex-shrink-0">
-            {image ? (
-                <img src={image} alt={`${title} icon`} class="w-full h-full object-cover rounded" />
-            ) : (
-                <div class="w-full h-full border border-ayu-gutter rounded"></div>
-            )}
+            {
+                image ? (
+                    <img
+                        src={image}
+                        alt={`${title} icon`}
+                        class="w-full h-full object-cover rounded"
+                    />
+                ) : (
+                    <div class="w-full h-full border border-ayu-gutter rounded" />
+                )
+            }
         </div>
-        <div class="flex-1">
-            <h3 class="project-title text-lg mb-2">
+        <div class="flex flex-col gap-2">
+            <h3 class="project-title text-lg -mb-2">
                 {title}
             </h3>
-            <p class="text-sm text-ayu-fg mb-2">{description}</p>
-            <p class="text-xs text-ayu-gutter">{date}</p>
+            <p class="project-description text-sm">
+                {description}
+            </p>
+            <p class="project-date text-xs">{date}</p>
         </div>
     </div>
 </a>