docs: Prevent jarring 50% width for medium screens

For screens that aren't terribly wide, there's a break point where the current documentation design will snap to 50% width, and the text is difficult to read due to the narrow layout. Rather than using 50% as the rule, let's setup a couple good breakpoints that are wider than Alabaster's default. In particular, at the 875px breakpoint the sidebar appears, removing 220px from the content. So add a breakpoint at 875 + 220 px, allowing the content width to grow up until that point, at which point we can cap the width. Fixes: 98cf8d5 ("docs: make page body wider") Signed-off-by: Stephen Brennan <[email protected]>
osandov · Jan 12, 2024 · 68fc466 · 68fc466
1 parent 2ebdc10
commit 68fc466
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/docs/_static/custom.css b/docs/_static/custom.css
@@ -6,3 +6,14 @@ div.admonition p.admonition-title {
     font-size: 17px;
     font-weight: bold;
 }
+
+@media screen and (min-width: 875px) {
+    div.document {
+        width: 100%;
+    }
+}
+@media screen and (min-width: 1095px) {
+    div.document {
+        width: 1095px;
+    }
+}
diff --git a/docs/conf.py b/docs/conf.py
@@ -41,9 +41,6 @@
     "logo": "logo.png",
     "logo_name": True,
     "logo_text_align": "center",
-    # Make the page body wider.
-    "page_width": "50%",
-    "body_max_width": "auto",
     "github_user": "osandov",
     "github_repo": "drgn",
     "github_button": True,