Add quick reference navigation to timeline and update homepage

- Remove "View all resources →" link from homepage for cleaner design
- Update Quick Access link from "Timeline" to "Timeline / Chronology"
- Add inline quick reference navigation to biblical timeline page
  - Shows all periods with nested event links
  - Compact hierarchical structure with bullet separators
  - Styled in gray box matching site aesthetic
  - All anchor links functional for quick jumping
- Add generated data files to .gitignore (too large for git)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-22 14:42:27 -05:00
parent 6197402061
commit 613e762020
3 changed files with 65 additions and 4 deletions
+4
View File
@@ -10,3 +10,7 @@ wheels/
# Virtual environments
.venv
.vscode/settings.json
# Generated data files (too large for git)
kjvstudy_org/interlinear_data.py
kjvstudy_org/verse_collections.py
+60 -2
View File
@@ -3,10 +3,68 @@
{% block title %}Biblical Timeline - Major Bible Events - KJV Study{% endblock %}
{% block description %}Explore the chronological timeline of major biblical events from Creation to the early Church.{% endblock %}
{% block head %}
<style>
.timeline-nav {
max-width: 75%;
margin: 1.5rem 0;
padding: 1rem 1.5rem;
background: #f9f9f9;
border-left: 3px solid #666;
font-size: 0.9rem;
line-height: 1.8;
}
.timeline-nav strong {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85rem;
color: #666;
}
.timeline-nav a {
color: var(--text-color);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s;
}
.timeline-nav a:hover {
color: var(--link-color);
border-bottom-color: var(--link-color);
}
.timeline-nav-period {
margin: 0.5rem 0;
}
.timeline-nav-period-name {
font-weight: 600;
}
.timeline-nav-events {
margin-left: 1rem;
color: #666;
font-size: 0.85rem;
}
</style>
{% endblock %}
{% block content %}
<h1>Biblical Timeline</h1>
<p class="subtitle">Major events from Creation to the early Church</p>
<div class="timeline-nav">
<strong>Quick Reference:</strong>
{% for period_name, events in timeline_events.items() %}
<div class="timeline-nav-period">
<span class="timeline-nav-period-name"><a href="#{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">{{ period_name }}</a></span>
<span class="timeline-nav-events">{% for event in events %}<a href="#{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }}</a>{% if not loop.last %} • {% endif %}{% endfor %}</span>
</div>
{% endfor %}
</div>
<section>
<p>This timeline presents key events of biblical history with calculated dates and relevant scripture references.</p>
@@ -48,11 +106,11 @@
</section>
{% for period_name, events in timeline_events.items() %}
<section>
<section id="{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">
<h2>{{ period_name }}</h2>
{% for event in events %}
<h3>{{ event.title }} <span style="color: #666; font-size: 0.9rem; font-weight: normal;">({{ event.date }}{% if event.alt_dates %} • {{ event.alt_dates }}{% endif %})</span></h3>
<h3 id="{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }} <span style="color: #666; font-size: 0.9rem; font-weight: normal;">({{ event.date }}{% if event.alt_dates %} • {{ event.alt_dates }}{% endif %})</span></h3>
<p>{{ event.description | link_verses | safe }}</p>
{% if event.verses %}
+1 -2
View File
@@ -437,7 +437,6 @@ document.addEventListener('keydown', function(e) {
<p>Explore thirteen divine names and titles revealed in Scripture—Elohim, YHWH, Adonai, El Shaddai, Jehovah-Jireh, and more—each revealing distinct aspects of God's character.</p>
</div>
</div>
<p style="text-align: center; margin-top: 1.5rem;"><a href="/resources">View all resources →</a></p>
</section>
<section>
@@ -446,7 +445,7 @@ document.addEventListener('keydown', function(e) {
<a href="/reading-plans" class="quick-link-btn">Reading Plans</a>
<a href="/topics" class="quick-link-btn">Topical Index</a>
<a href="/family-tree" class="quick-link-btn">Biblical Genealogies</a>
<a href="/biblical-timeline" class="quick-link-btn">Timeline</a>
<a href="/biblical-timeline" class="quick-link-btn">Timeline / Chronology</a>
<a href="/random-verse" class="quick-link-btn">Random Verse</a>
</div>
</section>