mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
3336863a4d
- Add KJVNav.initGridNav for standardized 2D grid navigation - Migrate books.html, topics.html, resources.html to use initGridNav - Add sidebarActive check to all templates with custom keyboard handlers - Add [ and ] shortcuts for prev/next chapter on chapter pages - Add [ and ] shortcuts for prev/next book on book pages - Update accessibility page with comprehensive keyboard shortcut docs - Add honest note about keyboard navigation complexity - Fix sidebar nav conflicting with main content selection 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
102 lines
3.2 KiB
HTML
102 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Topical Index - KJV Study{% endblock %}
|
|
{% block description %}Find Bible verses by theme and theological topic{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.topic-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 1.5rem;
|
|
max-width: 90%;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.topic-card {
|
|
display: block;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.topic-card:hover {
|
|
border-color: var(--border-color-darker);
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topic-name {
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.topic-card:hover .topic-name {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
.topic-description {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.topic-subtopics {
|
|
font-size: 0.9rem;
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.intro-text {
|
|
max-width: 60%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1rem 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>Topical Index</h1>
|
|
<p class="subtitle">Find Verses by Theme and Subject</p>
|
|
|
|
<div>
|
|
<p class="intro-text"><span class="newthought">Systematic topical study</span> enables thematic exploration of Scripture across both testaments. This concordance organizes key theological and practical themes, providing structured access to related passages that illuminate each subject from multiple biblical perspectives.</p>
|
|
|
|
<p class="intro-text">Select a topic below to explore its subtopics and discover the verses that address each theme. Each reference includes contextual notes to aid understanding of its relevance to the broader subject.</p>
|
|
</div>
|
|
|
|
<div id="major-topics">
|
|
<h2>Major Topics</h2>
|
|
|
|
<div class="topic-grid">
|
|
{% for topic_name, topic_data in topics.items() %}
|
|
<a href="/topics/{{ topic_name }}" class="topic-card">
|
|
<div class="topic-name">{{ topic_name }}</div>
|
|
<div class="topic-description">{{ topic_data.description }}</div>
|
|
<div class="topic-subtopics">{{ topic_data.subtopics|length }} subtopics</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="using-the-topical-index">
|
|
<h2>Using the Topical Index</h2>
|
|
<p class="intro-text">Each major topic contains multiple subtopics with carefully selected verses. The references provided represent foundational passages for each theme, though they are not exhaustive. Consider these as entry points for deeper study, using cross-references and concordances to expand your exploration.</p>
|
|
|
|
<p class="intro-text">Topical study complements sequential Bible reading by allowing focused examination of specific doctrines or practical matters. Compare passages across different books and testaments to grasp the full biblical teaching on any subject.</p>
|
|
</div>
|
|
|
|
<script>
|
|
// Use standardized grid navigation from base.js
|
|
KJVNav.initGridNav('.topic-card', { gridSelector: '.topic-grid' });
|
|
</script>
|
|
{% endblock %}
|