css: tweak responsive long-content padding values & dynamics

1 files changed, 12 insertions, 5 deletions

diff --git a/src/static/site5.css b/src/static/site5.css
index 9ff3954e..bfda0ba3 100644
--- a/src/static/site5.css
+++ b/src/static/site5.css
@@ -704,7 +704,7 @@ p code {
 }
 
 main.long-content {
-  --long-content-padding-ratio: 0.12;
+  --long-content-padding-ratio: 0.10;
 }
 
 main.long-content .main-content-container,
@@ -1683,6 +1683,13 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
  */
 
 @media (min-width: 600px) and (max-width: 899.98px) {
+  /* Medim layout is mainly defined (to the user) by hiding the sidebar, so
+   * don't apply the similar layout change of widening the long-content area
+   * if this page doesn't have a sidebar to hide in the first place.
+   */
+  #page-container:not(.has-zero-sidebars) main.long-content {
+    --long-content-padding-ratio: 0.06;
+  }
 }
 
 /* Layout - Wide or Medium */
@@ -1772,6 +1779,10 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     max-width: unset;
   }
 
+  main.long-content {
+    --long-content-padding-ratio: 0.02;
+  }
+
   /* Show sticky heading above cover art */
 
   .content-sticky-heading-container {
@@ -1787,8 +1798,4 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
   #header > div:not(:first-child) {
     margin-top: 0.5em;
   }
-
-  main.long-content {
-    --long-content-padding-ratio: 0.04;
-  }
 }