---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../consts';
---

<header>
	<nav>
		<h2><a href="/">{SITE_TITLE}</a></h2>
		<div class="internal-links">
			<HeaderLink href="/">Home</HeaderLink>
			<HeaderLink href="/blog">Blog</HeaderLink>
			<HeaderLink href="https://8bit.frop.prof">8bit</HeaderLink>
		</div>
		<div class="social-links">
			<a href="/rss.xml" target="_blank">
				<span class="sr-only">RSS Feed</span>
				<svg viewBox="0 0 20 20" aria-hidden="true" width="32" height="32"
					><path
						fill="currentColor"
						d="M14.92 18H18C18 9.32 10.82 2.25 2 2.25v3.02c7.12 0 12.92 5.71 12.92 12.73zm-5.44 0h3.08C12.56 12.27 7.82 7.6 2 7.6v3.02c2 0 3.87.77 5.29 2.16C8.7 14.17 9.48 16.03 9.48 18zm-5.35-.02c1.17 0 2.13-.93 2.13-2.09 0-1.15-.96-2.09-2.13-2.09-1.18 0-2.13.94-2.13 2.09 0 1.16.95 2.09 2.13 2.09z"
					></path></svg
				>
			</a>
		</div>
	</nav>
</header>
<style>
	header {
		margin: 0;
		padding: 0 1em;
		background: white;
	}
	h2 {
		margin: 0;
		font-size: 1em;
	}
	h2 a,
	h2 a.active {
		text-decoration: none;
	}
	nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	nav a {
		padding: 0.25em 0.5em;
		color: rgb(var(--black));
		text-decoration: none;
	}
	nav .internal-links a.active {
		color: var(--accent);
		text-decoration: none;
	}
	.social-links,
	.social-links a {
		display: flex;
	}
	.social-links a {
		padding: 0.25em;
	}
	.social-links a svg {
		height: 25px;
	}
	@media (max-width: 720px) {
		.social-links {
			display: none;
		}
	}
</style>
