mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
7606fa8c3a
Changed scrollIntoView behavior from 'smooth' to 'auto' across all templates for instant, non-animated navigation between selections. Affected ~75 instances across 50+ template files. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
284 lines
7.9 KiB
HTML
284 lines
7.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Theological Resources - KJV Study{% endblock %}
|
|
{% block description %}Explore comprehensive biblical resources including people, theology, history, and study tools{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.intro-text {
|
|
max-width: 65%;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
margin: 1.5rem 0 3rem 0;
|
|
}
|
|
|
|
.resource-category {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.resource-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.resource-card {
|
|
display: block;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-color);
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.resource-card:hover {
|
|
border-color: var(--border-color-darker);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.resource-card h3 {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
margin: 0 0 0.5rem 0;
|
|
color: var(--text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.resource-card:hover h3 {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
.resource-badge {
|
|
font-size: 0.65rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 0.15rem 0.4rem;
|
|
border-radius: 3px;
|
|
background: #d4af37;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.resource-card.featured {
|
|
border-color: #d4af37;
|
|
border-width: 2px;
|
|
background: linear-gradient(135deg, #fffde7, var(--bg-color));
|
|
}
|
|
|
|
.resource-count {
|
|
font-size: 0.8rem;
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.resource-description {
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.resource-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.intro-text {
|
|
max-width: 100%;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.category-title {
|
|
font-size: 1.3rem;
|
|
color: var(--text-color);
|
|
border-bottom: 2px solid var(--border-color-darker);
|
|
padding-bottom: 0.75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.resource-card {
|
|
padding: 1.25rem;
|
|
border: 2px solid var(--border-color-darker);
|
|
border-radius: 6px;
|
|
background: var(--bg-color);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.resource-card h3 {
|
|
font-size: 1.15rem;
|
|
margin-bottom: 0.6rem;
|
|
color: var(--text-color);
|
|
font-weight: 600;
|
|
border-bottom: 2px solid var(--border-color-darker);
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.resource-count {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.resource-description {
|
|
font-size: 0.95rem;
|
|
line-height: 1.65;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.resource-category {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* Dark mode */
|
|
[data-theme="dark"] .resource-card {
|
|
background: #1a1a1a;
|
|
border-color: #333;
|
|
}
|
|
|
|
[data-theme="dark"] .resource-card:hover {
|
|
border-color: #555;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .resource-card.featured {
|
|
background: linear-gradient(135deg, #2a2a1a, #1a1a1a);
|
|
border-color: #d4af37;
|
|
}
|
|
|
|
[data-theme="dark"] .resource-card h3 {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
[data-theme="dark"] .resource-card:hover h3 {
|
|
color: #6b9b7a;
|
|
}
|
|
|
|
[data-theme="dark"] .resource-count {
|
|
color: #888;
|
|
}
|
|
|
|
[data-theme="dark"] .resource-description {
|
|
color: #aaa;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>Theological Resources</h1>
|
|
<p class="subtitle">A Curated Collection of Biblical Study Materials</p>
|
|
|
|
<div>
|
|
<p class="intro-text"><span class="newthought">These resources</span> provide comprehensive explorations of biblical people, theological concepts, historical contexts, and study tools. Each section offers detailed treatments grounded in the Authorized King James Version, with careful attention to scriptural accuracy and theological precision.</p>
|
|
</div>
|
|
|
|
{% for category, items in resources.items() %}
|
|
<div class="resource-category">
|
|
<h2 class="category-title">{{ category }}</h2>
|
|
<div class="resource-grid">
|
|
{% for resource in items %}
|
|
<a href="{{ resource.url }}" class="resource-card{% if resource.badge %} featured{% endif %}">
|
|
<h3>
|
|
{{ resource.name }}
|
|
{% if resource.badge %}
|
|
<span class="resource-badge">{{ resource.badge }}</span>
|
|
{% endif %}
|
|
</h3>
|
|
<div class="resource-count">{{ resource.count }}</div>
|
|
<p class="resource-description">{{ resource.description }}</p>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div>
|
|
<h2>Additional Tools</h2>
|
|
<p>Beyond these theological resources, explore our <a href="/reading-plans">Reading Plans</a> for structured Bible study, browse the <a href="/topics">Topical Index</a> for thematic studies, or use the <a href="/search">Search</a> to find specific passages.</p>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const cards = Array.from(document.querySelectorAll('.resource-card'));
|
|
if (cards.length === 0) return;
|
|
|
|
let selectedIndex = -1;
|
|
|
|
function getGridColumns() {
|
|
if (window.innerWidth <= 768) return 1;
|
|
const grid = document.querySelector('.resource-grid');
|
|
if (!grid) return 1;
|
|
const style = getComputedStyle(grid);
|
|
const cols = style.gridTemplateColumns.split(' ').length;
|
|
return cols || 1;
|
|
}
|
|
|
|
function selectCard(index) {
|
|
if (selectedIndex >= 0 && selectedIndex < cards.length) {
|
|
cards[selectedIndex].style.outline = '';
|
|
cards[selectedIndex].style.outlineOffset = '';
|
|
cards[selectedIndex].classList.remove('selected');
|
|
}
|
|
selectedIndex = Math.max(0, Math.min(index, cards.length - 1));
|
|
cards[selectedIndex].style.outline = '2px solid #4a7c59';
|
|
cards[selectedIndex].style.outlineOffset = '2px';
|
|
cards[selectedIndex].classList.add('selected');
|
|
cards[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|
|
|
const cols = getGridColumns();
|
|
if (e.key === 'ArrowDown' || e.key === 'j') {
|
|
e.preventDefault();
|
|
selectCard(selectedIndex < 0 ? 0 : selectedIndex + cols);
|
|
} else if (e.key === 'ArrowUp' || e.key === 'k') {
|
|
e.preventDefault();
|
|
if (selectedIndex < 0) selectCard(0);
|
|
else if (selectedIndex - cols >= 0) selectCard(selectedIndex - cols);
|
|
} else if (e.key === 'ArrowRight' || e.key === 'l') {
|
|
e.preventDefault();
|
|
selectCard(selectedIndex < 0 ? 0 : selectedIndex + 1);
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'h') {
|
|
e.preventDefault();
|
|
if (selectedIndex <= 0) history.back();
|
|
else selectCard(selectedIndex - 1);
|
|
} else if (e.key === 'Enter' && selectedIndex >= 0) {
|
|
e.preventDefault();
|
|
window.location.href = cards[selectedIndex].href;
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
if (selectedIndex >= 0 && selectedIndex < cards.length) {
|
|
cards[selectedIndex].style.outline = '';
|
|
cards[selectedIndex].style.outlineOffset = '';
|
|
cards[selectedIndex].classList.remove('selected');
|
|
}
|
|
selectedIndex = -1;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|