v.1.2.1

_src/index.md

@@ -9,7 +9,7 @@ nextLink: "Typography"
 <div aria-label="Note" class="popout mb-2 bl-3 b-blue b-300 p-2 t-black bg-blue bg-100">
   <p><strong>Baselayer 3 v.1.2.x uses <em>container queries</em> for its responsive flexbox, grid, and visibility classes.</strong></p>
   <p>All “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see <a class="t-blue t-600 hover:t-700" href="https://caniuse.com/?search=container">Can I use Container Queries</a>) since September 2023. See <a class="t-blue t-600 hover:t-700" href="/baselayer-3/layout/#container-query-powered-layouts">container query powered layouts</a>.</p>
-  <p class="mb-0">If you would rather use media queries for these utility classes, or if you need to support older (pre-container query) browsers a while longer, this is easy to do: in <code class="t-black bg-blue bg-200">layout.css</code> simply do a search-and-replace <code class="t-black bg-blue bg-200">@container → @media</code> (and then you don’t need to use Baselayer’s <code class="t-black bg-blue bg-200">container</code> context class).</p>
+  <p class="mb-0">If you would rather use media queries for these utility classes, or if you need to support older (pre-container query) browsers a while longer, this is easy to do: in <code class="t-black bg-blue bg-200">layout.css</code> simply do a search-and-replace <code class="t-black bg-blue bg-200">@container → @media</code> (and then you don’t need to use Baselayer’s <a class="t-blue t-600 hover:t-700" href="/baselayer-3/layout/#container-query-powered-layouts">container</a> context class).</p>
 </div>
 
 ## Introduction

_src/layout.md

@@ -147,7 +147,7 @@ There are three `@container` variants for `flex`, `grid`, and `hidden` classes c
 * `lg:` (1280px)
 
 <div aria-label="Note" class="popout mb-2 bl-3 b-orange b-300 p-2 t-black bg-orange bg-100">
-  Layout classes with <code>sm:</code>, <code>md:</code>, and <code>lg:</code> prefixes do not work unless they are inside of a <code>container</code>.
+  Layout classes with <code class="t-black bg-blue bg-200">sm:</code>, <code class="t-black bg-blue bg-200">md:</code>, and <code class="t-black bg-blue bg-200">lg:</code> prefixes do not work unless they are inside of a <code class="t-black bg-blue bg-200">container</code>.
 </div>
 
 You can place the `container` class on e.g.:

docs/index.html

@@ -330,7 +330,7 @@ <h1 class="t-semibold">Baselayer 3 is a powerful, modern, tiny CSS library</h1>
                 <div aria-label="Note" class="popout mb-2 bl-3 b-blue b-300 p-2 t-black bg-blue bg-100">
   <p><strong>Baselayer 3 v.1.2.x uses <em>container queries</em> for its responsive flexbox, grid, and visibility classes.</strong></p>
   <p>All “evergreen” browsers (Chrome, Edge, Firefox, Safari) have capability for the new CSS Container Queries (see <a class="t-blue t-600 hover:t-700" href="https://caniuse.com/?search=container">Can I use Container Queries</a>) since September 2023. See <a class="t-blue t-600 hover:t-700" href="/baselayer-3/layout/#container-query-powered-layouts">container query powered layouts</a>.</p>
-  <p class="mb-0">If you would rather use media queries for these utility classes, or if you need to support older (pre-container query) browsers a while longer, this is easy to do: in <code class="t-black bg-blue bg-200">layout.css</code> simply do a search-and-replace <code class="t-black bg-blue bg-200">@container → @media</code> (and then you don’t need to use Baselayer’s <code class="t-black bg-blue bg-200">container</code> context class).</p>
+  <p class="mb-0">If you would rather use media queries for these utility classes, or if you need to support older (pre-container query) browsers a while longer, this is easy to do: in <code class="t-black bg-blue bg-200">layout.css</code> simply do a search-and-replace <code class="t-black bg-blue bg-200">@container → @media</code> (and then you don’t need to use Baselayer’s <a class="t-blue t-600 hover:t-700" href="/baselayer-3/layout/#container-query-powered-layouts">container</a> context class).</p>
 </div>
 <h2 id="introduction" tabindex="-1">Introduction</h2>
 <p class="t-big">Designed as a good place to start, Baselayer may be all you need — for small static websites and blogs. Or you may use it as a <em>baselayer</em> to quick-start your mega project.</p>

docs/layout/index.html

@@ -435,7 +435,7 @@ <h2 id="container-query-powered-layouts" tabindex="-1">Container query powered l
 <li><code>lg:</code> (1280px)</li>
 </ul>
 <div aria-label="Note" class="popout mb-2 bl-3 b-orange b-300 p-2 t-black bg-orange bg-100">
-  Layout classes with <code>sm:</code>, <code>md:</code>, and <code>lg:</code> prefixes do not work unless they are inside of a <code>container</code>.
+  Layout classes with <code class="t-black bg-blue bg-200">sm:</code>, <code class="t-black bg-blue bg-200">md:</code>, and <code class="t-black bg-blue bg-200">lg:</code> prefixes do not work unless they are inside of a <code class="t-black bg-blue bg-200">container</code>.
 </div>
 <p>You can place the <code>container</code> class on e.g.:</p>
 <ul>