<script>
	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 href="/">
		<picture class="logo">
			<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 />
	<a href="/portfolio">Blog</a>
	<a href="/portfolio">Portfolio</a>
</header>

<style>
	header {
		max-width: calc(var(--size-container) * 2);
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 4rem;
		gap: 2rem;
	}

	.logo {
		width: 12rem;
	}
</style>
