From 7319e41971d2952abc101c0149c64385b3713999 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Tue, 26 Dec 2023 21:07:41 -0700
Subject: [PATCH] Header: remove icons

---
 src/components/Footer.astro     |  1 -
 src/components/Header.astro     | 47 +--------------------------------
 src/components/HeaderLink.astro | 34 ++++++++++++++++--------
 3 files changed, 24 insertions(+), 58 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 859b25c..0329642 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -41,7 +41,6 @@ const today = new Date();
             <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;}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index bec1fc8..99476cf 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -10,7 +10,6 @@ import { SITE_TITLE } from '../consts';
             <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;}
@@ -37,54 +36,10 @@ import { SITE_TITLE } from '../consts';
             <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;"
+                class="inverted-button"
                 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>
-  -->
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 1b1c1fa..8a9e138 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -3,23 +3,35 @@ import type { HTMLAttributes } from 'astro/types';
 
 type Props = HTMLAttributes<'a'>;
 
-const { href, class: className, ...props } = Astro.props;
+const { href, ...props } = Astro.props;
 
 const { pathname } = Astro.url;
 const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 ---
 
-<a class="header-link" href={href} class="hover:underline" {...props}>
-	<slot />
+<a href={href} {...props}>
+    <slot />
 </a>
 
 <style is:inline>
-	a.header-link {
-		display: inline-block;
-		text-decoration: none;
-	}
-	a.header-link:hover {
-		text-decoration: underline;
-		text-decoration-color: var(--accent-color);
-	}
+    a {
+        display: inline-block;
+        text-decoration: none;
+    }
+    a:hover {
+        text-decoration: underline;
+        text-decoration-color: var(--accent-color);
+    }
+    a.inverted-button {
+        color: white;
+        background-color: black;
+        border-radius: 8px;
+        border: 2px solid black;
+        padding: 2px 8px;
+        text-decoration: none;
+    }
+    a.inverted-button:hover {
+        background-color: var(--accent-color);
+        border-color: var(--accent-color);
+    }
 </style>