docs: responsiveness fix (#6229)

Author: guiwrite

docs/src/css/custom.css

@@ -240,7 +240,6 @@ main.container {
   background: var(--ifm-background-surface-color);
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -253,7 +252,6 @@ main.container {
   background: #111111;
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -262,13 +260,11 @@ main.container {
   margin-right: -50vw;
 }
 
-/* Section background alternation for dark mode - alternating every 2 sections */
 [data-theme='dark'] section:nth-child(4n+1),
 [data-theme='dark'] section:nth-child(4n+2) {
   background: #111111;
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -282,7 +278,6 @@ main.container {
   background: var(--ifm-background-surface-color);
   padding: 3rem 0;
   margin: 0;
-  /* full width */
   width: 100vw;
   position: relative;
   left: 50%;
@@ -291,7 +286,6 @@ main.container {
   margin-right: -50vw;
 }
 
-/*  container width inside sections */
 section > div,
 section > h2 {
   margin: 0 auto;
@@ -301,13 +295,27 @@ section > h2 {
 }
 
 section > h2 {
-  padding-left: var(--ifm-spacing-horizontal); /* Using the same padding as div */
+  padding-left: var(--ifm-spacing-horizontal);
 }
 
-/* Ensure consistent container width */
 .container {
   max-width: var(--ifm-container-width);
   margin: 0 auto;
   padding: 0 var(--ifm-spacing-horizontal);
   width: 100%;
 }
+
+@media (max-width: 996px) {
+  [data-theme='dark'] section:nth-child(4n+1),
+  [data-theme='dark'] section:nth-child(4n+2),
+  [data-theme='dark'] section:nth-child(4n+3),
+  [data-theme='dark'] section:nth-child(4n+4),
+  [data-theme='dark'] section:nth-child(odd),
+  [data-theme='dark'] section:nth-child(even) {
+    width: 100%;
+    left: auto;
+    right: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

docs/src/pages/index.module.css

@@ -199,44 +199,28 @@
   text-decoration: none;
 }
 
-@media (max-width: 996px) {
-  section .cardGrid {
-    grid-template-columns: 1fr;
-    padding: 0 1rem;
-  }
-
-  .heroInner {
-    flex-direction: column;
-    padding: 0 1rem;
-  }
-
-  .heroInner > div,
-  .logo {
-    max-width: 100%;
-    width: 100%;
+@media (max-width: 1200px) {
+  [data-section="integration"] .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .card {
-    width: 100%;
-    margin: 0 auto;
+  [data-section="ecosystem"] .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
   }
+}
 
-  section, 
-  .hero,
-  .cardGrid {
-    width: 100vw;
-    max-width: 100%;
-    margin: 0;
-    overflow-x: hidden;
+@media (max-width: 768px) {
+  [data-section="introduction"] .cardGrid,
+  [data-section="integration"] .cardGrid,
+  [data-section="configuration"] .cardGrid,
+  [data-section="ecosystem"] .cardGrid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  :global(body) {
-    overflow-x: hidden;
-    width: 100%;
+  [data-section="configuration"] .cardGrid > *:last-child {
+    grid-column: 1 / 3;
   }
-}
 
-@media (max-width: 768px) {
   .hero {
     padding: 2rem 0;
   }
@@ -246,4 +230,15 @@
   }
 }
 
+@media (max-width: 996px) {
+  .heroInner {
+    flex-direction: column;
+    padding: 0 1rem;
+  }
 
+  .heroInner > div,
+  .logo {
+    max-width: 100%;
+    width: 100%;
+  }
+}