updates for new svg view/download links

extras/components/outline-button.js

@@ -116,9 +116,16 @@
 		const outline = [ ];
 
 		for (const heading of headings) {
+			const content = heading.cloneNode(true);
+			const anchor = content.querySelector('a.heading-anchor');
+
+			if (anchor) {
+				anchor.parentNode.removeChild(anchor);
+			}
+
 			outline.push(`
 			<li data-depth="${heading.tagName.toLowerCase()}">
-				<a href="#${heading.id}">${heading.innerText}</a>
+				<a href="#${heading.id}">${content.innerHTML}</a>
 			</li>
 			`);
 		}

extras/components/outline-inline.js

@@ -92,9 +92,16 @@
 		const outline = [ ];
 
 		for (const heading of headings) {
+			const content = heading.cloneNode(true);
+			const anchor = content.querySelector('a.heading-anchor');
+
+			if (anchor) {
+				anchor.parentNode.removeChild(anchor);
+			}
+
 			outline.push(`
 			<li data-depth="${heading.tagName.toLowerCase()}">
-				<a href="#${heading.id}">${heading.innerText}</a>
+				<a href="#${heading.id}">${content.innerHTML}</a>
 			</li>
 			`);
 		}

extras/svg-links.js

@@ -0,0 +1,58 @@
+(() => {
+	
+	if (document.readyState === 'complete') {
+		add_svg_links();
+	}
+
+	else {
+		window.addEventListener('DOMContentLoaded', add_svg_links);
+	}
+
+	function add_svg_links() {
+		const svg_elems = document.querySelectorAll('figure > svg');
+
+		for (const svg_elem of svg_elems) {
+			const figure_elem = svg_elem.parentElement;
+			const anchor_elem = document.createElement('a');
+			const lang = figure_elem.getAttribute('data-lang') || '';
+
+			let svg_html;
+
+			if ('svg_link_css' in window) {
+				const svg_clone = svg_elem.cloneNode(true);
+				const style_elem = document.createElement('style');
+				svg_clone.insertBefore(style_elem, svg_clone.firstChild);
+
+				const css
+					= (window.svg_link_css['*'] || '')
+					+ (lang ? window.svg_link_css[lang] || '' : '');
+	
+				style_elem.setAttribute('type', 'text/css');
+				style_elem.appendChild(document.createTextNode(css));
+
+				svg_html = svg_clone.outerHTML;
+			}
+
+			else {
+				svg_html = svg_elem.outerHTML;
+			}
+			
+			const box = document.createElement('div');
+			const svg_xml = '<?xml version="1.0" standalone="no" ?>\r\n'
+				+ svg_html.replace(/(&(?!(amp|gt|lt|quot|apos))[^;]+;)/g, ($0, $1) => {
+					box.innerHTML = $0;
+					return box.textContent;
+				});
+
+			const svg_blob = new Blob([ svg_xml ], { type: 'image/svg+xml; charset=utf-8' });
+			const svg_object_url = URL.createObjectURL(svg_blob);
+
+			anchor_elem.href = svg_object_url;
+			anchor_elem.className = 'view-svg';
+			anchor_elem.textContent = 'View / Download Graphic';
+
+			figure_elem.insertBefore(anchor_elem, svg_elem);
+		}
+	}
+
+})();

extras/typography/compact.css

@@ -66,3 +66,13 @@ dd + dt {
 	margin-block-start: 0;
 	margin-block-end: 0.15rem;
 }
+
+
+
+
+
+/* ===== Figure Captions ===== */
+
+figcaption {
+	margin-block-start: 1.5rem;
+}

extras/typography/general.css

@@ -326,7 +326,6 @@ figcaption {
 	font-family: var(--font-body);
 	text-align: center;
 	font-size: 0.85rem;
-	margin-block-start: 1rem;
 	color: var(--theme-text-light);
 	max-width: 60vw;
 	margin-inline: auto;

extras/typography/spacious.css

@@ -65,3 +65,13 @@ dd + dt {
 	margin-block-start: 0;
 	margin-block-end: 0.25rem;
 }
+
+
+
+
+
+/* ===== Figure Captions ===== */
+
+figcaption {
+	margin-block-start: 2rem;
+}