From 51f72828e213eb36383f976e77fe68e2d2b4e30e Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Mon, 24 Nov 2025 12:18:35 -0500
Subject: [PATCH] Convert Quick Access to card grid and move above welcome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Transform Quick Access from inline links to a card-based grid
layout for better visual hierarchy and easier navigation. Move
the section above the welcome text so visitors see navigation
options immediately after the search box.

Card styling includes:
- Responsive grid layout (auto-fit with min 200px cards)
- Bordered cards with hover effects
- Mobile-optimized with larger touch targets

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

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

diff --git a/kjvstudy_org/templates/index.html b/kjvstudy_org/templates/index.html
index 3ca6d14..f6d84e2 100644
--- a/kjvstudy_org/templates/index.html
+++ b/kjvstudy_org/templates/index.html
@@ -83,16 +83,31 @@ section a[href^="/book/"] {
     font-style: italic;
 }
 
-/* Quick Links - Classical List */
+/* Quick Links - Card Grid */
 .quick-links {
-    max-width: 55%;
-    margin: 1rem 0;
-    line-height: 2;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    max-width: 90%;
+    margin: 2rem 0;
 }
 
 .quick-link-btn {
-    display: inline;
-    margin-right: 1.5rem;
+    display: block;
+    padding: 1.25rem;
+    text-align: center;
+    text-decoration: none;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    transition: all 0.2s;
+    font-weight: 500;
+}
+
+.quick-link-btn:hover {
+    border-color: var(--border-color-darker);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    background: var(--code-bg);
 }
 
 /* Mobile responsive styles */
@@ -191,19 +206,16 @@ section a[href^="/book/"] {
 
     .quick-links {
         max-width: 100%;
-        margin: 1rem 0;
-        line-height: 1.8;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 0.75rem;
+        margin: 1.5rem 0;
     }
 
     .quick-link-btn {
-        display: inline-block;
-        margin: 0.5rem 0.75rem 0.5rem 0;
-        padding: 0.6rem 1.2rem;
+        padding: 0.875rem;
         border: 3px solid #999;
-        border-radius: 4px;
         font-weight: 600;
         min-height: 44px;
-        line-height: 1.6;
         color: #000;
     }
 
@@ -287,6 +299,20 @@ section a[href^="/book/"] {
 
 <p style="text-align: center; margin: 1rem 0; font-size: 1.1rem;"><strong><a href="/books">Browse All 66 Books →</a></strong></p>
 
+<section>
+    <h2>Quick Access</h2>
+    <div class="quick-links">
+        <a href="/random-verse" class="quick-link-btn">Random Verse</a>
+        <a href="/study-guides" class="quick-link-btn">Study Guides</a>
+        <a href="/books" class="quick-link-btn">All Books</a>
+        <a href="/reading-plans" class="quick-link-btn">Reading Plans</a>
+        <a href="/topics" class="quick-link-btn">Topical Index</a>
+        <a href="/resources" class="quick-link-btn">All Resources</a>
+        <a href="/family-tree" class="quick-link-btn">Genealogies</a>
+        <a href="/biblical-timeline" class="quick-link-btn">Timeline</a>
+    </div>
+</section>
+
 <script>
 // Helper function to properly capitalize book names and handle abbreviations
 function capitalizeBook(bookName) {
@@ -424,20 +450,6 @@ document.addEventListener('keydown', function(e) {
     <p>Here you will find not merely the sacred text, but helps for its profitable study:<label for="sn-purpose" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-purpose" class="margin-toggle"/><span class="sidenote">This digital edition presents the 1769 Oxford Standard text, enriched with apparatus drawn from judicious commentators and modern scholarship. Scripture is profitable 'for doctrine, for reproof, for correction, for instruction in righteousness' (2 Timothy 3:16)—yet such profit requires more than cursory reading. Hence the provision of study helps.</span> Hebrew and Greek word analysis, comprehensive cross-references whereby Scripture interprets Scripture, topical indices, reading plans, and theological studies. Our purpose follows that of the original 1611 translators: "that the Scripture may speake like it selfe"—that it may be understood with the depth of comprehension befitting the oracles of the living God.</p>
 </section>
 
-<section>
-    <h2>Quick Access</h2>
-    <div class="quick-links">
-        <a href="/random-verse" class="quick-link-btn">Random Verse</a>
-        <a href="/study-guides" class="quick-link-btn">Study Guides</a>
-        <a href="/books" class="quick-link-btn">All Books</a>
-        <a href="/reading-plans" class="quick-link-btn">Reading Plans</a>
-        <a href="/topics" class="quick-link-btn">Topical Index</a>
-        <a href="/resources" class="quick-link-btn">All Resources</a>
-        <a href="/family-tree" class="quick-link-btn">Genealogies</a>
-        <a href="/biblical-timeline" class="quick-link-btn">Timeline</a>
-    </div>
-</section>
-
 <section>
     <h2>The Sacred Scriptures</h2>