v.1.2.1

_src/layout.md

@@ -158,9 +158,11 @@ You can place the `container` class on e.g.:
 * Nested within other `container` elements (e.g. so you can have sidebars or arrays of cards within your `<main>`)
 * And more.
 
-_What if you want to use Baselayer’s `flex`, `grid` and `hidden` clases but you really prefer media queries, or if you need to support pre-container query browsers?_
+### Supporting older browsers
 
-Then you can find every instance of `@container` in `layout.css` and replace it with `@media`, and this will convert everything to media queries. (And then the `container` class will be redundant — you won't need it.)
+What if you want to use Baselayer’s `flex`, `grid` and `hidden` clases but you really prefer media queries, or if you need to support pre-container query browsers?
+
+Then all you need to do is find every instance of `@container` in `layout.css` and replace it with `@media`, and this will convert everything to media queries. (And then the `container` class will be redundant — you won’t need it.)
 
 ### Container query demos
 

docs/layout/index.html

@@ -309,7 +309,7 @@ <h1 class="t-semibold">Layout</h1>
               <div class="sticky top w-sm h-max-100dvh mx-auto px-2 overflow-y">
                 <p class="h4 t-semibold">Contents</p>
                 <nav class="toc" >
-        <ul><li><a href="#blocks">Blocks</a></li><li><a href="#dimensions">Dimensions</a><ul><li><a href="#centered-layout-wrappers">Centered layout wrappers</a></li><li><a href="#widths">Widths</a></li><li><a href="#heights">Heights</a></li><li><a href="#box">Box</a></li></ul></li><li><a href="#positions">Positions</a></li><li><a href="#container-query-powered-layouts">Container query powered layouts</a><ul><li><a href="#container-query-demos">Container query demos</a></li><li><a href="#flex-layouts">Flex layouts</a><ul><li><a href="#flex-gaps">Flex gaps</a></li><li><a href="#flex-modifiers">Flex modifiers</a></li><li><a href="#flex-item-grow">Flex-item grow</a></li><li><a href="#flex-and-container-queries">Flex and container queries</a></li></ul></li><li><a href="#grid-layouts">Grid layouts</a><ul><li><a href="#setting-up-a-grid">Setting up a grid</a></li><li><a href="#grid-gaps">Grid gaps</a></li><li><a href="#controlling-grid-items">Controlling grid items</a></li><li><a href="#grid-items-and-dense-packing">Grid items and dense packing</a></li><li><a href="#grid-and-container-queries">Grid and container queries</a></li></ul></li><li><a href="#invisibility-(hidden)-classes">Invisibility (hidden) classes</a></li></ul></li><li><a href="#content-grid">Content-grid</a><ul><li><a href="#popout-panels">Popout panels</a></li><li><a href="#expanded-panels">Expanded panels</a></li><li><a href="#full-bleed-panels">Full-bleed panels</a></li></ul></li><li><a href="#aspect-ratios">Aspect ratios</a></li><li><a href="#overflows">Overflows</a></li></ul>
+        <ul><li><a href="#blocks">Blocks</a></li><li><a href="#dimensions">Dimensions</a><ul><li><a href="#centered-layout-wrappers">Centered layout wrappers</a></li><li><a href="#widths">Widths</a></li><li><a href="#heights">Heights</a></li><li><a href="#box">Box</a></li></ul></li><li><a href="#positions">Positions</a></li><li><a href="#container-query-powered-layouts">Container query powered layouts</a><ul><li><a href="#supporting-older-browsers">Supporting older browsers</a></li><li><a href="#container-query-demos">Container query demos</a></li><li><a href="#flex-layouts">Flex layouts</a><ul><li><a href="#flex-gaps">Flex gaps</a></li><li><a href="#flex-modifiers">Flex modifiers</a></li><li><a href="#flex-item-grow">Flex-item grow</a></li><li><a href="#flex-and-container-queries">Flex and container queries</a></li></ul></li><li><a href="#grid-layouts">Grid layouts</a><ul><li><a href="#setting-up-a-grid">Setting up a grid</a></li><li><a href="#grid-gaps">Grid gaps</a></li><li><a href="#controlling-grid-items">Controlling grid items</a></li><li><a href="#grid-items-and-dense-packing">Grid items and dense packing</a></li><li><a href="#grid-and-container-queries">Grid and container queries</a></li></ul></li><li><a href="#invisibility-(hidden)-classes">Invisibility (hidden) classes</a></li></ul></li><li><a href="#content-grid">Content-grid</a><ul><li><a href="#popout-panels">Popout panels</a></li><li><a href="#expanded-panels">Expanded panels</a></li><li><a href="#full-bleed-panels">Full-bleed panels</a></li></ul></li><li><a href="#aspect-ratios">Aspect ratios</a></li><li><a href="#overflows">Overflows</a></li></ul>
       </nav>
               </div>
             </nav>
@@ -434,8 +434,9 @@ <h2 id="container-query-powered-layouts" tabindex="-1">Container query powered l
 <li>Nested within other <code>container</code> elements (e.g. so you can have sidebars or arrays of cards within your <code>&lt;main&gt;</code>)</li>
 <li>And more.</li>
 </ul>
-<p><em>What if you want to use Baselayer’s <code>flex</code>, <code>grid</code> and <code>hidden</code> clases but you really prefer media queries, or if you need to support pre-container query browsers?</em></p>
-<p>Then you can find every instance of <code>@container</code> in <code>layout.css</code> and replace it with <code>@media</code>, and this will convert everything to media queries. (And then the <code>container</code> class will be redundant — you won't need it.)</p>
+<h3 id="supporting-older-browsers" tabindex="-1">Supporting older browsers</h3>
+<p>What if you want to use Baselayer’s <code>flex</code>, <code>grid</code> and <code>hidden</code> clases but you really prefer media queries, or if you need to support pre-container query browsers?</p>
+<p>Then all you need to do is find every instance of <code>@container</code> in <code>layout.css</code> and replace it with <code>@media</code>, and this will convert everything to media queries. (And then the <code>container</code> class will be redundant — you won’t need it.)</p>
 <h3 id="container-query-demos" tabindex="-1">Container query demos</h3>
 <p>This entire documentation template is built using a full-width container query powered <a href="#grid-layouts">grid</a> that takes effect when the <em>viewport</em> is at or above Baselayer’s <code>md</code> container query breakpoint (default ≥ 960px). Above <code>md</code>, the top navigation bar becomes the sidebar in column 1, with everything else in column 2.</p>
 <p>The “everything else” area is organized in another grid within the same <code>container</code> context as the outer grid above, that becomes a two column grid when <em>that container’s</em> width is at <code>lg</code> or above (≥ 1280px). Then the table of contents (TOC) block is placed in column 2 of this inner grid (that appear to be the third column in the overall page layout).</p>