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

<header>
    <nav>
        <h2><a href="/">{SITE_TITLE}</a></h2>
        <div class="internal-links">
            <HeaderLink href="/">Home</HeaderLink>
            <HeaderLink href="/blog">Blog</HeaderLink>
            <HeaderLink href="/about">About</HeaderLink>
        </div>
        <div class="social-links">
          <a href="https://discord.com/users/180472559148597249" target="_blank">
                <span class="sr-only">Discord</span>
                <svg width="32" height="32" viewBox="0 0 127.14 96.36">
                    <path
                        d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
                </svg>
            </a>
            <a href="https://anilist.co/user/akemiko" target="_blank">
                <span class="sr-only">Anilist</span>
                <svg width="32px" height="32px" viewBox="0 0 32 32">
                    <g id="surface1">
                        <rect rx="8" x="0" y="0" width="32" height="32" style="fill:#000;fill-opacity:1;stroke:none;"/>
                        <path
                            style="stroke:none;fill-rule:nonzero;fill:#aaa;fill-opacity:1;"
                            d="M 20.121094 20.203125 L 20.121094 8.539062 C 20.121094 7.867188 19.753906 7.5 19.085938 7.5 L 16.808594 7.5 C 16.140625 7.5 15.773438 7.867188 15.773438 8.539062 L 15.773438 14.078125 C 15.773438 14.234375 17.273438 14.957031 17.3125 15.113281 C 18.453125 19.585938 17.558594 23.167969 16.476562 23.335938 C 18.25 23.425781 18.441406 24.277344 17.125 23.695312 C 17.324219 21.308594 18.113281 21.3125 20.375 23.605469 C 20.394531 23.628906 20.839844 24.5625 20.867188 24.5625 L 26.214844 24.5625 C 26.882812 24.5625 27.25 24.195312 27.25 23.523438 L 27.25 21.242188 C 27.25 20.574219 26.882812 20.203125 26.214844 20.203125 Z M 20.121094 20.203125 "/>
                        <path
                            style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1;"
                            d="M 10.667969 7.5 L 4.6875 24.5625 L 9.332031 24.5625 L 10.34375 21.609375 L 15.40625 21.609375 L 16.394531 24.5625 L 21.019531 24.5625 L 15.0625 7.5 Z M 11.402344 17.828125 L 12.851562 13.101562 L 14.441406 17.828125 Z M 11.402344 17.828125 "/>
                    </g>
                </svg>
            </a>
            <a href="https://git.mami2.moe/akemi?tab=activity" target="_blank">
                <span class="sr-only">Forgejo</span>
                <svg viewBox="0 0 212 212" aria-hidden="true" width="32" height="32">
                    <g transform="translate(6,6)">
                        <path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" style="fill: none; stroke: #aaa; stroke-width: 25" />
                        <path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" style="fill: none; stroke: #000; stroke-width: 25" />
                        <circle cx="142" cy="20" r="18" style="fill: none; stroke: #aaa; stroke-width: 15" />
                        <circle cx="142" cy="88" r="18" style="fill: none; stroke: #000; stroke-width: 15" />
                        <circle cx="58" cy="180" r="18" style="fill: none; stroke: #000; stroke-width: 15" />
                    </g>
                </svg>
            </a>
            <a href="https://github.com/aizuko" target="_blank">
                <span class="sr-only">Github</span>
                <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
                  <path
                        fill="currentColor"
                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                </svg>
            </a>
            <a href="https://codeberg.org/akemi?tab=activity" target="_blank">
                <span class="sr-only">Codeberg</span>
                <svg width="32" height="32" aria-hidden="true" viewBox="0 0 24 24" fill="#000">
                  <path
                    d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z">
                  </path>
                </svg>
            </a>
        </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>