HeadCommon.astro

---
import '@fontsource/ibm-plex-mono/400.css';
import '@fontsource/ibm-plex-mono/400-italic.css';
---
<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="hsl(256, 44%, 15%)" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="hsl(273, 37%, 93%)" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
<link rel="sitemap" href="/sitemap-index.xml" />

<!-- Global CSS -->
<link rel="stylesheet" href="/theme.css" />
<link rel="stylesheet" href="/index.css" />

<!-- Scrollable a11y code helper -->
<script type="module" src="/make-scrollable-code-focusable.js"></script>

<!-- This is intentionally inlined to avoid FOUC -->
<script>
	const root = document.documentElement;
	const theme = localStorage.getItem('theme');
	if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
		root.classList.add('theme-dark');
	} else {
		root.classList.remove('theme-dark');
	}
</script>

<!-- Double-click to highlight code blocks (inline only). -->
<script>
	document.addEventListener('dblclick', (el) => {
		if (el.target.nodeName !== 'CODE') {
			return;
		}
		if (el.target.parentElement.nodeName === 'PRE') {
			return;
		}
		let range = new Range();
		range.setStart(el.target, 0);
		range.setEnd(el.target, 1);
		document.getSelection().removeAllRanges();
		document.getSelection().addRange(range);
	});
</script>
<!-- Fathom - beautiful, simple website analytics -->
<script src="https://certain-quality.astro.build/script.js" data-site="EZBHTSIG" defer></script>