fix: more lighthouse stuff

Mostly tap targets.
PHS-TSA · Dec 18, 2023 · b18bea0 · b18bea0
1 parent f1ffb50
commit b18bea0
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 9 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -64,12 +64,17 @@ const Footer: FunctionalComponent = () => {
 
       {menus.map((item) => (
         <div class="mb-4" key={item.title}>
-          <a class="font-bold dark:text-white" href={item.url}>{item.title}</a>
+          <a
+            class="font-bold dark:text-white p-4"
+            href={item.url}
+          >
+            {item.title}
+          </a>
           <ul class="mt-2">
             {item.children.map((child) => (
               <li class="mt-2" key={child.name}>
                 <a
-                  class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+                  class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 p-4"
                   href={item.url + child.href}
                 >
                   {child.name}
@@ -81,15 +86,15 @@ const Footer: FunctionalComponent = () => {
       ))}
 
       <div class="text-gray-500 dark:text-gray-400 space-y-2 align-middle">
-        <div class="text-xs">
+        <div class="text-xs m-1">
           Made with
         </div>
         {icons.map(({ Icon, href, name }, index) => {
           return (
             <>
               <a
                 href={href}
-                class="inline-block hover:text-black dark:hover:text-white"
+                class="inline-block hover:text-black dark:hover:text-white m-1"
                 title={name}
               >
                 <Icon aria-hidden="true" />

diff --git a/src/routes/_404.tsx b/src/routes/_404.tsx
@@ -9,7 +9,7 @@ const Error404: FunctionalComponent<PageProps> = () => {
       <Head>
         <title>404 - Page not found | Why Switch?</title>
       </Head>
-      <div class="px-4 py-8 mx-0 bg-green-400 dark:bg-green-600">
+      <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
           <h1 class="text-4xl font-bold dark:text-white">

diff --git a/src/routes/_500.tsx b/src/routes/_500.tsx
@@ -9,7 +9,7 @@ const Error500: FunctionalComponent<PageProps> = () => {
       <Head>
         <title>500 - Internal Server Error | Why Switch?</title>
       </Head>
-      <div class="px-4 py-8 mx-0 bg-green-400 dark:bg-green-600">
+      <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
           <h1 class="text-4xl font-bold dark:text-white">

diff --git a/src/routes/about.tsx b/src/routes/about.tsx
@@ -9,7 +9,7 @@ const About: FunctionalComponent<PageProps> = () => {
       <Head>
         <title>About | Why Switch?</title>
       </Head>
-      <div class="px-4 py-8 mx-0 bg-green-400 dark:bg-green-600">
+      <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
           <h1 class="text-4xl font-bold dark:text-white">About</h1>

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -9,7 +9,7 @@ const Home: FunctionalComponent<PageProps> = () => {
       <Head>
         <title>Home | Why Switch?</title>
       </Head>
-      <div class="px-4 py-8 mx-0 bg-green-400 dark:bg-green-600">
+      <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
           <h1 class="text-4xl font-bold dark:text-white">Why Switch?</h1>

diff --git a/src/routes/monies/guarantees-in-life.tsx b/src/routes/monies/guarantees-in-life.tsx
@@ -9,7 +9,7 @@ const Taxes: FunctionalComponent<PageProps> = () => {
       <Head>
         <title>Ben! | Why Switch?</title>
       </Head>
-      <div class="px-4 py-8 mx-0 bg-green-400 dark:bg-green-600">
+      <div class="px-4 py-8 mx-0 bg-green-500 dark:bg-green-700">
         <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
           <Logo />
           <h1 class="text-4xl font-bold dark:text-white">Death. And Taxes.</h1>