Files
kjvstudy.org/kjvstudy_org/templates/resources.html
T
kennethreitz 418e0603f2 Add dark mode support to resources page
- Dark backgrounds for resource cards
- Dark gradient for featured cards (preserves gold border)
- Proper contrast for titles, counts, and descriptions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-29 18:03:35 -05:00

221 lines
5.3 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>
{% endblock %}