From f73252d4fbf7a1341b4219e07989b42ee30b4e41 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sun, 23 Nov 2025 12:16:43 -0500
Subject: [PATCH] Improve resource page mobile/iOS styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced mobile view with better contrast and readability:
- Increased border thickness from 1px to 2px with darker colors
- Changed category titles to primary text color for prominence
- Made card borders and shadows more visible
- Improved text contrast by using primary color for descriptions
- Added font-weight and thicker underlines for links
- Increased spacing for better touch targets

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/resources.html | 49 ++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/kjvstudy_org/templates/resources.html b/kjvstudy_org/templates/resources.html
index 2e86614..e38e918 100644
--- a/kjvstudy_org/templates/resources.html
+++ b/kjvstudy_org/templates/resources.html
@@ -79,11 +79,58 @@
 @media (max-width: 768px) {
     .resource-grid {
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: 1.25rem;
     }
 
     .intro-text {
         max-width: 100%;
+        font-size: 1.1rem;
+        line-height: 1.8;
+    }
+
+    .category-title {
+        font-size: 1.3rem;
+        color: var(--text-color);
+        border-bottom: 2px solid var(--border-color-darker);
+        padding-bottom: 0.75rem;
+        margin-bottom: 1.25rem;
+    }
+
+    .resource-card {
+        padding: 1.25rem;
+        border: 2px solid var(--border-color-darker);
+        border-radius: 6px;
+        background: var(--bg-color);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    .resource-card h3 {
+        font-size: 1.15rem;
+        margin-bottom: 0.6rem;
+    }
+
+    .resource-card h3 a {
+        color: var(--text-color);
+        font-weight: 600;
+        border-bottom: 2px solid var(--border-color-darker);
+        padding-bottom: 2px;
+    }
+
+    .resource-count {
+        font-size: 0.85rem;
+        color: var(--text-secondary);
+        font-weight: 500;
+        margin-bottom: 0.65rem;
+    }
+
+    .resource-description {
+        font-size: 0.95rem;
+        line-height: 1.65;
+        color: var(--text-color);
+    }
+
+    .resource-category {
+        margin-bottom: 2.5rem;
     }
 }
 </style>