From c2077e94a5ce0644d8c05ead8da67e887ab3ebb7 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 13 Mar 2025 23:00:19 +0000
Subject: [PATCH 1/4] Restyle figure captions

* Change 11ty/liquid script to wrap the auto-generated "Figure X" in a `<span>`
* Add CSS overrides

Closes https://github.com/w3c/wcag/issues/4241
---
 11ty/CustomLiquid.ts |  2 +-
 css/base.css         | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/11ty/CustomLiquid.ts b/11ty/CustomLiquid.ts
index b8f550f022..33d212faa7 100644
--- a/11ty/CustomLiquid.ts
+++ b/11ty/CustomLiquid.ts
@@ -243,7 +243,7 @@ export class CustomLiquid extends Liquid {
           $("figcaption").each((i, el) => {
             const $el = $(el);
             if (!$el.find("p").length) $el.wrapInner("<p></p>");
-            $el.prepend(`Figure ${i + 1}`);
+            $el.prepend(`<span>Figure ${i + 1}</span>`);
           });
 
           // Remove spurious copy-pasted content in 2.5.3 that doesn't belong there
diff --git a/css/base.css b/css/base.css
index 25a82c2c1f..372173e5a8 100644
--- a/css/base.css
+++ b/css/base.css
@@ -430,6 +430,25 @@ margin-right:.8em;
   margin-left: 2em;
 }
 
+/* overrides for restyled figure captions */
+
+figure {
+  margin: 2em 0;
+}
+
+figcaption {
+	font-weight: initial;
+	border-bottom: initial;
+  font-size: 0.9rem;
+  padding-left: 1em;
+  border-left: 2px solid #005a9c;
+  border-left: 2px solid var(--w3c-classic);
+}
+
+figcaption > span {
+  font-weight: bold;
+}
+
 @media (max-width: 35em) {
 	.nav-container {
 		padding: 0;
@@ -438,7 +457,7 @@ margin-right:.8em;
 		display: inline-block;
 		width: calc(100% - 2em);
 	}
-	@supports (display:gred) {
+	@supports (display:grid) {
 		#site-header {
 			padding-left: 0;
 		}

From fb9d9732bf5a4878387d18be5e1d30c87c55ea33 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 13 Mar 2025 23:09:05 +0000
Subject: [PATCH 2/4] Optional: add light gray border around figure images
 themselves

---
 css/base.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/css/base.css b/css/base.css
index 372173e5a8..bf79a65cfc 100644
--- a/css/base.css
+++ b/css/base.css
@@ -430,18 +430,23 @@ margin-right:.8em;
   margin-left: 2em;
 }
 
-/* overrides for restyled figure captions */
+/* overrides for restyled figures and captions */
 
 figure {
   margin: 2em 0;
 }
 
+figure img,
+figure video,
+figure svg {
+	border: 1px solid var(--line-grey);
+}
+
 figcaption {
 	font-weight: initial;
 	border-bottom: initial;
   font-size: 0.9rem;
   padding-left: 1em;
-  border-left: 2px solid #005a9c;
   border-left: 2px solid var(--w3c-classic);
 }
 

From 584b016eed50207cc8d864efa5ff453fe9dfec2e Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Fri, 21 Mar 2025 19:37:52 +0000
Subject: [PATCH 3/4] Inline "Figure", move border back to bottom

---
 11ty/CustomLiquid.ts | 2 +-
 css/base.css         | 8 ++------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/11ty/CustomLiquid.ts b/11ty/CustomLiquid.ts
index 33d212faa7..d2577cdd24 100644
--- a/11ty/CustomLiquid.ts
+++ b/11ty/CustomLiquid.ts
@@ -243,7 +243,7 @@ export class CustomLiquid extends Liquid {
           $("figcaption").each((i, el) => {
             const $el = $(el);
             if (!$el.find("p").length) $el.wrapInner("<p></p>");
-            $el.prepend(`<span>Figure ${i + 1}</span>`);
+            $el.find("p").first().prepend(`<span>Figure ${i + 1}.</span> `);
           });
 
           // Remove spurious copy-pasted content in 2.5.3 that doesn't belong there
diff --git a/css/base.css b/css/base.css
index bf79a65cfc..2869bb09ca 100644
--- a/css/base.css
+++ b/css/base.css
@@ -446,12 +446,8 @@ figcaption {
 	font-weight: initial;
 	border-bottom: initial;
   font-size: 0.9rem;
-  padding-left: 1em;
-  border-left: 2px solid var(--w3c-classic);
-}
-
-figcaption > span {
-  font-weight: bold;
+  padding-bottom: 1em;
+  border-bottom: 1px solid var(--cloudy);
 }
 
 @media (max-width: 35em) {

From b8b0fdd6751810be16401c248bf2c3fbe6acb4da Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 6 Apr 2025 21:18:19 +0100
Subject: [PATCH 4/4] Move border to left-hand side of figure

---
 css/base.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/base.css b/css/base.css
index 2869bb09ca..be7d1dd2e0 100644
--- a/css/base.css
+++ b/css/base.css
@@ -434,6 +434,8 @@ margin-right:.8em;
 
 figure {
   margin: 2em 0;
+	padding-left: 1em;
+	border-left: 2px solid var(--cloudy);
 }
 
 figure img,
@@ -446,8 +448,6 @@ figcaption {
 	font-weight: initial;
 	border-bottom: initial;
   font-size: 0.9rem;
-  padding-bottom: 1em;
-  border-bottom: 1px solid var(--cloudy);
 }
 
 @media (max-width: 35em) {