From 73a1254852646d8ccf35575811e8a1b816cfa25d Mon Sep 17 00:00:00 2001
From: Simon Padbury <simon.padbury@icloud.com>
Date: Thu, 9 May 2024 12:18:17 +0100
Subject: [PATCH] v.3.3.0

---
 _src/layout.md         | 14 ++++++++------
 docs/layout/index.html | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/_src/layout.md b/_src/layout.md
index 23dad31..d2e38fb 100644
--- 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
index 8ccb45f..7c079e6 100644
--- 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>