---
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="/">~/</HeaderLink>
			<HeaderLink href="/blog">~/blog</HeaderLink>
			<HeaderLink href="/about">~/about</HeaderLink>
		</div>
		<div class="social-links">
		<a href="https://code.polsevev.dev" target="_blank" >
			<span class="sr-only">My Github?</span>
			<img src="/svg/Forgejo_logo.svg"/>
			<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github" ></svg>
		</a>
		</div>
	</nav>
</header>
<style>
	header {
		padding: 0.5em 0.5em 0.5em 0.5em;
		background-color: rgb(198, 60, 81);
		box-shadow: 0 2px 8px rgba(var(--black), 5%);
		border-radius: 10px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 2rem;
		margin-bottom: 2rem;
		color: white;
		width: 90%;
		max-width: 1000px;
	}
	h2 {
		margin: 0;
		font-size: 1em;
		color: white;
	}

	h2 a,
	h2 a.active {
		text-decoration: none;
	}
	nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	nav a {
		padding: 0.5em 0.5em;
		color: var(--black);
		border-bottom: 4px solid transparent;
		text-decoration: none;
	}
	img{
		background-color: white;
		padding: 5px;
	}
	nav a.active {
		text-decoration: none;
		border-bottom-color: cyan;
	}
	.social-links,
	.social-links a {
		display: flex;
	}
	@media (max-width: 720px) {
		.social-links {
			display: none;
		}
		nav a {
			padding: 0.2em 0.2em;
		}
	}
</style>
