From d19d328dd138140c28c36ca82589411d1c8c03e1 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Sun, 6 Oct 2024 21:34:34 +0300
Subject: [PATCH] cleanup: Make the footer navigation look similar to the
 header navigation

---
 CHANGELOG.md              |  2 ++
 src/components/Footer.vue | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa4634e..b82a11c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Make grammar mistakes to have a red underline
 
+- Make the footer navigation look similar to the header navigation
+
 - Hovering the navigation island will make it slightly bigger
 
 - Hovering the navigation title will make it turn into the color accent rather than adding an underline
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index faf127d..531d782 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -69,9 +69,10 @@ const { theme } = useData();
 
   nav {
     margin: 0 auto 1rem;
-    border-radius: 1.375rem;
-    background-color: var(--color-background-second);
-    padding: 0.25rem;
+    border: 0.4px solid var(--color-border);
+    border-radius: 2.5rem;
+    background-color: var(--color-header);
+    padding: 0.6625rem 2.5625rem;
     width: fit-content;
     max-width: min(var(--content-width) / 1.5, 100%);
 
@@ -80,9 +81,10 @@ const { theme } = useData();
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      gap: 0.25rem;
+      gap: 0.7rem;
       margin: 0;
       padding: 0;
+      list-style: none;
       width: min(var(--content-width) / 1.5, 100%);
 
       li {
@@ -92,14 +94,15 @@ const { theme } = useData();
 
         a {
           transition: var(--transition);
+          background-color: transparent !important;
           border-radius: 999rem;
-          padding: 0.5rem 0.75rem;
-          color: var(--color-accent);
+          color: var(--color-text-secondary);
+          font-weight: 600;
+          letter-spacing: -0.015rem;
           text-decoration: none;
 
           &:hover {
-            background-color: var(--color-accent);
-            color: var(--color-background);
+            color: var(--color-accent);
           }
 
           &:active {