Fix footer layout on mobile devices

ArkStudiosLLC · Jan 17, 2024 · d61dddf · d61dddf
1 parent e03030d
commit d61dddf
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/src/app/ui/components/footer.tsx b/src/app/ui/components/footer.tsx
@@ -1,23 +1,30 @@
 import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'
-import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
+import { faEnvelope as faEnvelopeRegular } from '@fortawesome/free-regular-svg-icons'
+import { faEnvelope as faEnvelopeSolid } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 
 export default function Footer() {
   return (
     <footer className='flex w-screen justify-center bg-black/5 dark:bg-black/10'>
-      <div className='w-limited flex items-center justify-between py-3 *:text-sm *:text-zinc-800 *:dark:text-zinc-300'>
+      <div className='w-limited flex items-center justify-between gap-3 py-3 *:text-sm *:text-zinc-800 *:dark:text-zinc-300'>
         <p>© 2024 Ark Studios LLC.</p>
-        <div className='flex items-center gap-2'>
+        <div className='flex items-center justify-between gap-5 *:h-6 *:w-6 lg:gap-3 *:lg:h-5 *:lg:w-5'>
           <Link href='https://twitter.com/ArkStudiosLLC'>
-            <FontAwesomeIcon icon={faTwitter} className='h-4 w-4' />
+            <FontAwesomeIcon icon={faTwitter} />
           </Link>
+          <a href='mailto:info@arkstudios.co.jp' className='block lg:hidden'>
+            <FontAwesomeIcon icon={faEnvelopeSolid} />
+          </a>
           <Link href='https://github.com/ArkStudiosLLC'>
-            <FontAwesomeIcon icon={faGithub} className='h-4 w-4' />
+            <FontAwesomeIcon icon={faGithub} />
           </Link>
         </div>
-        <a href='mailto:info@arkstudios.co.jp' className='flex items-center gap-1.5'>
-          <FontAwesomeIcon icon={faEnvelope} className='h-4 w-4' />
+        <a
+          href='mailto:info@arkstudios.co.jp'
+          className='hidden lg:flex lg:items-center lg:gap-1.5'
+        >
+          <FontAwesomeIcon icon={faEnvelopeRegular} className='h-4 w-4' />
           <p>info@arkstudios.co.jp</p>
         </a>
       </div>