Add smoother transitions between breakpoints

This reduces padding when transitioning between layouts, in response to
repeated feedback about misuse of available space.

Author: pradyunsg

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,23 +419,19 @@ 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%
     overflow-x: auto
 
 @media (max-width: $content-width)
   .content
-    padding: 0 $content-padding--small
     // Don't float sidebars to the right.
   article aside.sidebar
     float: none

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;