fix: responsivity

DXHeroes · Jan 16, 2025 · b6a1608 · b6a1608
1 parent c4c507e
commit b6a1608
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 39 deletions.
diff --git a/src/app/components/Navigation.tsx b/src/app/components/Navigation.tsx
@@ -10,47 +10,49 @@ export default function Navigation() {
     <div className="fixed bottom-0 left-0 right-0 bg-white border-t">
       <div className="mx-auto max-w-container px-4 py-4">
         <div className="flex justify-between items-center">
-          <div className="flex gap-2">
-            <Link
-              href="/"
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
-            >
-              Home
-            </Link>
+          <div className="flex gap-2 overflow-x-auto pb-2 -mb-2 scrollbar-hide">
+            <div className="flex gap-2 min-w-max">
+              <Link
+                href="/"
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
+              >
+                Home
+              </Link>
 
-            <Link
-              href="/topics"
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
-            >
-              Topics
-            </Link>
+              <Link
+                href="/topics"
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
+              >
+                Topics
+              </Link>
 
-            <Link
-              href="/how-to"
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
-            >
-              How To
-            </Link>
+              <Link
+                href="/how-to"
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
+              >
+                How To
+              </Link>
 
-            <Link
-              href="/about"
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
-            >
-              About
-            </Link>
-          </div>
+              <Link
+                href="/about"
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter whitespace-nowrap"
+              >
+                About
+              </Link>
 
-          <div className="flex items-center gap-4">
-            <Link 
-              href="https://github.com/DXHeroes/1on1-cards" 
-              target="_blank"
-              className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter flex items-center gap-2"
-            >
-              <FaGithub className="w-4 h-4" />
-              GitHub
-              <HiExternalLink className="w-4 h-4" />
-            </Link>
+              <Link 
+                href="https://github.com/DXHeroes/1on1-cards" 
+                target="_blank"
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter flex items-center gap-2 whitespace-nowrap"
+              >
+                <FaGithub className="w-4 h-4 flex-shrink-0" />
+                GitHub
+                <HiExternalLink className="w-4 h-4 flex-shrink-0" />
+              </Link>
+            </div>
+          </div>
 
+          <div className="flex-shrink-0 ml-4">
             <Link href="https://dxheroes.io" target="_blank">
               <DxHeroesLogo className="h-8 w-auto text-stratos" />
             </Link>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,3 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -67,11 +67,11 @@ export default function Home() {
 
         {/* CTA Button */}
         <div className="text-center">
-          <div className="flex gap-4 justify-center">
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <button
               type="button"
               onClick={() => router.push('/topics')}
-              className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-electric-violet to-purple text-white rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group"
+              className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-electric-violet to-purple text-white rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group justify-center"
             >
               Start Exploring
               <svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -82,7 +82,7 @@ export default function Home() {
             <button
               type="button"
               onClick={() => router.push('/how-to')}
-              className="inline-flex items-center px-8 py-4 border-2 border-electric-violet text-electric-violet rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group"
+              className="inline-flex items-center px-8 py-4 border-2 border-electric-violet text-electric-violet rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group justify-center"
             >
               How To Use
               <svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">