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 class="hidden select-none mx-auto md:flex justify-between items-center px-6 py-3.5 text-md md:text-lg leading-6">
        <div class="flex items-center space-x-8">
        <a href="https://git.mami2.moe/akemi/noway.moe" target="_blank">
            <span class="sr-only">Forgejo</span>
            <svg class="forgejo-logo" viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
                <style>
                    .cls-1{fill:#000;}
                    svg.forgejo-logo path{stroke-width: 25}
                    svg.forgejo-logo circle{stroke-width: 15}
                    svg.forgejo-logo .light{fill: none; stroke: #aaa;}
                    svg.forgejo-logo .dark{fill: none; stroke: #000;}
                    svg.forgejo-logo:hover .light{stroke: var(--accent-color);}
                </style>
                <g transform="translate(6,6)">
                    <path class="light" d="M58 168 v-98 a50 50 0 0 1 50-50 h20" />
                    <path class="dark" d="M58 168 v-30 a50 50 0 0 1 50-50 h20" />
                    <circle class="light" cx="142" cy="20" r="18" />
                    <circle class="dark" cx="142" cy="88" r="18" />
                    <circle class="dark" cx="58" cy="180" r="18" />
                </g>
            </svg>
        </a>
            <HeaderLink href="/">Home</HeaderLink>
            <HeaderLink href="/blog">Blog</HeaderLink>
            <HeaderLink href="/about">About</HeaderLink>
        </div>
        <div class="fun-quote" style="margin: 0">
            <span style="font-family: PoetsenOne" class="text-2xl">ReLUwU activated</span>
        </div>
        <div class="social-links flex space-x-8 items-center">
            <HeaderLink href="/about">Discord</HeaderLink>
            <HeaderLink href="/about">GitHub</HeaderLink>
            <HeaderLink
                style="color:white;background-color:black;border-radius:8px;border:2px solid black;padding:2px 8px;text-decoration:none;"
                href="/">
                Resume
            </HeaderLink>
        </div>
    </nav>
</header>

<!--
<style>
    header {
        margin: 0;
        padding: 0 1em;
        background: white;
        box-shadow: 0 2px 8px rgba(var(--black), 5%);
    }
    h2 {
        margin: 0;
        font-size: 1em;
    }

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