feat(ux): adapt footer layout to small devices

mateusfg7 · Jun 20, 2023 · e6c15d9 · e6c15d9
1 parent 088ab9e
commit e6c15d9
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/app/(blog)/components/footer.tsx b/src/app/(blog)/components/footer.tsx
@@ -5,7 +5,7 @@ import { ArrowUpRight } from '@/shared/lib/phosphor-icons'
 export function Footer() {
   const Link = ({ href, children }: { href: string; children: ReactNode }) => (
     <NextLink
-      className="inline-flex items-end gap-px hover:text-neutral-900 hover:dark:text-neutral-200"
+      className="inline-flex items-end gap-px active:text-neutral-900 active:dark:text-neutral-200 hover:text-neutral-900 hover:dark:text-neutral-200"
       href={href}
       target="_blank"
       rel="noreferrer"
@@ -18,8 +18,8 @@ export function Footer() {
 
   return (
     <div className="mt-28 border-t border-neutral-300/30 py-11 dark:border-neutral-800/20">
-      <div className="blog-content-w m-auto flex items-center justify-between leading-none">
-        <div className="flex gap-4 text-neutral-500 dark:text-neutral-400">
+      <div className="blog-content-w m-auto flex items-center md:justify-between leading-none">
+        <div className="hidden md:flex gap-4 text-neutral-500 dark:text-neutral-400">
           <Link href="https://github.com/mateusfg7/mfg-b/blob/main/LICENSE">
             <span>License</span>
             <ArrowIcon />
@@ -37,7 +37,7 @@ export function Footer() {
             <ArrowIcon />
           </Link>
         </div>
-        <div className="text-dm text-neutral-400 dark:text-neutral-500">
+        <div className="text-sm text-center md:text-right text-neutral-400 dark:text-neutral-500">
           Built with <Link href="https://nextjs.org/">Next.js</Link>,{' '}
           <Link href="https://mdxjs.com/">MDX</Link>,{' '}
           <Link href="https://tailwindcss.com/">Tailwindcss</Link> and{' '}