From e7953f0733f5bd85532d7d5cc0ec73e442106159 Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Sat, 28 Jun 2025 13:51:24 -0500
Subject: [PATCH] refactor(web): tweak header and footer

---
 web/src/components/footer/api-link.tsx        | 20 ++++++-----
 .../footer/collinmbarrett-link/index.tsx      | 34 ++++++++++---------
 .../components/footer/github-link/index.tsx   | 34 ++++++++++---------
 web/src/components/footer/index.tsx           |  2 +-
 web/src/components/header/index.tsx           |  7 ++--
 .../components/header/logoHeader.module.css   |  6 ----
 6 files changed, 51 insertions(+), 52 deletions(-)
 delete mode 100644 web/src/components/header/logoHeader.module.css

diff --git a/web/src/components/footer/api-link.tsx b/web/src/components/footer/api-link.tsx
index 2e218d859..fcba83235 100644
--- a/web/src/components/footer/api-link.tsx
+++ b/web/src/components/footer/api-link.tsx
@@ -2,14 +2,16 @@ import { FileJson2 } from "lucide-react";
 
 export function ApiLink() {
   return (
-    <a
-      className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-      href="https://api.filterlists.com/"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <FileJson2 width={16} height={16} />
-      API
-    </a>
+    <div className="text-sm sm:text-base">
+      <a
+        className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href="https://api.filterlists.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FileJson2 width={16} height={16} />
+        API
+      </a>
+    </div>
   );
 }
diff --git a/web/src/components/footer/collinmbarrett-link/index.tsx b/web/src/components/footer/collinmbarrett-link/index.tsx
index 0393d301b..85a758dca 100644
--- a/web/src/components/footer/collinmbarrett-link/index.tsx
+++ b/web/src/components/footer/collinmbarrett-link/index.tsx
@@ -4,21 +4,23 @@ import { ThemeImage } from "@/components/theme-image";
 
 export function CollinMBarrettLink() {
   return (
-    <a
-      className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-      href="https://collinmbarrett.com/"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <ThemeImage
-        aria-hidden
-        srcLight={CollinMBarrettIconLight}
-        srcDark={CollinMBarrettIconDark}
-        alt="Collin M. Barrett logo"
-        width={16}
-        height={16}
-      />
-      by Collin M. Barrett
-    </a>
+    <div className="text-sm sm:text-base">
+      <a
+        className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href="https://collinmbarrett.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <ThemeImage
+          aria-hidden
+          srcLight={CollinMBarrettIconLight}
+          srcDark={CollinMBarrettIconDark}
+          alt="Collin M. Barrett logo"
+          width={16}
+          height={16}
+        />
+        by Collin M. Barrett
+      </a>
+    </div>
   );
 }
diff --git a/web/src/components/footer/github-link/index.tsx b/web/src/components/footer/github-link/index.tsx
index de9730920..250f79a9a 100644
--- a/web/src/components/footer/github-link/index.tsx
+++ b/web/src/components/footer/github-link/index.tsx
@@ -4,21 +4,23 @@ import { ThemeImage } from "@/components/theme-image";
 
 export function GitHubLink() {
   return (
-    <a
-      className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-      href="https://github.com/collinbarrett/FilterLists"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <ThemeImage
-        aria-hidden
-        srcLight={GitHubMarkLight}
-        srcDark={GitHubMarkDark}
-        alt="GitHub Logomark"
-        width={16}
-        height={16}
-      />
-      GitHub
-    </a>
+    <div className="text-sm sm:text-base">
+      <a
+        className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+        href="https://github.com/collinbarrett/FilterLists"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <ThemeImage
+          aria-hidden
+          srcLight={GitHubMarkLight}
+          srcDark={GitHubMarkDark}
+          alt="GitHub Logomark"
+          width={16}
+          height={16}
+        />
+        GitHub
+      </a>
+    </div>
   );
 }
diff --git a/web/src/components/footer/index.tsx b/web/src/components/footer/index.tsx
index 36d6634ea..7e0e26693 100644
--- a/web/src/components/footer/index.tsx
+++ b/web/src/components/footer/index.tsx
@@ -4,7 +4,7 @@ import { ApiLink } from "./api-link";
 
 export function Footer() {
   return (
-    <footer className="flex flex-wrap items-center justify-center gap-2 sm:gap-[24px] mb-2 sm:mb-3 overflow-x-auto whitespace-nowrap">
+    <footer className="flex flex-wrap items-center justify-center gap-4 sm:gap-8 mb-2 sm:mb-3 overflow-x-auto whitespace-nowrap px-2 sm:px-0">
       <CollinMBarrettLink />
       <ApiLink />
       <GitHubLink />
diff --git a/web/src/components/header/index.tsx b/web/src/components/header/index.tsx
index c9e8d4041..f3b3bdc4c 100644
--- a/web/src/components/header/index.tsx
+++ b/web/src/components/header/index.tsx
@@ -3,7 +3,6 @@ import { ThemeToggle } from "@/components/theme-toggle";
 import Link from "next/link";
 import LogoLight from "./logo-filterlists-light.png";
 import logoDark from "./logo-filterlists-dark.png";
-import styles from "./logoHeader.module.css";
 
 export function Header() {
   return (
@@ -12,12 +11,12 @@ export function Header() {
         <div className="flex items-center">
           <Link href="/" aria-label="Go to homepage">
             <ThemeImage
-              className={styles.logoHeader}
+              className="sm:max-w-none sm:max-h-none max-w-[222px] max-h-[52px]"
               srcLight={LogoLight}
               srcDark={logoDark}
               alt="FilterLists logo"
-              width={429}
-              height={100}
+              width={320}
+              height={75}
               priority
               fetchPriority="high"
             />
diff --git a/web/src/components/header/logoHeader.module.css b/web/src/components/header/logoHeader.module.css
deleted file mode 100644
index dc98a0ddd..000000000
--- a/web/src/components/header/logoHeader.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@media (max-width: 640px) {
-  .logoHeader {
-    max-width: 222px;
-    max-height: 52px;
-  }
-}