kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add table of contents to commentary and cross-references indexes

Browse Source 
Added a TOC at the top of both index pages with:
- Grid layout showing all books with commentary/cross-references
- Anchor links to jump directly to each book section
- Hover effects for better UX
- Responsive design that adapts to screen width

Makes it much easier to navigate to a specific book without scrolling.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2025-12-01 18:02:02 -05:00
parent edbe4a2624
commit 560f3b9e2a
2 changed files with 98 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/templates/commentary_index.html
+49 -1
View File
@@ -18,8 +18,17 @@
<p>Click any verse reference to read its commentary.</p>
</section>
<nav class="toc">
<h2>Table of Contents</h2>
<div class="toc-columns">
{% for book, chapters in commentary_index.items() %}
<a href="#{{ book|replace(' ', '-')|lower }}" class="toc-link">{{ book }}</a>
{% endfor %}
</div>
</nav>
{% for book, chapters in commentary_index.items() %}
<section class="book-section">
<section class="book-section" id="{{ book|replace(' ', '-')|lower }}">
<h2>{{ book }}</h2>
{% for chapter, verses in chapters.items() %}
<div class="chapter-group">
@@ -63,6 +72,45 @@
font-style: italic;
}
.toc {
margin: 2rem 0;
padding: 1.5rem;
background: var(--bg-color);
border: 2px solid var(--border-color);
border-radius: 4px;
}
.toc h2 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.3rem;
color: var(--text-strong);
}
.toc-columns {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.5rem;
}
.toc-link {
display: block;
padding: 0.4rem 0.6rem;
background: var(--code-bg);
border-radius: 3px;
text-decoration: none;
color: var(--link-color);
font-size: 0.95rem;
transition: all 0.2s;
text-align: center;
}
.toc-link:hover {
background: var(--border-color-dark);
color: var(--link-hover);
transform: translateY(-1px);
}
.book-section {
margin: 2.5rem 0;
padding: 1.5rem;
kjvstudy_org/templates/cross_references_index.html
+49 -1
View File
@@ -19,8 +19,17 @@
<p>Data sourced from the <strong>Treasury of Scripture Knowledge</strong> via <a href="https://www.openbible.info/labs/cross-references/" target="_blank" rel="noopener">OpenBible.info</a> (CC-BY license).</p>
</section>
<nav class="toc">
<h2>Table of Contents</h2>
<div class="toc-columns">
{% for book, chapters in crossref_index.items() %}
<a href="#{{ book|replace(' ', '-')|lower }}" class="toc-link">{{ book }}</a>
{% endfor %}
</div>
</nav>
{% for book, chapters in crossref_index.items() %}
<section class="book-section">
<section class="book-section" id="{{ book|replace(' ', '-')|lower }}">
<h2>{{ book }}</h2>
{% for chapter, verses in chapters.items() %}
<div class="chapter-group">
@@ -74,6 +83,45 @@
font-style: italic;
}
.toc {
margin: 2rem 0;
padding: 1.5rem;
background: var(--bg-color);
border: 2px solid var(--border-color);
border-radius: 4px;
}
.toc h2 {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.3rem;
color: var(--text-strong);
}
.toc-columns {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.5rem;
}
.toc-link {
display: block;
padding: 0.4rem 0.6rem;
background: var(--code-bg);
border-radius: 3px;
text-decoration: none;
color: var(--link-color);
font-size: 0.95rem;
transition: all 0.2s;
text-align: center;
}
.toc-link:hover {
background: var(--border-color-dark);
color: var(--link-hover);
transform: translateY(-1px);
}
.book-section {
margin: 2.5rem 0;
padding: 1.5rem;