Restyle figures and captions (#4276)

* Change 11ty/liquid script to wrap the auto-generated "Figure X" in a
`<span>`
* Add CSS overrides
* Add vertical line at margin that spans the indent of the image and
caption


[preview](https://deploy-preview-4276--wcag2.netlify.app/understanding/non-text-contrast)

Closes #4241

---------

Co-authored-by: Mike Gower <mikegower@gmail.com>

Author: patrickhlauke

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.find("p").first().prepend(`<span>Figure ${i + 1}.</span> `);
           });
 
           // Remove spurious copy-pasted content in 2.5.3 that doesn't belong there

css/base.css

@@ -430,6 +430,26 @@ margin-right:.8em;
   margin-left: 2em;
 }
 
+/* overrides for restyled figures and captions */
+
+figure {
+  margin: 2em 0;
+	padding-left: 1em;
+	border-left: 2px solid var(--cloudy);
+}
+
+figure img,
+figure video,
+figure svg {
+	border: 1px solid var(--line-grey);
+}
+
+figcaption {
+	font-weight: initial;
+	border-bottom: initial;
+  font-size: 0.9rem;
+}
+
 @media (max-width: 35em) {
 	.nav-container {
 		padding: 0;
@@ -438,7 +458,7 @@ margin-right:.8em;
 		display: inline-block;
 		width: calc(100% - 2em);
 	}
-	@supports (display:gred) {
+	@supports (display:grid) {
 		#site-header {
 			padding-left: 0;
 		}