Merge pull request #15 from php-debugger/navbar-and-hero-spacing

fix navbar links and mobile layout issues

Author: carlos-granados

docusaurus.config.js

@@ -118,7 +118,7 @@ const config = {
             position: 'left',
           },
           {
-            to: '/user-guide/breakpoints',
+            to: '/user-guide/starting-the-debugger',
             label: 'Guide',
             position: 'left',
           },
@@ -128,8 +128,8 @@ const config = {
             position: 'left',
           },
           {
-            to: '/reference/debug-protocol',
-            label: 'API',
+            to: '/integrations/ide-support',
+            label: 'Integrations',
             position: 'left',
           },
           {

src/components/HomeHero/styles.module.css

@@ -3,7 +3,7 @@
   grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
   gap: 3rem;
   align-items: center;
-  padding: 2rem 0 3rem;
+  padding: 0 0 3rem;
 }
 
 .heroText {
@@ -121,7 +121,6 @@
   .hero {
     grid-template-columns: minmax(0, 1fr);
     gap: 2rem;
-    padding-top: 1rem;
   }
 
   .title {

src/components/InstallCommand/styles.module.css

@@ -4,6 +4,7 @@
 
 .tabs {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
 }
 
@@ -34,7 +35,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
   margin-bottom: 0.5rem;
 }
 

src/css/custom.css

@@ -75,6 +75,22 @@
   margin-right: 2rem;
 }
 
+/* The lockup is 4.5:1, so a fixed 4rem height makes it 288px wide -- wider than
+   the room left beside the hamburger and search on a small phone, which pushed
+   the whole document sideways. Below the navbar's own breakpoint let the width
+   lead and the height follow, so it shrinks to fit instead of overflowing. */
+@media (max-width: 996px) {
+  .navbar__brand {
+    margin-right: 0.5rem;
+  }
+
+  .navbar__logo {
+    height: auto;
+    max-height: 4rem;
+    max-width: 55vw;
+  }
+}
+
 
 .navbar__link {
   font-weight: 500;