From 9bb2d3d3ff224edef16b7ed326a0cd0ca00ffbd0 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sat, 22 Nov 2025 07:51:02 -0500
Subject: [PATCH] Add comprehensive mobile responsive styles to homepage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented mobile-first responsive design for screens ≤760px to improve
usability on phones and tablets.

Mobile improvements:
- Full-width layouts: removed 60%/70% max-width constraints
- Vertical search form: input and button stack for better mobile UX
- Single-column grids: featured resources and quick links stack vertically
- Optimized spacing: reduced margins and padding for mobile screens
- Better typography: adjusted font sizes for mobile readability
- Touch-friendly: larger tap targets with full-width buttons
- Consistent spacing: unified gaps and margins across components

Before: constrained widths caused cramped layouts on mobile
After: fluid, touch-friendly interface that uses full screen width

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

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

diff --git a/kjvstudy_org/templates/index.html b/kjvstudy_org/templates/index.html
index a2d3eca..c683184 100644
--- a/kjvstudy_org/templates/index.html
+++ b/kjvstudy_org/templates/index.html
@@ -161,6 +161,95 @@ section a[href^="/book/"] {
     border-color: var(--link-color);
     background: var(--code-bg);
 }
+
+/* Mobile responsive styles */
+@media (max-width: 760px) {
+    .title-page {
+        margin: 2rem 0;
+    }
+
+    .title-page h1 {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .title-details {
+        font-size: 1rem;
+        margin: 0 0 2rem 0;
+    }
+
+    .verse-lookup {
+        max-width: 100%;
+        padding: 1.5rem;
+        margin: 1.5rem 0;
+    }
+
+    .verse-lookup h2 {
+        font-size: 1.2rem;
+    }
+
+    .lookup-form {
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .lookup-input {
+        width: 100%;
+        font-size: 1rem;
+        padding: 0.75rem;
+    }
+
+    .lookup-btn {
+        width: 100%;
+        padding: 0.75rem;
+        font-size: 1rem;
+    }
+
+    .lookup-help {
+        font-size: 0.85rem;
+        line-height: 1.5;
+    }
+
+    .featured-resources {
+        max-width: 100%;
+        grid-template-columns: 1fr;
+        gap: 1rem;
+        margin: 2rem 0;
+    }
+
+    .featured-card {
+        padding: 1.25rem;
+    }
+
+    .featured-card h3 {
+        font-size: 1.1rem;
+    }
+
+    .featured-card p {
+        font-size: 0.95rem;
+    }
+
+    .quick-links {
+        max-width: 100%;
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+        margin: 1.5rem 0;
+    }
+
+    .quick-link-btn {
+        padding: 0.875rem;
+        font-size: 0.95rem;
+    }
+
+    /* Adjust epigraph on mobile */
+    .epigraph {
+        margin: 2rem 0;
+    }
+
+    .epigraph blockquote {
+        font-size: 1rem;
+    }
+}
 </style>
 {% endblock %}