From 38277fbb826ea8dfbdc4edbc335afe2ad9249457 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Thu, 4 Dec 2025 11:30:48 -0500
Subject: [PATCH] Fix sidebar layout: content beside sidebar, not overlapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add 30px margin-left to article when sidebar visible (above 768px)
- Reset margin on mobile when sidebar hidden
- Adjust breadcrumb to align with sidebar edge

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/base.html | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 6c7b17c..cfc9002 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -300,15 +300,13 @@
 
         article {
             padding: 2rem 5%;
+            margin-left: 30px;
         }
 
-        /* When sidebar is visible (768px to 1200px), push content over */
-        @media (min-width: 769px) and (max-width: 1200px) {
+        /* Remove margin on mobile when sidebar is hidden */
+        @media (max-width: 768px) {
             article {
-                margin-left: 140px;
-            }
-            .breadcrumb {
-                margin-left: 140px;
+                margin-left: 0;
             }
         }
 
@@ -348,8 +346,8 @@
 
         /* Refined breadcrumb navigation */
         .breadcrumb {
-            margin: 2rem 0 3rem -5%;
-            padding-left: 3rem;
+            margin: 2rem 0 3rem -30px;
+            padding-left: 30px;
             font-size: 0.95rem;
             color: var(--text-secondary);
             font-style: italic;
@@ -1241,6 +1239,7 @@
                 flex-wrap: wrap;
                 border-bottom: 1px solid var(--border-color);
                 padding-bottom: 0.75rem;
+                padding-left: 1rem;
                 margin: 1rem 0 1.5rem 0;
                 background: transparent;
                 box-shadow: none !important;