diff --git a/kjvstudy_org/static/base.js b/kjvstudy_org/static/base.js index 9a26cca..edd9465 100644 --- a/kjvstudy_org/static/base.js +++ b/kjvstudy_org/static/base.js @@ -1653,12 +1653,34 @@ function showKeyboardHelp() { var isHebrew = data.strongs.startsWith('H'); var langClass = isHebrew ? 'hebrew' : 'greek'; - tooltip.innerHTML = - '
' + data.word + '
' + - '
' + data.transliteration + '
' + - '
' + data.strongs + '
' + + var html = + '
' + + '' + data.word + '' + + '(' + data.transliteration + ')' + + '' + data.strongs + '' + + '
' + '
' + data.definition + '
'; + // Add meta section if we have kjv_usage or derivation + if (data.kjv_usage || data.derivation) { + html += '
'; + if (data.kjv_usage) { + html += '
' + + 'kjv' + + '' + data.kjv_usage + '' + + '
'; + } + if (data.derivation) { + html += '
' + + 'from' + + '' + data.derivation + '' + + '
'; + } + html += '
'; + } + + tooltip.innerHTML = html; + // Position off-screen first to measure tooltip.style.left = '-9999px'; tooltip.style.top = '-9999px'; diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html index b7bd6de..869741f 100644 --- a/kjvstudy_org/templates/base.html +++ b/kjvstudy_org/templates/base.html @@ -301,33 +301,41 @@ } } - /* Strong's tooltip styles */ + /* Strong's tooltip styles - Tufte-inspired */ .strongs-tooltip { position: absolute; background: var(--bg-color); - border: 1px solid var(--border-color-darker); - border-radius: 6px; - padding: 0.75rem 1rem; - min-width: 250px; - max-width: 350px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border: 1px solid var(--border-color); + padding: 1rem 1.25rem; + min-width: 280px; + max-width: 380px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 9999; - font-size: 0.95rem; + font-family: 'Crimson Text', 'Times New Roman', serif; + font-size: 1rem; line-height: 1.5; color: var(--text-color); pointer-events: none; opacity: 0; - transition: opacity 0.2s ease-in-out; + transition: opacity 0.15s ease-in-out; } .strongs-tooltip.show { opacity: 1; } + .strongs-tooltip-header { + display: flex; + align-items: baseline; + gap: 0.5rem; + margin-bottom: 0.5rem; + flex-wrap: wrap; + } + .strongs-tooltip-word { - font-size: 1.4rem; - font-weight: 600; - margin-bottom: 0.25rem; + font-size: 1.6rem; + font-weight: 400; + letter-spacing: 0.02em; } .strongs-tooltip-word.hebrew { @@ -342,32 +350,63 @@ .strongs-tooltip-translit { font-style: italic; color: var(--text-secondary); - margin-bottom: 0.5rem; + font-size: 1rem; } .strongs-tooltip-number { - font-family: monospace; - font-size: 0.8rem; + font-family: 'SF Mono', 'Monaco', monospace; + font-size: 0.75rem; color: var(--text-tertiary); - margin-bottom: 0.5rem; + background: var(--code-bg); + padding: 0.15rem 0.4rem; + border-radius: 3px; + margin-left: auto; } .strongs-tooltip-def { - font-size: 0.9rem; + font-size: 0.95rem; color: var(--text-color); + margin-bottom: 0.75rem; + line-height: 1.6; + } + + .strongs-tooltip-meta { + font-size: 0.85rem; + color: var(--text-secondary); + border-top: 1px solid var(--border-color); + padding-top: 0.6rem; + display: flex; + flex-direction: column; + gap: 0.3rem; + } + + .strongs-tooltip-meta-row { + display: flex; + gap: 0.4rem; + } + + .strongs-tooltip-label { + font-variant: small-caps; + letter-spacing: 0.05em; + color: var(--text-tertiary); + min-width: 3.5rem; + } + + .strongs-tooltip-value { + color: var(--text-secondary); } [data-theme="dark"] .strongs-tooltip { - background: #2a2a2a; - border-color: #444; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + background: #1a1a1a; + border-color: #333; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .strongs-tooltip { - background: #2a2a2a; - border-color: #444; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + background: #1a1a1a; + border-color: #333; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } }