<script>
	import Button from '$lib/Button.svelte';
	import Spacer from '$lib/Spacer.svelte';

	import Avif from './logo.avif';
	import Jpeg from './logo.avif?format=jpeg';
	import WebP from './logo.avif?format=webp';
</script>

<header>
	<a class="logo" href="/">
		<picture>
			<source srcset={Avif} type="image/avif" />
			<source srcset={WebP} type="image/webp" />
			<img
				src={Jpeg}
				class="circle"
				alt="A stylized representation of the letters 'KBG'. The letters are intertwined with wavy lines and have a modern, digital aesthetic. The color palette consists of shades of blue, orange, and white."
			/>
		</picture>
	</a>
	<Spacer />
	<Button href="/posts/">Blog</Button>
	<Button href="/portfolio/">Portfolio</Button>
</header>

<style lang="scss">
	@import '../vars';

	header {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 4rem;
		gap: 2rem;
		margin-bottom: -3rem;
	}
	@media (max-width: $size-container) {
		header {
			margin-bottom: unset;
		}
	}

	.logo {
		width: 12rem;
		align-self: flex-start;
	}
	.logo picture {
		min-width: 6rem;
		min-height: 3rem;
	}
</style>
