mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
Add color-coded book categories to books page
Categorize all 66 books by type with subtle color-coding: - Law (blue): Genesis-Deuteronomy - Historical (green): Joshua-Esther - Wisdom (purple): Job-Song of Solomon - Major Prophets (orange): Isaiah-Daniel - Minor Prophets (red): Hosea-Malachi - Gospels (gold): Matthew-John - Acts (teal): Acts - Pauline Epistles (indigo): Romans-Philemon - General Epistles (pink): Hebrews-Jude - Apocalyptic (crimson): Revelation Colors use subtle gradients and work well in both light/dark modes. Legend at bottom shows all categories. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+31
-2
@@ -7300,6 +7300,33 @@ def books_page(request: Request):
|
||||
"""Browse all books of the Bible"""
|
||||
books = list(bible.iter_books())
|
||||
|
||||
# Define book categories with types
|
||||
book_types = {
|
||||
# Old Testament
|
||||
'Genesis': 'law', 'Exodus': 'law', 'Leviticus': 'law', 'Numbers': 'law', 'Deuteronomy': 'law',
|
||||
'Joshua': 'historical', 'Judges': 'historical', 'Ruth': 'historical',
|
||||
'1 Samuel': 'historical', '2 Samuel': 'historical', '1 Kings': 'historical', '2 Kings': 'historical',
|
||||
'1 Chronicles': 'historical', '2 Chronicles': 'historical', 'Ezra': 'historical',
|
||||
'Nehemiah': 'historical', 'Esther': 'historical',
|
||||
'Job': 'wisdom', 'Psalms': 'wisdom', 'Proverbs': 'wisdom', 'Ecclesiastes': 'wisdom', 'Song of Solomon': 'wisdom',
|
||||
'Isaiah': 'major-prophets', 'Jeremiah': 'major-prophets', 'Lamentations': 'major-prophets',
|
||||
'Ezekiel': 'major-prophets', 'Daniel': 'major-prophets',
|
||||
'Hosea': 'minor-prophets', 'Joel': 'minor-prophets', 'Amos': 'minor-prophets',
|
||||
'Obadiah': 'minor-prophets', 'Jonah': 'minor-prophets', 'Micah': 'minor-prophets',
|
||||
'Nahum': 'minor-prophets', 'Habakkuk': 'minor-prophets', 'Zephaniah': 'minor-prophets',
|
||||
'Haggai': 'minor-prophets', 'Zechariah': 'minor-prophets', 'Malachi': 'minor-prophets',
|
||||
# New Testament
|
||||
'Matthew': 'gospels', 'Mark': 'gospels', 'Luke': 'gospels', 'John': 'gospels',
|
||||
'Acts': 'acts',
|
||||
'Romans': 'pauline', '1 Corinthians': 'pauline', '2 Corinthians': 'pauline',
|
||||
'Galatians': 'pauline', 'Ephesians': 'pauline', 'Philippians': 'pauline', 'Colossians': 'pauline',
|
||||
'1 Thessalonians': 'pauline', '2 Thessalonians': 'pauline',
|
||||
'1 Timothy': 'pauline', '2 Timothy': 'pauline', 'Titus': 'pauline', 'Philemon': 'pauline',
|
||||
'Hebrews': 'general', 'James': 'general', '1 Peter': 'general', '2 Peter': 'general',
|
||||
'1 John': 'general', '2 John': 'general', '3 John': 'general', 'Jude': 'general',
|
||||
'Revelation': 'apocalyptic'
|
||||
}
|
||||
|
||||
# Organize books by testament
|
||||
old_testament_books = [
|
||||
'Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy', 'Joshua', 'Judges', 'Ruth',
|
||||
@@ -7325,7 +7352,8 @@ def books_page(request: Request):
|
||||
{
|
||||
'name': book,
|
||||
'chapters': get_chapter_count(book),
|
||||
'available': book in books
|
||||
'available': book in books,
|
||||
'type': book_types.get(book, '')
|
||||
}
|
||||
for book in old_testament_books
|
||||
]
|
||||
@@ -7334,7 +7362,8 @@ def books_page(request: Request):
|
||||
{
|
||||
'name': book,
|
||||
'chapters': get_chapter_count(book),
|
||||
'available': book in books
|
||||
'available': book in books,
|
||||
'type': book_types.get(book, '')
|
||||
}
|
||||
for book in new_testament_books
|
||||
]
|
||||
|
||||
@@ -63,6 +63,145 @@
|
||||
line-height: 1.9;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Book type color coding - works in both light and dark modes */
|
||||
.book-card.law {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
|
||||
border-left: 3px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.book-card.historical {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
|
||||
border-left: 3px solid rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.book-card.wisdom {
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.03));
|
||||
border-left: 3px solid rgba(168, 85, 247, 0.4);
|
||||
}
|
||||
|
||||
.book-card.major-prophets {
|
||||
background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.03));
|
||||
border-left: 3px solid rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
.book-card.minor-prophets {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
|
||||
border-left: 3px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.book-card.gospels {
|
||||
background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
|
||||
border-left: 3px solid rgba(234, 179, 8, 0.4);
|
||||
}
|
||||
|
||||
.book-card.acts {
|
||||
background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.03));
|
||||
border-left: 3px solid rgba(20, 184, 166, 0.4);
|
||||
}
|
||||
|
||||
.book-card.pauline {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
|
||||
border-left: 3px solid rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
.book-card.general {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.03));
|
||||
border-left: 3px solid rgba(236, 72, 153, 0.4);
|
||||
}
|
||||
|
||||
.book-card.apocalyptic {
|
||||
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
|
||||
border-left: 3px solid rgba(220, 38, 38, 0.4);
|
||||
}
|
||||
|
||||
/* Legend styles */
|
||||
.legend {
|
||||
margin: 1.5rem 0 2rem 0;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.legend-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.legend-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.legend-color.law {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
|
||||
border-left: 3px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.historical {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
|
||||
border-left: 3px solid rgba(34, 197, 94, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.wisdom {
|
||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.03));
|
||||
border-left: 3px solid rgba(168, 85, 247, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.major-prophets {
|
||||
background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(249, 115, 22, 0.03));
|
||||
border-left: 3px solid rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.minor-prophets {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
|
||||
border-left: 3px solid rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.gospels {
|
||||
background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.03));
|
||||
border-left: 3px solid rgba(234, 179, 8, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.acts {
|
||||
background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.03));
|
||||
border-left: 3px solid rgba(20, 184, 166, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.pauline {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
|
||||
border-left: 3px solid rgba(99, 102, 241, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.general {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(236, 72, 153, 0.03));
|
||||
border-left: 3px solid rgba(236, 72, 153, 0.4);
|
||||
}
|
||||
|
||||
.legend-color.apocalyptic {
|
||||
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.03));
|
||||
border-left: 3px solid rgba(220, 38, 38, 0.4);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -75,7 +214,7 @@
|
||||
<div class="book-grid">
|
||||
{% for book in old_testament %}
|
||||
{% if book.available %}
|
||||
<a href="/book/{{ book.name }}" class="book-card">
|
||||
<a href="/book/{{ book.name }}" class="book-card {{ book.type }}">
|
||||
<div class="book-name">{{ book.name }}</div>
|
||||
<div class="book-info">{{ book.chapters }} {% if book.chapters == 1 %}chapter{% else %}chapters{% endif %}</div>
|
||||
</a>
|
||||
@@ -89,7 +228,7 @@
|
||||
<div class="book-grid">
|
||||
{% for book in new_testament %}
|
||||
{% if book.available %}
|
||||
<a href="/book/{{ book.name }}" class="book-card">
|
||||
<a href="/book/{{ book.name }}" class="book-card {{ book.type }}">
|
||||
<div class="book-name">{{ book.name }}</div>
|
||||
<div class="book-info">{{ book.chapters }} {% if book.chapters == 1 %}chapter{% else %}chapters{% endif %}</div>
|
||||
</a>
|
||||
@@ -97,4 +236,50 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-title">Book Categories</div>
|
||||
<div class="legend-grid">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color law"></div>
|
||||
<span>Law</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color historical"></div>
|
||||
<span>Historical</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color wisdom"></div>
|
||||
<span>Wisdom</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color major-prophets"></div>
|
||||
<span>Major Prophets</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color minor-prophets"></div>
|
||||
<span>Minor Prophets</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color gospels"></div>
|
||||
<span>Gospels</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color acts"></div>
|
||||
<span>Acts</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color pauline"></div>
|
||||
<span>Pauline Epistles</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color general"></div>
|
||||
<span>General Epistles</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color apocalyptic"></div>
|
||||
<span>Apocalyptic</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user