From f5a15d293c68e5770afaf479dc6e300ab4747ef5 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Mon, 26 May 2025 21:23:08 -0400
Subject: [PATCH] Add permanent underline styling for highlighted verses

Introduces verse-underlined CSS class with purple underline and left
border styling. Updates navigation to apply permanent underlines on
verse selection and adds hashchange listener to maintain highlighting
state when URLs change.
---
 kjvstudy_org/templates/chapter.html | 54 +++++++++++++++++++++++------
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/kjvstudy_org/templates/chapter.html b/kjvstudy_org/templates/chapter.html
index a0f9b98..3cd888b 100644
--- a/kjvstudy_org/templates/chapter.html
+++ b/kjvstudy_org/templates/chapter.html
@@ -93,13 +93,27 @@ sup.verse-number:hover {
 }
 
 .highlight-verse,
-.verse-highlight {
+.verse-highlight,
+.highlight-verse {
     background-color: rgba(255, 235, 59, 0.3) !important;
     padding: 0.1rem 0.2rem !important;
     border-radius: 3px !important;
     animation: pulse-highlight 2s ease;
 }
 
+.verse-underlined {
+    text-decoration: underline !important;
+    text-decoration-color: var(--primary-light) !important;
+    text-decoration-thickness: 2px !important;
+    text-underline-offset: 3px !important;
+    background-color: rgba(139, 92, 246, 0.1) !important;
+    padding: 0.2rem 0.3rem !important;
+    border-radius: 4px !important;
+    border-left: 3px solid var(--primary-light) !important;
+    margin-left: -0.3rem !important;
+    padding-left: 0.6rem !important;
+}
+
 @keyframes pulse-highlight {
     0% { background-color: transparent; }
     30% { background-color: rgba(255, 235, 59, 0.5); }
@@ -596,6 +610,15 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (verseMatch && verseMatch[1]) {
                     showToast('Navigated to Verse ' + verseMatch[1]);
 
+                    // Apply permanent underline styling to the verse
+                    target.classList.add('verse-underlined');
+                    
+                    // Also add temporary pulse highlight
+                    target.classList.add('highlight-verse');
+                    setTimeout(() => {
+                        target.classList.remove('highlight-verse');
+                    }, 2000);
+
                     // If the verse has commentary, highlight the commentary card too
                     const commentaryCard = document.getElementById(`commentary-verse-${verseMatch[1]}`);
                     if (commentaryCard) {
@@ -607,19 +630,28 @@ document.addEventListener('DOMContentLoaded', function() {
                         }, 3000);
                     }
                 }
-
-                // Apply highlighting
-                target.style.backgroundColor = 'rgba(255, 235, 59, 0.3)';
-                target.style.padding = '0.1rem 0.2rem';
-                target.style.borderRadius = '3px';
-                setTimeout(() => {
-                    target.style.backgroundColor = '';
-                    target.style.padding = '';
-                    target.style.borderRadius = '';
-                }, 2000);
             }
         }, 100);
     }
+    
+    // Listen for hash changes to update verse highlighting
+    window.addEventListener('hashchange', function() {
+        // Remove previous underlines
+        document.querySelectorAll('.verse-underlined').forEach(el => {
+            el.classList.remove('verse-underlined');
+        });
+        
+        // Apply new underline if hash matches verse pattern
+        if (window.location.hash) {
+            const target = document.querySelector(window.location.hash);
+            const verseMatch = window.location.hash.match(/verse-(\d+)/);
+            if (target && verseMatch) {
+                target.classList.add('verse-underlined');
+                target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                showToast('Navigated to Verse ' + verseMatch[1]);
+            }
+        }
+    });
 
     // Add cross-links from verses to commentary
     document.querySelectorAll('.verse').forEach(verse => {