From 7d492d332c07831b1aa8e6ee611443d699f89764 Mon Sep 17 00:00:00 2001
From: Greg <gregman@livingonlinenow.com>
Date: Sun, 25 May 2025 20:26:14 +0200
Subject: [PATCH] feat: add card component with hover effects and
 category-based styling

---
 layouts/partials/card.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/card.html b/layouts/partials/card.html
index 926e9ba..25f5885 100644
--- a/layouts/partials/card.html
+++ b/layouts/partials/card.html
@@ -1,4 +1,5 @@
-<div class="card" data-category="{{ .Params.category }}">
+<a class="card-link-outer" href="{{ .RelPermalink }}">
+  <div class="card" data-category="{{ .Params.category }}">
   {{ with .Params.image }}
     <img src="{{ . }}" alt="{{ $.Title }} cover">
   {{ else }}
@@ -19,5 +20,20 @@
   {{ with .Params.rating }}<div class="card-rating">{{ partial "stars.html" (dict "rating" .) }} {{ . }}</div>{{ end }}
   {{ with .Params.likes }}<div class="card-likes">&#128077; {{ . }}</div>{{ end }}
   <div class="card-desc">{{ .Params.description }}</div>
-  <a class="card-link" href="{{ .RelPermalink }}">View details &#8594;</a>
-</div>
+  </div>
+</a>
+<style>
+.card-link-outer {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+.card-link-outer .card {
+  transition: box-shadow 0.2s, transform 0.2s;
+}
+.card-link-outer:hover .card {
+  box-shadow: 0 6px 24px rgba(33,150,243,0.18), 0 1.5px 6px rgba(33,150,243,0.10);
+  transform: translateY(-2px) scale(1.02);
+  cursor: pointer;
+}
+</style>