refactor(web): tweak header and footer

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>
   );
 }

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>
   );
 }

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>
   );
 }

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 />

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"
             />

web/src/components/header/logoHeader.module.css

@@ -1,6 +0,0 @@
-@media (max-width: 640px) {
-  .logoHeader {
-    max-width: 222px;
-    max-height: 52px;
-  }
-}