From 07fd58480181d74ee50f6e1c02736f8489a8a499 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Thu, 4 Dec 2025 11:10:25 -0500
Subject: [PATCH] Fix sidebar layout: show on wider viewports, sit beside
 content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change sidebar hide breakpoint from 1200px to 768px (mobile only)
- Add margin-left to article only between 769px-1200px (when sidebar visible)
- Above 1200px: no margin (desktop, centered content)
- Below 768px: no margin (mobile, sidebar hidden)

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

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

diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html
index 8f83d52..e1abfb9 100644
--- a/kjvstudy_org/templates/base.html
+++ b/kjvstudy_org/templates/base.html
@@ -302,6 +302,13 @@
             padding: 2rem 5%;
         }
 
+        /* When sidebar is visible (768px to 1200px), push content over */
+        @media (min-width: 769px) and (max-width: 1200px) {
+            article {
+                margin-left: 140px;
+            }
+        }
+
         h1, h2, h3 {
             font-weight: 400;
             font-style: normal;
@@ -1001,8 +1008,8 @@
             display: none;
         }
 
-        /* Responsive design for tablets and mobile */
-        @media (max-width: 1200px) {
+        /* Responsive design for mobile only */
+        @media (max-width: 768px) {
             .nav-sidebar {
                 width: 140px;
                 left: -140px;
@@ -1052,9 +1059,7 @@
             #sidebar-toggle:checked ~ .sidebar-toggle-container .sidebar-toggle-btn::before {
                 content: '×';
             }
-        }
 
-        @media (max-width: 768px) {
             /* iOS-specific optimizations */
             body {
                 -webkit-text-size-adjust: 100%;