From c870c2c7fc0cc650735542d5c6a11ff9331a1ade Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Fri, 29 Dec 2023 21:07:29 -0700
Subject: [PATCH] Header: properly center title

---
 src/components/Header.astro | 64 +++++++++++++++++++++++++------------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 03a6ed0..c2c43de 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -4,27 +4,27 @@ 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">
+    <nav>
         <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>
-                    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>
+            <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>
+                        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="/unix">Unix</HeaderLink>
@@ -48,3 +48,27 @@ import { SITE_TITLE } from '../consts';
         </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;
+    }
+</style>