noway.moe/src/components/Header.astro

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

<header style="width: 100%" class="font-sans sticky top-0 md:static bg-white underline-offset-4 z-40">
    <nav>
        <div class="flex items-center space-x-8">
            <HeaderLink href="/"><img src="/akemi_silly_transparent.png" /></HeaderLink>
            <HeaderLink href="/blog">Blog</HeaderLink>
            <HeaderLink href="/unix">Unix</HeaderLink>
        </div>
        <div class="fun-quote" style="margin: 0">
            <span style="font-family: var(--font-title);" class="text-2xl">ReLUwU activated</span>
        </div>
        <div class="social-links flex space-x-8 items-center">
            <HeaderLink
                href="https://discord.com/users/180472559148597249">
                Discord
            </HeaderLink>
            <HeaderLink href="https://github.com/aizuko">GitHub</HeaderLink>
            <HeaderLink
                class="inverted-button"
                target="_blank"
                href="/akemi_resume.pdf">
                Resume
            </HeaderLink>
        </div>
    </nav>
</header>

<style>
    header nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 24px;
        font-size: 1.125rem;
        user-select: none;
        justify-items: center;
        align-items: center;
    }
    header nav div {
        display: flex;
        flex: 1;
        justify-content: center;
    }
    header nav div:first-child {
        justify-content: flex-start;
    }
    header nav div:last-child {
        justify-content: flex-end;
    }
    header nav img {
        height: 48px;
    }
</style>