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

Update commentary layout with sidebar spacing

Browse Source 
Adjust commentary container to account for sidebar width by adding
left margin and width calculations. Includes responsive overrides
for mobile and tablet breakpoints.
This commit is contained in:
Kenneth Reitz
2025-05-26 20:23:46 -04:00
parent 4856a0efbb
commit c02ef17e9a
2 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/static/style.css
+23
View File
@@ -1112,6 +1112,17 @@ html,
.commentary-container {
background-color: var(--background-color);
min-height: 100vh;
margin-left: 220px;
width: calc(100% - 220px);
padding: 2rem;
box-sizing: border-box;
}
/* Commentary-specific container overrides */
.commentary-container .container {
margin-left: 0 !important;
width: 100% !important;
max-width: none;
}
.commentary-header {
@@ -1318,6 +1329,12 @@ html,
/* Mobile styles for commentary */
@media (max-width: 768px) {
.commentary-container {
margin-left: 0 !important;
width: 100% !important;
padding: 1rem;
}
.commentary-header {
padding: 1.5rem 1rem;
margin-bottom: 2rem;
@@ -1406,6 +1423,12 @@ html,
/* Tablet responsive tooltips */
@media (min-width: 769px) and (max-width: 1024px) {
.commentary-container {
margin-left: 0 !important;
width: 100% !important;
padding: 1.5rem;
}
.verse-tooltip {
max-width: 380px;
min-width: 280px;
kjvstudy_org/templates/book_commentary.html
+14 -15
View File
@@ -715,7 +715,7 @@ h1, h2, h3, h4, h5, h6 {
{% endblock %}
{% block breadcrumb %}
<div class="container">
<div class="container" style="margin-left: 220px; width: calc(100% - 220px);">
<nav class="breadcrumb">
<a href="/">📚 All Books</a>
<span class="breadcrumb-separator">/</span>
@@ -727,19 +727,18 @@ h1, h2, h3, h4, h5, h6 {
{% endblock %}
{% block content %}
<header class="commentary-header">
<h1>Commentary on {{ book }}</h1>
<p>Comprehensive analysis and insights from the Authorized King James Version (KJV)</p>
<div class="book-meta">
<span class="book-meta-item">{{ testament }}</span>
<span class="book-meta-item">{{ genre }}</span>
<span class="book-meta-item">{{ chapters|length }} Chapters</span>
<span class="book-meta-item">{{ time_period }}</span>
</div>
</header>
<div class="commentary-container" style="background-color: var(--background-color); min-height: 100vh;">
<div class="commentary-container" style="background-color: var(--background-color); min-height: 100vh; margin-left: 220px; width: calc(100% - 220px); padding: 2rem;">
<header class="commentary-header">
<h1>Commentary on {{ book }}</h1>
<p>Comprehensive analysis and insights from the Authorized King James Version (KJV)</p>
<div class="book-meta">
<span class="book-meta-item">{{ testament }}</span>
<span class="book-meta-item">{{ genre }}</span>
<span class="book-meta-item">{{ chapters|length }} Chapters</span>
<span class="book-meta-item">{{ time_period }}</span>
</div>
</header>
<div class="two-column">
<main class="main-content">
<section class="commentary-section">
@@ -924,7 +923,7 @@ h1, h2, h3, h4, h5, h6 {
{% endblock %}
{% block navigation %}
<div class="container">
<div class="container" style="margin-left: 220px; width: calc(100% - 220px);">
<div class="navigation">
<a href="/book/{{ book }}" class="nav-button">
← Back to {{ book }}