Add title and styling to examples (#4093)

Fixes #2958

Change styling for examples within the Key Terms section to include text
to indicate it is an example and a background change to make it stand
out.

<img width="930" alt="example of styling for key terms example"
src="https://github.com/user-attachments/assets/3d935218-4475-4d21-b856-bec20ab9a379">

---------

Co-authored-by: Kenneth G. Franqueiro <kfranqueiro@users.noreply.github.com>

Author: iadawn

11ty/CustomLiquid.ts

@@ -507,6 +507,12 @@ export class CustomLiquid extends Liquid {
 				<p>${$el.html()}</p>
 			</div>`);
     });
+    
+    // Add header to example sections in Key Terms (aside) and Conformance (div)
+    $("aside.example, div.example").each((_, el) => {
+      const $el = $(el);
+      $el.prepend(`<p class="example-title marker">Example</p>`);
+    });
 
     // We don't need to do any more processing for index/about pages other than stripping comments
     if (indexPattern.test(scope.page.inputPath)) return stripHtmlComments($.html());

css/base.css

@@ -155,6 +155,19 @@ dt div {
   margin-top: 0;
 }
 
+:is(aside, div).example .example-title {
+	font-weight: bold;
+	margin: 0;
+}
+:is(aside, div).example {
+	padding: 1em 1em 0.5em 1em;
+	margin-bottom: 1em;
+	border-left-width: .5em;
+	border-left-style: solid;
+	border-color: #e0cb52;
+	background: #fcfaee
+}
+
 .obsolete {
   border-left: solid 5px var(--faded-red);
 }