v.3.3.0

SimonPadbury · May 9, 2024 · 73a1254 · 73a1254
1 parent 19155ab
commit 73a1254
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/_src/layout.md b/_src/layout.md
@@ -618,12 +618,14 @@ Sometimes you need to expand a panel more than as is done in the popout above. Y
 
 Example “poster” infographic panel using `expand` (and showing how Baselayer’s [aspect ratio](#aspect-ratios) utilities work):
 
-<div class="expand mt-2 mb-3 aspect-ratio-16x9 flex flex-center flex-middle relative">
-  <svg xmlns="http://www.w3.org/2000/svg" class="absolute box img-cover" preserveAspectRatio="xMidYMid slice" width="1000" height="600"><defs><linearGradient id="gradient1" gradientTransform="rotate(45)"><stop offset="5%" stop-color="rgba(255,255,0,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(255,0,0,.5)"/></linearGradient><linearGradient id="gradient2" gradientTransform="rotate(135)"><stop offset="5%" stop-color="rgba(0,0,255,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(0,255,0,.5)"/></linearGradient></defs><rect width="100%" height="100%" fill="url('#gradient1')"/><rect width="100%" height="100%" fill="url('#gradient2')"/></svg>
-  <div class="z-1 w-sm p-3">
-    <div>
-      <p class="h1 t-bold">This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.</p>
-      <p class="h1 t-bold">See what it does on a small viewport width (e.g. phone).</p>
+<div class="expand mt-2 mb-3">
+  <div class="aspect-ratio-16x9 flex flex-center flex-middle relative">
+    <svg xmlns="http://www.w3.org/2000/svg" class="absolute box img-cover" preserveAspectRatio="xMidYMid slice" width="1000" height="600"><defs><linearGradient id="gradient1" gradientTransform="rotate(45)"><stop offset="5%" stop-color="rgba(255,255,0,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(255,0,0,.5)"/></linearGradient><linearGradient id="gradient2" gradientTransform="rotate(135)"><stop offset="5%" stop-color="rgba(0,0,255,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(0,255,0,.5)"/></linearGradient></defs><rect width="100%" height="100%" fill="url('#gradient1')"/><rect width="100%" height="100%" fill="url('#gradient2')"/></svg>
+    <div class="z-1 w-sm p-3">
+      <div>
+        <p class="h1 t-bold">This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.</p>
+        <p class="h1 t-bold">See what it does on a small viewport width (e.g. phone).</p>
+      </div>
     </div>
   </div>
 </div>

diff --git a/docs/layout/index.html b/docs/layout/index.html
@@ -827,12 +827,14 @@ <h3 id="popout-panels" tabindex="-1">Popout panels</h3>
 <h3 id="expanded-panels" tabindex="-1">Expanded panels</h3>
 <p>Sometimes you need to expand a panel more than as is done in the popout above. You can do this using the <code>expand</code> class, that makes an immediate child of <code>container-grid</code> to span the middle 5 columns (2 to 6).</p>
 <p>Example “poster” infographic panel using <code>expand</code> (and showing how Baselayer’s <a href="#aspect-ratios">aspect ratio</a> utilities work):</p>
-<div class="expand mt-2 mb-3 aspect-ratio-16x9 flex flex-center flex-middle relative">
-  <svg xmlns="http://www.w3.org/2000/svg" class="absolute box img-cover" preserveAspectRatio="xMidYMid slice" width="1000" height="600"><defs><linearGradient id="gradient1" gradientTransform="rotate(45)"><stop offset="5%" stop-color="rgba(255,255,0,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(255,0,0,.5)"/></linearGradient><linearGradient id="gradient2" gradientTransform="rotate(135)"><stop offset="5%" stop-color="rgba(0,0,255,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(0,255,0,.5)"/></linearGradient></defs><rect width="100%" height="100%" fill="url('#gradient1')"/><rect width="100%" height="100%" fill="url('#gradient2')"/></svg>
-  <div class="z-1 w-sm p-3">
-    <div>
-      <p class="h1 t-bold">This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.</p>
-      <p class="h1 t-bold">See what it does on a small viewport width (e.g. phone).</p>
+<div class="expand mt-2 mb-3">
+  <div class="aspect-ratio-16x9 flex flex-center flex-middle relative">
+    <svg xmlns="http://www.w3.org/2000/svg" class="absolute box img-cover" preserveAspectRatio="xMidYMid slice" width="1000" height="600"><defs><linearGradient id="gradient1" gradientTransform="rotate(45)"><stop offset="5%" stop-color="rgba(255,255,0,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(255,0,0,.5)"/></linearGradient><linearGradient id="gradient2" gradientTransform="rotate(135)"><stop offset="5%" stop-color="rgba(0,0,255,.5)"/><stop offset="50%" stop-color="rgba(255,255,255,0)"/><stop offset="95%" stop-color="rgba(0,255,0,.5)"/></linearGradient></defs><rect width="100%" height="100%" fill="url('#gradient1')"/><rect width="100%" height="100%" fill="url('#gradient2')"/></svg>
+    <div class="z-1 w-sm p-3">
+      <div>
+        <p class="h1 t-bold">This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.</p>
+        <p class="h1 t-bold">See what it does on a small viewport width (e.g. phone).</p>
+      </div>
     </div>
   </div>
 </div>