This page is a sandbox for the Distill-style layout classes added to the theme. All breakout blocks should stay left-aligned, while each class expands further to the right.
Reference
l-bodyl-pagel-gutterl-screenl-screen-rightl-body sidel-page sidel-screen side
Default Body
This paragraph uses the default article flow without any explicit layout class. It should match the normal reading width of the post body.
Baseline body width.
Page
This should align to a page-width column with the same left and right outer gap.
Large breakout width.
Gutter
This should occupy the column between the body width and the page width. It is useful for marginal figures or supplemental blocks that should sit entirely to the right of the reading column without becoming full-page elements.
Starts at the body edge and extends to the page edge.
Screen
This should bleed all the way to both browser edges.
Extends left into the outer gutter.
Screen Right
This should keep the left edge aligned with the normal content start, while expanding only toward the right edge of the page content area.
Expands to the right without bleeding past the left content edge.
Body Side
This should align a smaller block to the right edge of the body column.
The paragraph before the side block is intentionally longer so the transition from normal reading flow to the smaller anchored block is easier to judge. When this is working well, the reader should still feel that the article has a stable main column, while the side element reads as an optional companion rather than a competing main element.
Smaller block anchored to the body's right edge.
This paragraph comes immediately after the l-body side example. It exists to make the surrounding flow easier to inspect on desktop widths. If the block feels visually attached to the right edge of the body column, rather than floating arbitrarily inside the page, then the alignment is doing the right thing.
Another paragraph continues the same section on purpose. In a real article, this would likely be explanatory prose, a transition, or a note telling the reader what to focus on. For layout testing, it simply gives the eye more text to compare against the side element’s width and placement.
Page Side
This should align a smaller block to the right edge of the page-width column.
Compared with the body variant, this one should feel more spacious. The side box is still a small element, but its anchor reference is a wider parent width. That difference is subtle in code and much more obvious in actual reading context, so this page includes a full paragraph here to make that comparison easier.
Smaller block anchored to the page column.
The follow-up paragraph should help answer a practical question: does this still read like a note attached to the article, or does it start to feel like a second primary column? For most blog writing, the former is preferable. If it begins to dominate, the side width should probably be reduced rather than increasing the main body width.
One more paragraph is useful here because page-width examples tend to look fine in isolation but reveal edge cases once there is enough prose around them. In particular, you can compare how much horizontal separation remains between the ordinary text measure and the wider anchor used by the side element.
Screen Side
This should anchor a smaller block to the right half of the full-bleed area.
This last variant is the most extreme version in the current test. It is useful for checking whether screen-scale alignment still feels intentional, or whether it becomes detached from the article and starts to look like a separate banner or utility panel. That judgment is hard to make without enough surrounding prose, so this section deliberately adds more reading material.
Smaller block anchored to the full screen width.
The closing paragraph after the screen-side block helps show whether the full-bleed anchor still feels related to the article’s main rhythm. If this looks too disconnected, the screen-side pattern may only make sense for special cases such as large diagrams, pull quotes, or highly visual annotations.
This extra paragraph is here for the same reason as the others: layout differences often only become obvious once you can compare a side element against a few successive lines of ordinary prose. The goal of this page is not elegance but making those spacing decisions easier to judge quickly.
Figure Shortcode Test
The figure shortcode now accepts a class parameter, so it can participate in the same layout system.
Mixed Flow
This paragraph returns to the default text width. The idea is that wide media should not force the entire article into a wide reading measure.
Another paragraph after the breakout blocks to confirm that the reading column still returns to the normal body width.