From 775f899bbf232ff4b1b5b274150419215333869a Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Thu, 27 Nov 2025 12:11:21 -0500
Subject: [PATCH] Make reading plan cards fully clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed cards from div with nested link to full clickable <a> tags
- Added subtle lift animation on hover (translateY)
- Better UX - entire card area is now clickable instead of just title
- Maintains all accessibility with proper semantic HTML

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/reading_plans.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/kjvstudy_org/templates/reading_plans.html b/kjvstudy_org/templates/reading_plans.html
index 92a9e3e..2ae6cbe 100644
--- a/kjvstudy_org/templates/reading_plans.html
+++ b/kjvstudy_org/templates/reading_plans.html
@@ -14,30 +14,30 @@
 }
 
 .plan-card {
+    display: block;
     padding: 1.5rem;
     border: 1px solid var(--border-color);
     border-radius: 4px;
     transition: all 0.2s;
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
 }
 
 .plan-card:hover {
     border-color: var(--border-color-darker);
     box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
 }
 
 .plan-name {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
-}
-
-.plan-name a {
     color: var(--link-color);
-    text-decoration: none;
-    border-bottom: none;
 }
 
-.plan-name a:hover {
+.plan-card:hover .plan-name {
     color: var(--link-hover);
 }
 
@@ -79,11 +79,11 @@
 
     <div class="plan-grid">
         {% for plan in plans %}
-        <div class="plan-card">
-            <div class="plan-name"><a href="/reading-plans/{{ plan.id }}">{{ plan.name }}</a></div>
+        <a href="/reading-plans/{{ plan.id }}" class="plan-card">
+            <div class="plan-name">{{ plan.name }}</div>
             <div class="plan-description">{{ plan.description }}</div>
             <div class="plan-duration">{{ plan.days }} days</div>
-        </div>
+        </a>
         {% endfor %}
     </div>
 </section>