Restyle doclinks box (#4590)

Apply proposed styles from
#1130 (comment)

Closes #1130

Live preview:
https://deploy-preview-4590--wcag2.netlify.app/guidelines/#text-alternatives

---------

Co-authored-by: Kenneth G. Franqueiro <kfranqueiro@users.noreply.github.com>
Co-authored-by: Mike Gower <mikegower@gmail.com>
(cherry picked from commit a3fc8d8)

Author: 3 people

guidelines/guidelines.css

@@ -29,11 +29,17 @@ dd.new, dd.proposed, dd.changed {
 }
 .doclinks {
 	float: right;
-	border: thin solid black;
-	font-size: x-small;
+	border: thin solid #aaa;
+    background: #ecf2f7;
+	font-size: small;
 	display: block;
 	width: 25%;
 	hyphens: none;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    margin: -0.5em 0 1em 2em;
 }
 .sc dt {
 	display: list-item;

script/wcag.js

@@ -25,7 +25,8 @@ function linkUnderstanding() {
 		var pathFrag = titleToPathFrag(heading);
 		var el = document.createElement("div");
 		el.setAttribute("class", "doclinks");
-		el.innerHTML = "<a href=\"" + understandingBaseURI + pathFrag + ".html\">Understanding " + heading + "</a> <span class=\"screenreader\">|</span> <br /><a href=\"https://www.w3.org/WAI/WCAG" + version + "/quickref/#" + pathFrag + "\">How to Meet " + heading + "</a>";
+		el.innerHTML = "<a href=\"" + understandingBaseURI + pathFrag + ".html\">Understanding " + heading +
+			"</a> <span class=\"screenreader\">|</span> <a href=\"https://www.w3.org/WAI/WCAG" + version + "/quickref/#" + pathFrag + "\">How to Meet " + heading + "</a>";
 		if (node.className = "sc") node.insertBefore(el, node.children[2]);
 		if (node.className = "guideline") node.insertBefore(el, node.children[1]);
 	})