kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add verse number hover/active states and navigation highlighting

Browse Source 
Enhance verse numbers with smooth transitions, hover backgrounds, and
active scaling effects. Update navigation to remove previous underlines,
add underline styling to clicked verses, and smooth scroll to center.
This commit is contained in:
Kenneth Reitz
2025-05-26 21:23:19 -04:00
parent f5a15d293c
commit ba8ee8fcd0
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/templates/chapter.html
+23
View File
@@ -74,10 +74,19 @@ sup.verse-number {
left: auto !important;
right: auto !important;
bottom: auto !important;
transition: all 0.2s ease !important;
padding: 0.1rem 0.2rem !important;
border-radius: 3px !important;
}
sup.verse-number:hover {
color: var(--accent-color) !important;
background-color: rgba(139, 92, 246, 0.15) !important;
}
sup.verse-number:active {
background-color: rgba(139, 92, 246, 0.25) !important;
transform: scale(1.1) !important;
}
.ai-commentary-link {
@@ -541,7 +550,21 @@ function highlightVerse(verseNumber) {
}
function navigateToVerse(verseNumber) {
// Remove previous underlines
document.querySelectorAll('.verse-underlined').forEach(el => {
el.classList.remove('verse-underlined');
});
// Set the hash and apply styling
location.hash = 'verse-' + verseNumber;
// Apply underline styling to the clicked verse
const targetVerse = document.getElementById('verse-' + verseNumber);
if (targetVerse) {
targetVerse.classList.add('verse-underlined');
targetVerse.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
showToast('Navigated to Verse ' + verseNumber);
}