kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve sidebar compactness and add enhanced TOC to timeline

Browse Source 
Sidebar improvements:
- Reduced top padding from 3rem to 1.5rem
- Reduced base font size from 0.75rem to 0.7rem
- Tightened line-height from 1.5 to 1.3
- Reduced all section margins from 1.5rem to 0.75rem
- Reduced list item spacing and link padding
- Reduced medium-width sidebar from 280px to 150px

Biblical Timeline TOC:
- Changed "Quick Reference" to proper "Table of Contents" heading
- Restructured events in vertical list format
- Added dates next to each event
- Enhanced styling with border, better spacing, dividers
- Made period names bolder and more prominent
- Added mobile responsive styles

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2025-11-23 13:24:31 -05:00
parent 076b435a5c
commit f30f6654f7
2 changed files with 67 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/templates/base.html
+22 -22
View File
@@ -186,9 +186,9 @@
height: 100vh;
overflow-y: auto;
background: var(--bg-color);
padding: 3rem 0.75rem 1rem 0.75rem;
font-size: 0.75rem;
line-height: 1.5;
padding: 1.5rem 0.75rem 1rem 0.75rem;
font-size: 0.7rem;
line-height: 1.3;
z-index: 100;
border-right: 1px solid var(--border-color);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
@@ -208,11 +208,11 @@
}
.nav-sidebar h3 {
font-size: 0.7rem;
font-size: 0.65rem;
font-weight: 600;
font-style: italic;
margin: 0 0 0.5rem 0;
padding-bottom: 0.4rem;
margin: 0 0 0.3rem 0;
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--border-color);
color: var(--text-secondary);
text-transform: uppercase;
@@ -222,11 +222,11 @@
.nav-sidebar ul {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
margin: 0 0 0.75rem 0;
}
.nav-sidebar li {
margin: 0.25rem 0;
margin: 0.15rem 0;
}
.nav-sidebar a {
@@ -234,9 +234,9 @@
text-decoration: none;
border-bottom: none;
display: block;
padding: 0.15rem 0;
padding: 0.1rem 0;
transition: color 0.2s;
font-size: 0.75rem;
font-size: 0.7rem;
}
.nav-sidebar a:hover {
@@ -249,29 +249,29 @@
}
.nav-sidebar .testament-section {
margin-bottom: 1.5rem;
margin-bottom: 0.75rem;
}
.nav-sidebar .testament-title {
font-size: 0.75rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.08em;
color: var(--text-tertiary);
margin-bottom: 0.5rem;
margin-bottom: 0.3rem;
font-weight: 600;
}
.nav-sidebar details {
margin-bottom: 1.5rem;
margin-bottom: 0.75rem;
}
.nav-sidebar summary {
cursor: pointer;
font-size: 0.75rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.08em;
color: var(--text-tertiary);
margin-bottom: 0.5rem;
margin-bottom: 0.3rem;
font-weight: 600;
list-style: none;
user-select: none;
@@ -319,12 +319,12 @@
}
.nav-sidebar .book-list {
font-size: 0.8rem;
font-size: 0.7rem;
}
/* Sidebar search box */
.sidebar-search {
margin-bottom: 1.5rem;
margin-bottom: 0.75rem;
position: relative;
}
@@ -523,8 +523,8 @@
/* Responsive design for tablets and mobile */
@media (max-width: 1200px) {
.nav-sidebar {
width: 280px;
left: -280px;
width: 150px;
left: -150px;
top: 0;
bottom: 0;
max-height: 100vh;
kjvstudy_org/templates/biblical_timeline.html
+45 -23
View File
@@ -7,46 +7,61 @@
<style>
.timeline-nav {
max-width: 75%;
margin: 1.5rem 0;
padding: 1rem 1.5rem;
background: #f9f9f9;
border-left: 3px solid #666;
font-size: 0.9rem;
line-height: 1.8;
}
.timeline-nav strong {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85rem;
color: #666;
margin: 2rem 0 3rem 0;
padding: 1.5rem 2rem;
background: #fafafa;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 0.95rem;
line-height: 1.6;
}
.timeline-nav a {
color: var(--text-color);
text-decoration: none;
border-bottom: 1px solid transparent;
border-bottom: 1px dotted #999;
transition: all 0.2s;
}
.timeline-nav a:hover {
color: var(--link-color);
border-bottom-color: var(--link-color);
border-bottom-style: solid;
}
.timeline-nav-period {
margin: 0.5rem 0;
margin: 1.25rem 0;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e5e5;
}
.timeline-nav-period:last-child {
border-bottom: none;
}
.timeline-nav-period-name {
font-weight: 600;
font-weight: 700;
font-size: 1.05rem;
display: block;
margin-bottom: 0.5rem;
color: #111;
}
.timeline-nav-events {
margin-left: 1rem;
color: #666;
font-size: 0.85rem;
margin-left: 1.5rem;
color: #555;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.timeline-nav {
max-width: 100%;
padding: 1rem 1.25rem;
}
.timeline-nav-events {
margin-left: 1rem;
}
}
</style>
{% endblock %}
@@ -56,11 +71,18 @@
<p class="subtitle">Major events from Creation to the early Church</p>
<div class="timeline-nav">
<strong>Quick Reference:</strong>
<h2 style="margin: 0 0 1rem 0; font-size: 1.3rem; font-weight: 600; color: #333;">Table of Contents</h2>
{% for period_name, events in timeline_events.items() %}
<div class="timeline-nav-period">
<span class="timeline-nav-period-name"><a href="#{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">{{ period_name }}</a></span> —
<span class="timeline-nav-events">{% for event in events %}<a href="#{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }}</a>{% if not loop.last %} • {% endif %}{% endfor %}</span>
<span class="timeline-nav-period-name"><a href="#{{ period_name | lower | replace(' ', '-') | replace('&', 'and') }}">{{ period_name }}</a></span>
<div class="timeline-nav-events">
{% for event in events %}
<div style="margin: 0.25rem 0;">
<a href="#{{ (period_name + '-' + event.title) | lower | replace(' ', '-') | replace('&', 'and') | replace('\'', '') }}">{{ event.title }}</a>
{% if event.date %}<span style="color: #999; margin-left: 0.5rem;">({{ event.date }})</span>{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>