mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
6b0d55f087
Improves tooltip display across mobile, tablet, and desktop breakpoints with appropriate sizing, positioning, and typography adjustments for each screen size.
274 lines
9.1 KiB
HTML
274 lines
9.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ book }} - Authorized King James Version (KJV) Bible{% endblock %}
|
|
{% block description %}Read {{ book }} from the Authorized King James Version (KJV) Bible. Browse all chapters of {{ book }} with enhanced readability and navigation tools.{% endblock %}
|
|
{% block keywords %}{{ book }}, {{ book }} KJV, {{ book }} King James Version, Authorized King James Version, KJV Bible, {{ book }} chapters{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
.commentary-section h2 {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.7rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
margin-top: 0;
|
|
margin-bottom: 1.25rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid var(--border-light);
|
|
}
|
|
|
|
.commentary-section h3 {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: white;
|
|
margin: 1.75rem 0 0.875rem 0;
|
|
}
|
|
|
|
.commentary-section p {
|
|
font-family: 'EB Garamond', Georgia, serif;
|
|
font-size: 1.175rem;
|
|
line-height: 1.7;
|
|
margin-bottom: 1.25rem;
|
|
color: white;
|
|
font-feature-settings:
|
|
"liga" 1,
|
|
"dlig" 1,
|
|
"kern" 1,
|
|
"onum" 1;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.commentary-section li {
|
|
font-family: 'EB Garamond', Georgia, serif;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
color: white;
|
|
}
|
|
|
|
.commentary-section strong {
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.commentary-section em {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-style: italic;
|
|
}
|
|
|
|
.key-passage-link {
|
|
text-decoration: none;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.key-passage-card {
|
|
background: rgba(255, 235, 59, 0.1);
|
|
border-radius: var(--radius-md);
|
|
padding: 1.25rem;
|
|
border-left: 4px solid var(--accent-color);
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.key-passage-link:hover .key-passage-card {
|
|
background: rgba(255, 235, 59, 0.2);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.verse-tooltip {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.95);
|
|
color: white;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
max-width: 450px;
|
|
min-width: 350px;
|
|
white-space: normal;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
pointer-events: none;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
font-family: 'EB Garamond', Georgia, serif;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Responsive tooltip styles */
|
|
@media (max-width: 768px) {
|
|
.verse-tooltip {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
transform: none;
|
|
max-width: none;
|
|
min-width: auto;
|
|
padding: 1rem;
|
|
font-size: 1rem;
|
|
z-index: 1001;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.verse-tooltip {
|
|
max-width: 380px;
|
|
min-width: 280px;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.verse-tooltip {
|
|
max-width: 500px;
|
|
min-width: 400px;
|
|
font-size: 0.95rem;
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
}
|
|
|
|
.verse-tooltip::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: 6px solid transparent;
|
|
border-top-color: rgba(0, 0, 0, 0.95);
|
|
}
|
|
|
|
.verse-reference:hover .verse-tooltip {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block schema_type %}Book{% endblock %}
|
|
{% block structured_data %},
|
|
"name": "{{ book }} - Authorized King James Version",
|
|
"numberOfPages": {{ chapters|length }},
|
|
"bookFormat": "EBook",
|
|
"inLanguage": "en-US",
|
|
"genre": "Religious Text",
|
|
"isPartOf": {
|
|
"@type": "Book",
|
|
"@id": "https://schema.org/Bible",
|
|
"name": "Authorized King James Version Bible",
|
|
"alternateName": ["KJV Bible", "King James Bible"]
|
|
},
|
|
"hasPart": [
|
|
{% for chapter in chapters %}
|
|
{
|
|
"@type": "Chapter",
|
|
"name": "{{ book }} {{ chapter }}",
|
|
"position": {{ chapter }},
|
|
"url": "{{ request.url_root }}book/{{ book }}/chapter/{{ chapter }}"
|
|
}{% if not loop.last %},{% endif %}
|
|
{% endfor %}
|
|
]{% endblock %}
|
|
|
|
{% block breadcrumb %}
|
|
<div class="container">
|
|
<nav class="breadcrumb">
|
|
<a href="/">📚 All Books</a>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<span>{{ book }}</span>
|
|
</nav>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="text-center mb-4">
|
|
<h1 class="section-title" style="font-size: 1.8rem;">{{ book }} - Authorized King James Version (KJV)</h1>
|
|
<p style="font-size: 0.95rem; color: var(--text-secondary);">
|
|
Select a chapter to begin reading {{ book }} from the KJV Bible
|
|
</p>
|
|
<a href="/book/{{ book }}/commentary" class="nav-button nav-button-primary" style="display: inline-block; margin-top: 0.75rem; font-size: 0.95rem; padding: 0.5rem 1rem;">
|
|
View Complete {{ book }} Commentary
|
|
</a>
|
|
</div>
|
|
|
|
<div class="chapter-grid">
|
|
{% for chapter in chapters %}
|
|
<a href="/book/{{ book }}/chapter/{{ chapter }}" class="chapter-link">
|
|
{{ chapter }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="commentary-container" style="margin-top: 3rem;">
|
|
<div class="commentary-section" style="background: var(--surface-color); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); color: white;">
|
|
<h2 style="color: white; margin-top: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-light); font-family: 'Playfair Display', serif; font-size: 1.7rem; margin-bottom: 1.25rem; font-weight: 700;">
|
|
📚 Commentary on {{ book }}
|
|
</h2>
|
|
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<h3>Introduction</h3>
|
|
{{ introduction|safe }}
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<h3>Historical Context</h3>
|
|
{{ historical_context|safe }}
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<h3>Major Themes</h3>
|
|
{{ themes|safe }}
|
|
</div>
|
|
|
|
<div style="margin-bottom: 2rem;">
|
|
<h3>Key Passages</h3>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.25rem;">
|
|
{% for highlight in highlights %}
|
|
<a href="{{ highlight.url }}" class="key-passage-link verse-reference" style="position: relative;">
|
|
<div class="key-passage-card">
|
|
<h4 style="font-weight: 600; margin: 0 0 0.4rem; color: #ff6b6b; font-size: 1.1rem;">{{ highlight.reference }}</h4>
|
|
<p style="margin: 0; color: white; line-height: 1.4; font-size: 1rem;">{{ highlight.description }}</p>
|
|
<span style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin-top: 0.5rem; display: block;">Click to read passage →</span>
|
|
</div>
|
|
<span class="verse-tooltip">{{ highlight.text|default(highlight.description) }}</span>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-light);">
|
|
<a href="/book/{{ book }}/commentary" class="nav-button nav-button-primary" style="display: inline-block; font-size: 1rem; padding: 0.65rem 1.25rem;">
|
|
Read Complete {{ book }} Commentary
|
|
</a>
|
|
<p style="color: rgba(255, 255, 255, 0.8); margin-top: 0.8rem; font-style: italic; font-size: 0.85rem;">
|
|
"Study to shew thyself approved unto God, a workman that needeth not to be ashamed, rightly dividing the word of truth."
|
|
<br>
|
|
<strong style="color: #ff6b6b;">2 Timothy 2:15</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block navigation %}
|
|
<div class="container">
|
|
<div class="navigation">
|
|
<a href="/" class="nav-button" style="font-size: 0.95rem;">
|
|
← All Books
|
|
</a>
|
|
<div style="color: var(--text-muted); font-size: 0.8rem;">
|
|
{{ chapters|length }} chapters in {{ book }} (KJV)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |