53 lines
1.1 KiB
Svelte
53 lines
1.1 KiB
Svelte
<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>
|