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/main/tutorial.scss b/dev/scss/main/tutorial.scss
index 44654dd..9fa882f 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -14,8 +14,13 @@
z-index: 9999;
top: 5%;
bottom: 5%;
- left: 2%;
+ // Anchor the panel to the right and cap its width, so it reads as a
+ // right-hand documentation drawer and leaves the main workspace on the left
+ // uncovered. On narrow viewports it still uses (almost) the full width (see
+ // the media query, which resets left/right/width for a full-screen panel).
+ left: auto;
right: 2%;
+ width: min(96%, 72em);
padding-right: lengths.$right-view-distance;
background-color: colors.$nearly-white;
box-shadow: choose.$choose-box-shadow;