diff --git a/kjvstudy_org/templates/verse.html b/kjvstudy_org/templates/verse.html index 66a62ac..b44a01b 100644 --- a/kjvstudy_org/templates/verse.html +++ b/kjvstudy_org/templates/verse.html @@ -125,6 +125,44 @@ border-bottom: 1px solid var(--border-color); } +/* Generic collapsible section toggle */ +.section-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; + padding: 0.5rem 0; + background: none; + border: none; + cursor: pointer; + text-align: left; + font-family: inherit; + transition: opacity 0.2s; +} + +.section-toggle:hover { + opacity: 0.7; +} + +.section-toggle:focus { + outline: 2px solid var(--link-color); + outline-offset: 2px; +} + +.section-toggle .toggle-icon { + font-size: 0.8rem; + color: var(--text-secondary); + transition: transform 0.2s; +} + +.section-heading { + font-size: 0.9rem; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: 600; +} + .share-label { font-size: 0.9rem; color: var(--text-secondary); @@ -134,6 +172,13 @@ font-weight: 600; } +.cross-references-section .section-heading { + font-size: 1.4rem; + text-transform: none; + letter-spacing: normal; + color: var(--text-color); +} + .share-buttons { display: flex; gap: 0.75rem; @@ -217,13 +262,52 @@ margin: 2rem 0; } +/* Collapsible toggle button */ +.interlinear-toggle { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; + padding: 0.75rem 0; + background: none; + border: none; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + text-align: left; + font-family: inherit; + transition: background 0.2s; +} + +.interlinear-toggle:hover { + background: var(--code-bg); +} + +.interlinear-toggle:focus { + outline: 2px solid var(--link-color); + outline-offset: 2px; +} + +.toggle-icon { + font-size: 0.8rem; + color: var(--text-secondary); + transition: transform 0.2s; +} + +.interlinear-toggle.expanded .toggle-icon { + transform: rotate(0deg); +} + +.toggle-hint { + font-size: 0.85rem; + color: var(--text-tertiary); + font-weight: normal; +} + .interlinear-heading { font-size: 1.1rem; font-weight: 600; - margin: 0 0 0.5rem 0; - padding-bottom: 0.75rem; - border-bottom: 1px solid #eee; - color: #333; + margin: 0; + color: var(--text-color); } .interlinear-flow { @@ -646,8 +730,12 @@ {% if interlinear_words %}
-

Original Language Analysis

-
+ +
{% for word in interlinear_words %}
{{ word.original }} @@ -699,6 +787,39 @@
{% if cross_references %}
-

Cross References

-

Related verses that illuminate this passage:

- +
+ {% endif %} {% if commentary %} @@ -1008,11 +1179,19 @@ } } else if (e.key === 'Enter') { e.preventDefault(); - // If on interlinear, enter word mode + // If on interlinear, toggle expand or enter word mode if (isInterlinearSelected()) { - inWordMode = true; - elements[selectedIndex].style.outline = ''; - selectWord(0); + var toggle = document.querySelector('.interlinear-toggle'); + var content = document.getElementById('interlinear-content'); + if (content && content.hidden) { + // First expand the section + toggleInterlinear(); + } else { + // Already expanded, enter word mode + inWordMode = true; + elements[selectedIndex].style.outline = ''; + selectWord(0); + } } else if (selectedIndex >= 0) { // If on a cross-reference, navigate to it var link = elements[selectedIndex].querySelector('a');