mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
Apply Tufte CSS styling to study guides
- Add Study Guides link to homepage title section - Rewrite study guides listing with pure Tufte CSS - Use sidenotes for key verse references - Rewrite study guide detail pages with Tufte styling - Use marginnotes for scripture references in sections - Remove all custom CSS variables and inline styles - Apply classical typography and spacing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -34,6 +34,9 @@
|
||||
Appointed to be Read in Churches<br/>
|
||||
<em>Anno Domini</em> 1611
|
||||
</div>
|
||||
<p style="margin-top: 2rem; font-style: normal; font-size: 1.2rem;">
|
||||
<a href="/study-guides">Study Guides</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="epigraph">
|
||||
|
||||
@@ -1,265 +1,39 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ guide.title }} - Bible Study Guide - KJV Study{% endblock %}
|
||||
{% block description %}{{ guide.description }} - A comprehensive Bible study guide with Scripture references and practical applications from the KJV Bible.{% endblock %}
|
||||
{% block keywords %}{{ guide.title }}, Bible study, KJV study, Christian study guide, Scripture study, Bible lesson{% endblock %}
|
||||
{% block title %}{{ guide.title }} - Bible Study Guide - KJV Bible{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="study-guide-header" style="margin-bottom: 2rem;">
|
||||
<nav class="breadcrumb" style="
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
">
|
||||
<a href="/" style="color: var(--primary-color); text-decoration: none;">Home</a>
|
||||
<span style="margin: 0 0.5rem;">›</span>
|
||||
<a href="/study-guides" style="color: var(--primary-color); text-decoration: none;">Study Guides</a>
|
||||
<span style="margin: 0 0.5rem;">›</span>
|
||||
<span>{{ guide.title }}</span>
|
||||
</nav>
|
||||
<h1>{{ guide.title }}</h1>
|
||||
<p class="subtitle"><a href="/">Authorized King James Version</a></p>
|
||||
|
||||
<h1 class="guide-title" style="
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-display);
|
||||
line-height: 1.2;
|
||||
">
|
||||
📖 {{ guide.title }}
|
||||
</h1>
|
||||
|
||||
<p class="guide-description" style="
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
max-width: 700px;
|
||||
margin-bottom: 2rem;
|
||||
">
|
||||
{{ guide.description }}
|
||||
<section>
|
||||
<p><span class="newthought">{{ guide.description }}</span></p>
|
||||
</section>
|
||||
|
||||
{% for section in guide.sections %}
|
||||
{% set section_index = loop.index %}
|
||||
<section>
|
||||
<h2>{{ section.title }}</h2>
|
||||
|
||||
{% for verse_data in section.verse_texts %}
|
||||
<p>
|
||||
<label for="mn-s{{ section_index }}-v{{ loop.index }}" class="margin-toggle">⊕</label>
|
||||
<input type="checkbox" id="mn-s{{ section_index }}-v{{ loop.index }}" class="margin-toggle"/>
|
||||
<span class="marginnote">
|
||||
<strong>{{ verse_data.reference }}</strong><br/>
|
||||
<em>{{ verse_data.text }}</em>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Study Guide Sections -->
|
||||
<div class="study-sections">
|
||||
{% for section in guide.sections %}
|
||||
<div class="study-section" style="
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
">
|
||||
<h2 class="section-title" style="
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
font-family: var(--font-display);
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
padding-bottom: 0.5rem;
|
||||
">
|
||||
{{ section.title }}
|
||||
</h2>
|
||||
|
||||
<!-- Scripture Verses -->
|
||||
<div class="scripture-section" style="margin-bottom: 2rem;">
|
||||
<h3 style="
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
">
|
||||
📜 Scripture References
|
||||
</h3>
|
||||
|
||||
{% for verse_data in section.verse_texts %}
|
||||
<div class="verse-card" style="
|
||||
background: var(--background-color);
|
||||
border-left: 4px solid var(--primary-light);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
position: relative;
|
||||
">
|
||||
<div class="verse-reference" style="
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--font-display);
|
||||
">
|
||||
{{ verse_data.reference }}
|
||||
</div>
|
||||
<div class="verse-text" style="
|
||||
font-family: 'Crimson Text', 'Times New Roman', serif;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-primary);
|
||||
font-style: italic;
|
||||
">
|
||||
"{{ verse_data.text }}"
|
||||
</div>
|
||||
<a href="/search?q={{ verse_data.reference | urlencode }}" style="
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease;
|
||||
" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">
|
||||
🔍
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Study Content -->
|
||||
<div class="study-content" style="
|
||||
background: var(--primary-ultra-light);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--primary-light);
|
||||
">
|
||||
<h3 style="
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
">
|
||||
💡 Study Notes
|
||||
</h3>
|
||||
<p style="
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
font-family: 'Crimson Text', 'Times New Roman', serif;
|
||||
">
|
||||
{{ section.content }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Navigation and Actions -->
|
||||
<div class="study-actions" style="
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border-light);
|
||||
box-shadow: var(--shadow-sm);
|
||||
">
|
||||
<h3 style="
|
||||
color: var(--primary-color);
|
||||
margin: 0 0 1rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.3rem;
|
||||
">
|
||||
Continue Your Study
|
||||
</h3>
|
||||
<p style="
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.6;
|
||||
">
|
||||
Explore more study guides or search for specific topics in Scripture.
|
||||
<p>{{ section.content }}</p>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<nav>
|
||||
<p>
|
||||
<a href="/study-guides">← Study Guides</a> |
|
||||
<a href="/">Home</a>
|
||||
</p>
|
||||
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
||||
<a href="/study-guides" style="
|
||||
display: inline-block;
|
||||
background: var(--primary-light);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-display);
|
||||
transition: background-color 0.2s ease;
|
||||
" onmouseover="this.style.backgroundColor='var(--primary-color)'"
|
||||
onmouseout="this.style.backgroundColor='var(--primary-light)'">
|
||||
📖 More Study Guides
|
||||
</a>
|
||||
<a href="/search" style="
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-decoration: none;
|
||||
border: 2px solid var(--primary-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-display);
|
||||
transition: all 0.2s ease;
|
||||
" onmouseover="this.style.backgroundColor='var(--primary-light)'; this.style.color='white'"
|
||||
onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--primary-color)'">
|
||||
🔍 Search Scripture
|
||||
</a>
|
||||
<a href="/verse-of-the-day" style="
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-decoration: none;
|
||||
border: 2px solid var(--primary-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-display);
|
||||
transition: all 0.2s ease;
|
||||
" onmouseover="this.style.backgroundColor='var(--primary-light)'; this.style.color='white'"
|
||||
onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--primary-color)'">
|
||||
✨ Verse of the Day
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media (max-width: 768px) {
|
||||
.guide-title {
|
||||
font-size: 1.8rem !important;
|
||||
}
|
||||
|
||||
.guide-description {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.study-section {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.verse-card {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.verse-text {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.study-actions {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.study-actions div {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.study-actions a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.verse-card:hover {
|
||||
transform: translateX(4px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,219 +1,39 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Bible Study Guides - KJV Study{% endblock %}
|
||||
{% block description %}Explore comprehensive Bible study guides covering foundational Christian truths, character development, and biblical themes. Study the KJV Bible with structured guides and scripture references.{% endblock %}
|
||||
{% block keywords %}Bible study guides, KJV study, Christian study guides, Bible study topics, scripture study, Bible lessons{% endblock %}
|
||||
{% block title %}Bible Study Guides - KJV Bible{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="text-center mb-4">
|
||||
<h1 class="page-title">
|
||||
📖 Bible Study Guides
|
||||
</h1>
|
||||
<p style="font-size: 1rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto;">
|
||||
Deepen your understanding of God's Word with these comprehensive study guides.
|
||||
Each guide includes relevant Scripture passages and practical applications for Christian living.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Bible Study Guides</h1>
|
||||
<p class="subtitle"><a href="/">Authorized King James Version</a></p>
|
||||
|
||||
<section>
|
||||
<p><span class="newthought">These study guides</span> offer structured explorations of foundational Christian truths, character development, and biblical themes. Each guide includes relevant Scripture passages and reflections for deeper understanding of God's Word.</p>
|
||||
</section>
|
||||
|
||||
<!-- Study Guide Categories -->
|
||||
{% for category, guides in study_guides.items() %}
|
||||
<div class="study-category" style="margin-bottom: 3rem;">
|
||||
<h2 class="category-title" style="
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
padding-bottom: 0.5rem;
|
||||
font-family: var(--font-display);
|
||||
">
|
||||
{{ category }}
|
||||
</h2>
|
||||
|
||||
<div class="guides-grid" style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
">
|
||||
{% for guide in guides %}
|
||||
<div class="guide-card" style="
|
||||
background: var(--surface-color);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
position: relative;
|
||||
">
|
||||
<h3 style="
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-display);
|
||||
">
|
||||
{{ guide.title }}
|
||||
</h3>
|
||||
|
||||
<p style="
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
">
|
||||
{{ guide.description }}
|
||||
</p>
|
||||
|
||||
<div class="verse-preview" style="
|
||||
background: var(--background-color);
|
||||
border-left: 3px solid var(--primary-light);
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
">
|
||||
<h4 style="
|
||||
font-size: 0.85rem;
|
||||
margin: 0 0 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
">Key Verses</h4>
|
||||
<div class="verse-list" style="font-size: 0.9rem; color: var(--text-primary);">
|
||||
{% for verse in guide.verses[:3] %}
|
||||
<span style="
|
||||
display: inline-block;
|
||||
background: var(--primary-ultra-light);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
margin: 0.25rem 0.25rem 0.25rem 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--primary-color);
|
||||
">{{ verse }}</span>
|
||||
{% endfor %}
|
||||
{% if guide.verses|length > 3 %}
|
||||
<span style="color: var(--text-secondary); font-size: 0.85rem;">
|
||||
+{{ guide.verses|length - 3 }} more
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/study-guides/{{ guide.slug }}" style="
|
||||
display: inline-block;
|
||||
background: var(--primary-light);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 0.95rem;
|
||||
" onmouseover="this.style.backgroundColor='var(--primary-color)'"
|
||||
onmouseout="this.style.backgroundColor='var(--primary-light)'">
|
||||
Start Study →
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<h2>{{ category }}</h2>
|
||||
|
||||
{% for guide in guides %}
|
||||
<p>
|
||||
<strong><a href="/study-guides/{{ guide.slug }}">{{ guide.title }}</a></strong><label for="sn-{{ guide.slug }}" class="margin-toggle sidenote-number"></label>
|
||||
<input type="checkbox" id="sn-{{ guide.slug }}" class="margin-toggle"/>
|
||||
<span class="sidenote">
|
||||
<strong>Key Verses:</strong><br/>
|
||||
{% for verse in guide.verses[:5] %}
|
||||
{{ verse }}{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
{% if guide.verses|length > 5 %}
|
||||
<br/><em>+{{ guide.verses|length - 5 }} more</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
— {{ guide.description }}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Call to Action -->
|
||||
<div class="cta-section" style="
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border-light);
|
||||
box-shadow: var(--shadow-sm);
|
||||
">
|
||||
<h3 style="
|
||||
color: var(--primary-color);
|
||||
margin: 0 0 1rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.3rem;
|
||||
">
|
||||
🌱 Growing in Faith
|
||||
</h3>
|
||||
<p style="
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.6;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
">
|
||||
These study guides are designed to help you grow in your understanding of God's Word.
|
||||
Take your time with each section and allow the Holy Spirit to teach you through Scripture.
|
||||
</p>
|
||||
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
||||
<a href="/verse-of-the-day" style="
|
||||
display: inline-block;
|
||||
background: var(--primary-light);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-display);
|
||||
transition: background-color 0.2s ease;
|
||||
" onmouseover="this.style.backgroundColor='var(--primary-color)'"
|
||||
onmouseout="this.style.backgroundColor='var(--primary-light)'">
|
||||
✨ Today's Verse
|
||||
</a>
|
||||
<a href="/search" style="
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-decoration: none;
|
||||
border: 2px solid var(--primary-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-display);
|
||||
transition: all 0.2s ease;
|
||||
" onmouseover="this.style.backgroundColor='var(--primary-light)'; this.style.color='white'"
|
||||
onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--primary-color)'">
|
||||
🔍 Search Scripture
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.guide-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--primary-ultra-light);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.guides-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.cta-section div {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.cta-section a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
<nav>
|
||||
<p><a href="/">← Home</a></p>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user