Add categorized Bible book navigation with visual styling

Add categorized Bible book navigation with visual styling

AI:

Add categorized Bible book navigation with visual styling
This commit is contained in:
2025-05-26 13:34:37 -04:00
parent 10583fc472
commit afc8126617
3 changed files with 452 additions and 20 deletions
+46 -16
View File
@@ -19,6 +19,18 @@
--font-serif: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Lora', var(--font-serif);
/* Bible Book Category Colors */
--torah-color: #8B4513;
--historical-color: #CD853F;
--wisdom-color: #DAA520;
--major-prophets-color: #A0522D;
--minor-prophets-color: #A52A2A;
--gospels-color: #4169E1;
--acts-color: #6495ED;
--pauline-color: #1E90FF;
--general-epistles-color: #4682B4;
--apocalyptic-color: #191970;
}
* {
@@ -218,23 +230,38 @@ body {
/* Book Grid */
.book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.book-card {
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
background: var(--surface-color);
border-radius: var(--radius-md);
padding: 1rem;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid var(--border-light);
color: var(--text-primary);
}
.book-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Testament Divider */
.testament-divider {
border: none;
height: 3px;
background: linear-gradient(90deg, var(--torah-color) 0%, var(--gospels-color) 100%);
margin: 2rem 0;
opacity: 0.7;
border-radius: 1px;
box-shadow: var(--shadow-sm);
width: 100%;
}
.book-card::before {
@@ -269,9 +296,12 @@ body {
}
.book-meta {
font-size: 0.875rem;
margin: 0.25rem 0 0 0;
font-size: 0.75rem;
color: var(--text-secondary);
margin: 0.5rem 0 0;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Chapter Grid */
+292 -2
View File
@@ -48,6 +48,178 @@
<!-- Styles -->
<link href="/static/style.css" rel="stylesheet">
<style>
.testament-divider {
border: none;
height: 2px;
background: linear-gradient(90deg, var(--torah-color) 0%, var(--gospels-color) 100%);
margin: 1rem 0;
opacity: 0.6;
border-radius: 1px;
}
.bible-book {
display: block;
color: var(--text-secondary);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
border-left: 3px solid transparent;
font-size: 0.875rem;
}
/* Torah/Pentateuch */
.bible-book.torah {
border-left-color: var(--torah-color);
}
.bible-book.torah:hover {
background: rgba(139, 69, 19, 0.1);
color: var(--torah-color);
}
.bible-book.active.torah {
background: rgba(139, 69, 19, 0.15);
color: var(--torah-color);
font-weight: 500;
border-left-width: 4px;
}
/* Historical Books */
.bible-book.historical {
border-left-color: var(--historical-color);
}
.bible-book.historical:hover {
background: rgba(205, 133, 63, 0.1);
color: var(--historical-color);
}
.bible-book.active.historical {
background: rgba(205, 133, 63, 0.15);
color: var(--historical-color);
font-weight: 500;
border-left-width: 4px;
}
/* Wisdom Literature */
.bible-book.wisdom {
border-left-color: var(--wisdom-color);
}
.bible-book.wisdom:hover {
background: rgba(218, 165, 32, 0.1);
color: var(--wisdom-color);
}
.bible-book.active.wisdom {
background: rgba(218, 165, 32, 0.15);
color: var(--wisdom-color);
font-weight: 500;
border-left-width: 4px;
}
/* Major Prophets */
.bible-book.major-prophets {
border-left-color: var(--major-prophets-color);
}
.bible-book.major-prophets:hover {
background: rgba(160, 82, 45, 0.1);
color: var(--major-prophets-color);
}
.bible-book.active.major-prophets {
background: rgba(160, 82, 45, 0.15);
color: var(--major-prophets-color);
font-weight: 500;
border-left-width: 4px;
}
/* Minor Prophets */
.bible-book.minor-prophets {
border-left-color: var(--minor-prophets-color);
}
.bible-book.minor-prophets:hover {
background: rgba(165, 42, 42, 0.1);
color: var(--minor-prophets-color);
}
.bible-book.active.minor-prophets {
background: rgba(165, 42, 42, 0.15);
color: var(--minor-prophets-color);
font-weight: 500;
border-left-width: 4px;
}
/* Gospels */
.bible-book.gospels {
border-left-color: var(--gospels-color);
}
.bible-book.gospels:hover {
background: rgba(65, 105, 225, 0.1);
color: var(--gospels-color);
}
.bible-book.active.gospels {
background: rgba(65, 105, 225, 0.15);
color: var(--gospels-color);
font-weight: 500;
border-left-width: 4px;
}
/* Acts (Historical NT) */
.bible-book.acts {
border-left-color: var(--acts-color);
}
.bible-book.acts:hover {
background: rgba(100, 149, 237, 0.1);
color: var(--acts-color);
}
.bible-book.active.acts {
background: rgba(100, 149, 237, 0.15);
color: var(--acts-color);
font-weight: 500;
border-left-width: 4px;
}
/* Pauline Epistles */
.bible-book.pauline {
border-left-color: var(--pauline-color);
}
.bible-book.pauline:hover {
background: rgba(30, 144, 255, 0.1);
color: var(--pauline-color);
}
.bible-book.active.pauline {
background: rgba(30, 144, 255, 0.15);
color: var(--pauline-color);
font-weight: 500;
border-left-width: 4px;
}
/* General Epistles */
.bible-book.general-epistles {
border-left-color: var(--general-epistles-color);
}
.bible-book.general-epistles:hover {
background: rgba(70, 130, 180, 0.1);
color: var(--general-epistles-color);
}
.bible-book.active.general-epistles {
background: rgba(70, 130, 180, 0.15);
color: var(--general-epistles-color);
font-weight: 500;
border-left-width: 4px;
}
/* Apocalyptic */
.bible-book.apocalyptic {
border-left-color: var(--apocalyptic-color);
}
.bible-book.apocalyptic:hover {
background: rgba(25, 25, 112, 0.1);
color: var(--apocalyptic-color);
}
.bible-book.active.apocalyptic {
background: rgba(25, 25, 112, 0.15);
color: var(--apocalyptic-color);
font-weight: 500;
border-left-width: 4px;
}
</style>
<!-- Scripts -->
<script src="/static/app.js" defer></script>
@@ -90,12 +262,130 @@
</a>
{% if books %}
<h3>Bible Books</h3>
<h3 style="color: var(--torah-color); margin-bottom: 0.5rem;">Old Testament</h3>
<!-- Torah/Pentateuch -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--torah-color); text-transform: uppercase; letter-spacing: 0.5px;">Torah/Pentateuch</h4>
{% set torah = ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy'] %}
{% for book in books %}
{% if book in torah %}
<a href="/book/{{ book }}"
{% if book in request.url.path %}class="active"{% endif %}>
class="bible-book torah {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- Historical Books -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--historical-color); text-transform: uppercase; letter-spacing: 0.5px;">Historical Books</h4>
{% set historical = ['Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel', '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles', 'Ezra', 'Nehemiah', 'Esther'] %}
{% for book in books %}
{% if book in historical %}
<a href="/book/{{ book }}"
class="bible-book historical {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- Wisdom Literature -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--wisdom-color); text-transform: uppercase; letter-spacing: 0.5px;">Wisdom Literature</h4>
{% set wisdom = ['Job', 'Psalms', 'Proverbs', 'Ecclesiastes', 'Song of Solomon'] %}
{% for book in books %}
{% if book in wisdom %}
<a href="/book/{{ book }}"
class="bible-book wisdom {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- Major Prophets -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--major-prophets-color); text-transform: uppercase; letter-spacing: 0.5px;">Major Prophets</h4>
{% set major_prophets = ['Isaiah', 'Jeremiah', 'Lamentations', 'Ezekiel', 'Daniel'] %}
{% for book in books %}
{% if book in major_prophets %}
<a href="/book/{{ book }}"
class="bible-book major-prophets {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- Minor Prophets -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--minor-prophets-color); text-transform: uppercase; letter-spacing: 0.5px;">Minor Prophets</h4>
{% set minor_prophets = ['Hosea', 'Joel', 'Amos', 'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah', 'Haggai', 'Zechariah', 'Malachi'] %}
{% for book in books %}
{% if book in minor_prophets %}
<a href="/book/{{ book }}"
class="bible-book minor-prophets {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<hr class="testament-divider">
<h3 style="color: var(--gospels-color); margin-bottom: 0.5rem;">New Testament</h3>
<!-- Gospels -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--gospels-color); text-transform: uppercase; letter-spacing: 0.5px;">Gospels</h4>
{% set gospels = ['Matthew', 'Mark', 'Luke', 'John'] %}
{% for book in books %}
{% if book in gospels %}
<a href="/book/{{ book }}"
class="bible-book gospels {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- Acts (Historical NT) -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--acts-color); text-transform: uppercase; letter-spacing: 0.5px;">Historical</h4>
{% set acts = ['Acts'] %}
{% for book in books %}
{% if book in acts %}
<a href="/book/{{ book }}"
class="bible-book acts {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- Pauline Epistles -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--pauline-color); text-transform: uppercase; letter-spacing: 0.5px;">Pauline Epistles</h4>
{% set pauline = ['Romans', '1 Corinthians', '2 Corinthians', 'Galatians', 'Ephesians', 'Philippians', 'Colossians', '1 Thessalonians', '2 Thessalonians', '1 Timothy', '2 Timothy', 'Titus', 'Philemon', 'Hebrews'] %}
{% for book in books %}
{% if book in pauline %}
<a href="/book/{{ book }}"
class="bible-book pauline {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- General Epistles -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--general-epistles-color); text-transform: uppercase; letter-spacing: 0.5px;">General Epistles</h4>
{% set general_epistles = ['James', '1 Peter', '2 Peter', '1 John', '2 John', '3 John', 'Jude'] %}
{% for book in books %}
{% if book in general_epistles %}
<a href="/book/{{ book }}"
class="bible-book general-epistles {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
<!-- Apocalyptic -->
<h4 style="font-size: 0.75rem; margin: 0.5rem 0; color: var(--apocalyptic-color); text-transform: uppercase; letter-spacing: 0.5px;">Apocalyptic</h4>
{% set apocalyptic = ['Revelation'] %}
{% for book in books %}
{% if book in apocalyptic %}
<a href="/book/{{ book }}"
class="bible-book apocalyptic {% if book in request.url.path %}active{% endif %}">
{{ book }}
</a>
{% endif %}
{% endfor %}
{% endif %}
+114 -2
View File
@@ -15,12 +15,124 @@
</p>
</div>
<!-- Bible Book Categories Legend -->
<div class="bible-legend">
<h3 class="legend-title">Bible Book Categories</h3>
<div class="legend-grid">
<!-- Old Testament Categories -->
<div class="legend-section">
<h4>Old Testament</h4>
<div class="legend-items">
<a href="#torah" class="legend-item" style="border-left-color: var(--torah-color);">
<span class="legend-color
<h2 class="section-title" style="margin-top: 2rem; color: var(--torah-color);">Old Testament</h2>
<div class="book-grid">
{% set old_testament = ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy', 'Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel', '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles', 'Ezra', 'Nehemiah', 'Esther', 'Job', 'Psalms', 'Proverbs', 'Ecclesiastes', 'Song of Solomon', 'Isaiah', 'Jeremiah', 'Lamentations', 'Ezekiel', 'Daniel', 'Hosea', 'Joel', 'Amos', 'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah', 'Haggai', 'Zechariah', 'Malachi'] %}
<!-- Torah/Pentateuch -->
{% for book in books %}
<a href="/book/{{ book }}" class="book-card">
{% if book in ['Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--torah-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Authorized King James Version</p>
<p class="book-meta">Torah/Pentateuch</p>
</a>
{% endif %}
{% endfor %}
<!-- Historical Books -->
{% for book in books %}
{% if book in ['Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel', '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles', 'Ezra', 'Nehemiah', 'Esther'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--historical-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Historical</p>
</a>
{% endif %}
{% endfor %}
<!-- Wisdom Literature -->
{% for book in books %}
{% if book in ['Job', 'Psalms', 'Proverbs', 'Ecclesiastes', 'Song of Solomon'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--wisdom-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Wisdom</p>
</a>
{% endif %}
{% endfor %}
<!-- Major Prophets -->
{% for book in books %}
{% if book in ['Isaiah', 'Jeremiah', 'Lamentations', 'Ezekiel', 'Daniel'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--major-prophets-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Major Prophet</p>
</a>
{% endif %}
{% endfor %}
<!-- Minor Prophets -->
{% for book in books %}
{% if book in ['Hosea', 'Joel', 'Amos', 'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah', 'Haggai', 'Zechariah', 'Malachi'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--minor-prophets-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Minor Prophet</p>
</a>
{% endif %}
{% endfor %}
</div>
<hr class="testament-divider" style="margin: 3rem auto; width: 80%; max-width: 600px; background: linear-gradient(90deg, var(--torah-color) 0%, var(--gospels-color) 100%);">
<h2 class="section-title" style="margin-top: 2rem; color: var(--gospels-color);">New Testament</h2>
<div class="book-grid">
<!-- Gospels -->
{% for book in books %}
{% if book in ['Matthew', 'Mark', 'Luke', 'John'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--gospels-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Gospel</p>
</a>
{% endif %}
{% endfor %}
<!-- Acts (Historical NT) -->
{% for book in books %}
{% if book == 'Acts' %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--acts-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Historical</p>
</a>
{% endif %}
{% endfor %}
<!-- Pauline Epistles -->
{% for book in books %}
{% if book in ['Romans', '1 Corinthians', '2 Corinthians', 'Galatians', 'Ephesians', 'Philippians', 'Colossians', '1 Thessalonians', '2 Thessalonians', '1 Timothy', '2 Timothy', 'Titus', 'Philemon', 'Hebrews'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--pauline-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Pauline Epistle</p>
</a>
{% endif %}
{% endfor %}
<!-- General Epistles -->
{% for book in books %}
{% if book in ['James', '1 Peter', '2 Peter', '1 John', '2 John', '3 John', 'Jude'] %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--general-epistles-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">General Epistle</p>
</a>
{% endif %}
{% endfor %}
<!-- Apocalyptic -->
{% for book in books %}
{% if book == 'Revelation' %}
<a href="/book/{{ book }}" class="book-card" style="border-left: 4px solid var(--apocalyptic-color);">
<h3 class="book-title">{{ book }}</h3>
<p class="book-meta">Apocalyptic</p>
</a>
{% endif %}
{% endfor %}
</div>