Improve documentation page and overlay layout
Make the embedded and non-embedded documentation more readable:
* Constrain the prose to a ~44em measure with a calm vertical rhythm
(left-aligned, unitless line-height, consistent paragraph/list
spacing), scoped to the doc pages (main.tutorial), so lines are no
longer viewport-wide on large screens.
* Cap the documentation overlay window (#tutorial) at 72em instead of
spanning ~96% of the viewport, and anchor it to the right so it reads
as a right-hand documentation drawer that leaves the main workspace
(query / results) uncovered. Small viewports still get a full-screen
panel.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Change-Id: Iabdfdc8b03c3713abce89b7ecdea6513190a3cfd
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index ba6de14..7a1e32a 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -244,7 +244,11 @@
margin-right: lengths.$standard-margin;
&.shifted {
- padding-left: 0;
+ // On mobile the sidebar/logo is not beside the content, so keep the
+ // normal 1rem left padding here (instead of the desktop logo offset)
+ // rather than dropping it to 0 -- otherwise the text is flush to the
+ // left edge and the left/right margins look unbalanced.
+ padding-left: 1rem;
}
}
@@ -367,6 +371,7 @@
border-width: 0;
right: 0;
left: 0;
+ width: auto;
bottom: 0;
top: 0;
padding: 0;