From 05a2d63a6cfd123db27e764f3b53be7029adccd4 Mon Sep 17 00:00:00 2001
From: Pradyun Gedam <pradyunsg@users.noreply.github.com>
Date: Sat, 27 Jul 2024 16:22:21 +0100
Subject: [PATCH] Add smoother transitions between breakpoints

This reduces padding when transitioning between layouts, in response to
repeated feedback about misuse of available space.
---
 src/furo/assets/styles/_scaffold.sass         | 17 ++++++++++-------
 src/furo/assets/styles/variables/_layout.scss |  4 +++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/furo/assets/styles/_scaffold.sass b/src/furo/assets/styles/_scaffold.sass
index 44fc1d98f..e7ceede71 100644
--- a/src/furo/assets/styles/_scaffold.sass
+++ b/src/furo/assets/styles/_scaffold.sass
@@ -363,7 +363,14 @@ article
   .sidebar-drawer
     width: calc((100% - #{$full-width - $sidebar-width}) / 2 + #{$sidebar-width})
 
-@media (max-width: $full-width - $sidebar-width)
+@media (max-width: $content-padded-width + $sidebar-width)
+  // Center the page
+  .content
+    margin-left: auto
+    margin-right: auto
+    padding: 0 $content-padding--small
+
+@media (max-width: $content-padded-width--small + $sidebar-width)
   // Collapse "navigation".
   .nav-overlay-icon
     display: flex
@@ -412,15 +419,12 @@ article
   .back-to-top
     top: calc(var(--header-height) + 0.5rem)
 
-  // Center the page, and accommodate for the header.
+  // Accommodate for the header.
   .page
     flex-direction: column
     justify-content: center
-  .content
-    margin-left: auto
-    margin-right: auto
 
-@media (max-width: $content-width + 2* $content-padding)
+@media (max-width: $content-width + 2* $content-padding--small)
   // Content should respect window limits.
   .content
     width: 100%
@@ -428,7 +432,6 @@ article
 
 @media (max-width: $content-width)
   .content
-    padding: 0 $content-padding--small
     // Don't float sidebars to the right.
   article aside.sidebar
     float: none
diff --git a/src/furo/assets/styles/variables/_layout.scss b/src/furo/assets/styles/variables/_layout.scss
index 516ca378a..2dc83247b 100644
--- a/src/furo/assets/styles/variables/_layout.scss
+++ b/src/furo/assets/styles/variables/_layout.scss
@@ -6,4 +6,6 @@ $content-padding: 3em;
 $content-padding--small: 1em;
 $content-width: 46em;
 $sidebar-width: 15em;
-$full-width: $content-width + 2 * ($content-padding + $sidebar-width);
+$content-padded-width: $content-width + 2 * $content-padding;
+$content-padded-width--small: $content-width + 2 * $content-padding--small;
+$full-width: $content-padded-width + 2 * $sidebar-width;