mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
Improve interlinear readability for native Hebrew/Greek readers
- Increase font sizes for Hebrew (2.2rem) and Greek (2rem) text - Add proper RTL direction and font families for Hebrew - Tighten word spacing for more natural reading flow - Remove hover tooltips, keep click-to-expand details - Increase English verse text size in chapter interlinear view - Add is_old_testament to verse template context 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2423,6 +2423,9 @@ def read_verse(request: Request, book: str, chapter: int, verse_num: int):
|
||||
{"text": f"Verse {verse_num}", "url": None}
|
||||
]
|
||||
|
||||
# Determine if Old Testament for interlinear styling
|
||||
is_ot = book in OT_BOOKS
|
||||
|
||||
return templates.TemplateResponse(
|
||||
request,
|
||||
"verse.html",
|
||||
@@ -2442,6 +2445,7 @@ def read_verse(request: Request, book: str, chapter: int, verse_num: int):
|
||||
"current_verse": verse_num,
|
||||
"has_interlinear": has_interlinear,
|
||||
"interlinear_words": interlinear_words,
|
||||
"related_content": related_content
|
||||
"related_content": related_content,
|
||||
"is_old_testament": is_ot
|
||||
}
|
||||
)
|
||||
|
||||
@@ -115,8 +115,8 @@
|
||||
}
|
||||
|
||||
.verse-text {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2;
|
||||
color: #333;
|
||||
font-style: italic;
|
||||
flex: 1;
|
||||
@@ -134,7 +134,7 @@
|
||||
|
||||
/* Interlinear flow */
|
||||
.interlinear-flow {
|
||||
line-height: 4.2;
|
||||
line-height: 2.8;
|
||||
font-size: 1rem;
|
||||
margin: 1rem 0 0 0;
|
||||
padding: 0.5rem 0;
|
||||
@@ -143,14 +143,14 @@
|
||||
.word-unit {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 0.25rem 1rem 0.25rem;
|
||||
margin: 0 0.05rem 0.5rem 0.05rem;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.25rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 55px;
|
||||
min-width: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@@ -171,12 +171,28 @@
|
||||
|
||||
.word-original {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
color: #222;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.35rem;
|
||||
line-height: 1.4;
|
||||
transition: color 0.2s;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Hebrew text (RTL) */
|
||||
.word-original.hebrew {
|
||||
direction: rtl;
|
||||
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", "Noto Serif Hebrew", serif;
|
||||
font-size: 2.2rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Greek text */
|
||||
.word-original.greek {
|
||||
font-family: "SBL Greek", "Gentium Plus", "Times New Roman", "Noto Serif", serif;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.word-unit:hover .word-original {
|
||||
@@ -214,7 +230,7 @@
|
||||
color: #4a7c59;
|
||||
}
|
||||
|
||||
/* Hover tooltip */
|
||||
/* Hover tooltip - full definition */
|
||||
.word-tooltip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
@@ -222,17 +238,18 @@
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
background: #333;
|
||||
color: #fff;
|
||||
padding: 0.5rem 0.85rem;
|
||||
padding: 0.65rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.95rem;
|
||||
white-space: normal;
|
||||
max-width: 380px;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
z-index: 50;
|
||||
z-index: 999999999;
|
||||
}
|
||||
|
||||
.word-tooltip::after {
|
||||
@@ -291,9 +308,21 @@
|
||||
}
|
||||
|
||||
.word-detail-original {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 400;
|
||||
color: #222;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.word-detail-original.hebrew {
|
||||
direction: rtl;
|
||||
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", "Noto Serif Hebrew", serif;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.word-detail-original.greek {
|
||||
font-family: "SBL Greek", "Gentium Plus", "Times New Roman", "Noto Serif", serif;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.word-detail-english {
|
||||
@@ -460,7 +489,15 @@
|
||||
}
|
||||
|
||||
.word-original {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.word-original.hebrew {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.word-original.greek {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.word-tooltip {
|
||||
@@ -507,14 +544,7 @@
|
||||
|
||||
<div class="page-header">
|
||||
<h1>{{ book }} {{ chapter }}</h1>
|
||||
<p class="subtitle">
|
||||
Interlinear Bible
|
||||
{% if is_old_testament %}
|
||||
<span class="testament-badge hebrew">Hebrew</span>
|
||||
{% else %}
|
||||
<span class="testament-badge greek">Greek</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="subtitle">Interlinear Bible</p>
|
||||
</div>
|
||||
|
||||
<nav class="chapter-nav">
|
||||
@@ -542,7 +572,7 @@
|
||||
<div class="interlinear-flow">
|
||||
{% for word in item.interlinear_words %}
|
||||
<div class="word-unit" onclick="toggleWord(this)">
|
||||
<span class="word-original">{{ word.original }}</span>
|
||||
<span class="word-original {% if is_old_testament %}hebrew{% else %}greek{% endif %}">{{ word.original }}</span>
|
||||
<span class="word-english">{{ word.english }}</span>
|
||||
<span class="word-strongs">
|
||||
{% if word.strongs %}
|
||||
@@ -557,12 +587,9 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if word.definition %}
|
||||
<span class="word-tooltip">{{ word.definition[:50] }}{% if word.definition|length > 50 %}...{% endif %}</span>
|
||||
{% endif %}
|
||||
<div class="word-detail">
|
||||
<div class="word-detail-header">
|
||||
<span class="word-detail-original">{{ word.original }}</span>
|
||||
<span class="word-detail-original {% if is_old_testament %}hebrew{% else %}greek{% endif %}">{{ word.original }}</span>
|
||||
<span class="word-detail-english">{{ word.english }}</span>
|
||||
</div>
|
||||
{% if word.transliteration %}
|
||||
|
||||
@@ -225,23 +225,23 @@
|
||||
}
|
||||
|
||||
.interlinear-flow {
|
||||
line-height: 4.2;
|
||||
line-height: 2.8;
|
||||
font-size: 1rem;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem 0;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.word-unit {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 0.25rem 1rem 0.25rem;
|
||||
margin: 0 0.05rem 0.5rem 0.05rem;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.25rem 0.3rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 55px;
|
||||
min-width: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@@ -262,12 +262,28 @@
|
||||
|
||||
.word-original {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
color: #222;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.35rem;
|
||||
line-height: 1.4;
|
||||
transition: color 0.2s;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Hebrew text (RTL) */
|
||||
.word-original.hebrew {
|
||||
direction: rtl;
|
||||
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", "Noto Serif Hebrew", serif;
|
||||
font-size: 2.2rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Greek text */
|
||||
.word-original.greek {
|
||||
font-family: "SBL Greek", "Gentium Plus", "Times New Roman", "Noto Serif", serif;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.word-unit:hover .word-original {
|
||||
@@ -305,7 +321,7 @@
|
||||
color: #4a7c59;
|
||||
}
|
||||
|
||||
/* Hover tooltip - brief definition preview */
|
||||
/* Hover tooltip - full definition preview */
|
||||
.word-tooltip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
@@ -313,17 +329,18 @@
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
background: #333;
|
||||
color: #fff;
|
||||
padding: 0.5rem 0.85rem;
|
||||
padding: 0.65rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.95rem;
|
||||
white-space: normal;
|
||||
max-width: 380px;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
z-index: 50;
|
||||
z-index: 999999999;
|
||||
}
|
||||
|
||||
.word-tooltip::after {
|
||||
@@ -382,9 +399,21 @@
|
||||
}
|
||||
|
||||
.word-detail-original {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 400;
|
||||
color: #222;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.word-detail-original.hebrew {
|
||||
direction: rtl;
|
||||
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", "Noto Serif Hebrew", serif;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.word-detail-original.greek {
|
||||
font-family: "SBL Greek", "Gentium Plus", "Times New Roman", "Noto Serif", serif;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.word-detail-english {
|
||||
@@ -539,7 +568,15 @@
|
||||
}
|
||||
|
||||
.word-original {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.word-original.hebrew {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.word-original.greek {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.word-tooltip {
|
||||
@@ -579,7 +616,7 @@
|
||||
<div class="interlinear-flow">
|
||||
{% for word in interlinear_words %}
|
||||
<div class="word-unit" onclick="toggleWord(this)">
|
||||
<span class="word-original">{{ word.original }}</span>
|
||||
<span class="word-original {% if is_old_testament %}hebrew{% else %}greek{% endif %}">{{ word.original }}</span>
|
||||
<span class="word-english">{{ word.english }}</span>
|
||||
<span class="word-strongs">
|
||||
{% if word.strongs %}
|
||||
@@ -594,12 +631,9 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if word.definition %}
|
||||
<span class="word-tooltip">{{ word.definition[:50] }}{% if word.definition|length > 50 %}...{% endif %}</span>
|
||||
{% endif %}
|
||||
<div class="word-detail">
|
||||
<div class="word-detail-header">
|
||||
<span class="word-detail-original">{{ word.original }}</span>
|
||||
<span class="word-detail-original {% if is_old_testament %}hebrew{% else %}greek{% endif %}">{{ word.original }}</span>
|
||||
<span class="word-detail-english">{{ word.english }}</span>
|
||||
</div>
|
||||
{% if word.transliteration %}
|
||||
|
||||
Reference in New Issue
Block a user