<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title><%= metadata.title %></title>

	<link rel="canonical" href="https://shadowfacts.net<%= metadata.permalink %>">
	<link rel="alternate" type="application/rss+xml" title="Shadowfacts" href="https://shadowfacts.net/feed.xml">

	<link rel="icon" href="/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">
	<meta name="msapplication-TileColor" content="#F9C72F">
	<meta name="msapplication-TileImage" content="/favicon-152.png">

	<meta name="twitter:card" content="summary" />
	<meta name="twitter:creator" content="@ShadowfactsDev" />
	<meta property="og:title" content="<%= metadata.title %>" />
	<% if (metadata.shortDesc) { %>
		<meta property="og:type" content="article" />
		<meta property="og:description" content="<%= metadata.shortDesc %>" />
	<% } else { %>
		<meta property="og:type" content="website" />
		<meta property="og:description" content="Just my various ramblings." />
	<% } %>
	<meta property="og:image" content="https://shadowfacts.net/shadowfacts.png" />
	<meta property="og:url" content="https://shadowfacts.net<%= metadata.permalink %>" />
	<meta property="og:site_name" content="Shadowfacts" />

	<script>
		(() => {
			const theme = localStorage.getItem("theme") || "auto";
			document.write(`<link rel="stylesheet" href="/css/${theme}.css?<%= stylesheetCacheBuster %>">`);
		})();
	</script>
	<noscript>
		<link rel="stylesheet" href="/css/auto.css?<%= stylesheetCacheBuster %>">
	</noscript>
</head>
<body itemscope itemtype="https://schema.org/Blog">
	<header class="site-header container">
		<div>
			<div>
				<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
				<p class="site-description">The outer part of a shadow is called the penumbra.</p>
			</div>
			<nav class="site-nav" role="navigation">
				<ul>
					<li><%- fancyLink("Archive", "/archive/") %></li>
					<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
					<li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
					<li>
						<a href="#" class="dropdown-link" aria-haspopup="true">Other <span class="arrow arrow-down" aria-hidden="true"></span></a>
						<ul aria-label="other links">
							<li><%- fancyLink("Gitea", "https://git.shadowfacts.net") %></li>
							<li><%- fancyLink("Maven", "https://maven.shadowfacts.net") %></li>
							<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
							<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
	</header>

	<div class="container" role="main">
		<%- content %>
	</div>

	<footer class="site-footer container">
		<h2 class="site-title">Shadowfacts</h2>
		<span class="ui-controls">
			Theme:
			<input type="radio" name="theme" id="auto" value="auto">
			<label for="auto">auto</label>
			<input type="radio" name="theme" id="light" value="light">
			<label for="light">light</label>
			<input type="radio" name="theme" id="dark" value="dark">
			<label for="dark">dark</label>
		</span>
		<nav class="social-links">
			<ul>
				<li><%- fancyLink("Email", "mailto:me@shadowfacts.net", "rel=me") %></li>
				<li><%- fancyLink("RSS", "/feed.xml") %></li>
				<li><%- fancyLink("GitHub", "https://github.com/shadowfacts", "rel=me") %></li>
				<li><%- fancyLink("Twitter", "https://twitter.com/ShadowfactsDev", "rel=me") %></li>
				<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li>
			</ul>
		</nav>
		<aside class="webring">
			<a href="https://metro.bieszczady.pl">Metro Bieszczady webring</a>
<a title="previous page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/previous?from=shadowfacts">←</a>
<a title="next page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/next?from=shadowfacts">→</a>
		</aside>

		<script>
			(() => {
				const theme = localStorage.getItem("theme") || "auto";
				document.getElementsByName("theme").forEach((el) => {
					el.checked = theme === el.value;
					el.onchange = () => {
						localStorage.setItem("theme", el.value);
						window.location.reload();
					};
				});
			})();
		</script>
		<noscript>
			<style>
				.ui-controls {
					display: none;
				}
			</style>
		</noscript>
	</footer>

</body>
</html>
