support very small screen sizes

Highfire1 · Jan 19, 2025 · 049b410 · 049b410
1 parent 56017b0
commit 049b410
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -5,7 +5,7 @@ const Footer = () => {
         <footer className="flex flex-col items-center justify-center">
 
             {/* show links if sidebar is hidden because we are on mobile */}
-            <div className="sm:hidden flex">
+            <div className="sm:hidden flex flex-wrap justify-center items-center">
 
                 <Link href="https://www.linkedin.com/in/andersontseng/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">Linkedin</Link>
 

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -4,24 +4,25 @@ const Header = () => {
     return (
         <header className=" ">
             <nav className="w-full mx-auto flex items-center justify-between ">
-
-                <div className="hidden min-[100px]:block justify-start">
-                    <Link href="/" className="text-xl font-bold text-gray-500">
-                        Anderson Tseng
-                    </Link>
-                </div>
+
+            <div className="justify-start">
+                <Link href="/" className="text-xl font-bold text-gray-500">
+                <span className="min-[300px]:hidden">AT</span>
+                <span className="hidden min-[300px]:inline">Anderson Tseng</span>
+                </Link>
+            </div>
 
-                <div className="flex sm:gap-4 justify-end grow max-[99px]:w-full">
-                    <Link href="/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
-                        Home
-                    </Link>
-                    <Link href="/blog" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
-                        Blog
-                    </Link>
-                    {/* <Link href="/contact" className="text-gray-500 hover:text-gray-900">
-                        Contact
-                    </Link> */}
-                </div>
+            <div className="flex sm:gap-4 justify-end grow max-[99px]:w-full">
+                <Link href="/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
+                Home
+                </Link>
+                <Link href="/blog" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
+                Blog
+                </Link>
+                {/* <Link href="/contact" className="text-gray-500 hover:text-gray-900">
+                Contact
+                </Link> */}
+            </div>
             </nav>
         </header>
     )