docs(landingpage): fix the section width (#7695)

docs: section width
web-infra-dev · Aug 27, 2024 · d91d3e7 · d91d3e7
1 parent 0665cbc
commit d91d3e7
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 34 deletions.
diff --git a/website/theme/components/Landingpage/FullyFeatured/index.module.scss b/website/theme/components/Landingpage/FullyFeatured/index.module.scss
@@ -54,7 +54,7 @@
 
   .featureCard {
     display: flex;
-    flex: 1 0 25%;
+    flex: 1 1 25%;
     align-items: flex-start;
     gap: 16px;
     min-height: 110px;

diff --git a/website/theme/components/Landingpage/WhyRspack/index.module.scss b/website/theme/components/Landingpage/WhyRspack/index.module.scss
@@ -1,29 +1,20 @@
 // ---------- responsive layout
 // XXL
 @media screen and (min-width: 1441px) {
-  .container {
-    padding: 32px 80px !important;
-  }
   .featureCard {
     flex: 1 0 30% !important;
   }
 }
 
 // XL
 @media screen and (min-width: 1281px) and (max-width: 1440px) {
-  .container {
-    padding: 32px 80px !important;
-  }
   .featureCard {
     flex: 1 0 30% !important;
   }
 }
 
 // L
 @media screen and (min-width: 835px) and (max-width: 1280px) {
-  .container {
-    padding: 32px 80px !important;
-  }
   .featureCard {
     min-width: 40% !important;
     max-width: 50% !important;
@@ -32,9 +23,6 @@
 
 // M
 @media screen and (min-width: 601px) and (max-width: 834px) {
-  .container {
-    padding: 24px !important;
-  }
   .whyRspack {
     padding: 16px !important;
     .whyRspackTitle {
@@ -64,9 +52,6 @@
 
 // S
 @media screen and (max-width: 600px) {
-  .container {
-    padding: 24px !important;
-  }
   .whyRspack {
     min-width: 100% !important;
     padding: 16px !important;
@@ -97,21 +82,7 @@
   // extra
   .whyRspackBg {
     max-width: 50% !important;
-  }
-}
-
-.container {
-  display: flex;
-  padding: 32px 144px;
-  justify-content: center;
-  align-items: center;
-
-  .innerContainer {
-    width: 100%;
-    max-width: 1440px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
+    max-height: 50% !important;
   }
 }
 

diff --git a/website/theme/components/Landingpage/WhyRspack/index.tsx b/website/theme/components/Landingpage/WhyRspack/index.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { Link } from 'rspress/theme';
 import { useI18n, useI18nUrl } from '../../../i18n';
+import sharedStyles from '../shared.module.scss';
 import Compatible from './assets/Compatible.svg';
 import FrameCheck from './assets/FrameCheck.svg';
 import Lightning from './assets/Lightning.svg';
@@ -203,8 +204,8 @@ const WhyRspack = memo(() => {
   ];
 
   return (
-    <section className={styles.container}>
-      <div className={styles.innerContainer}>
+    <section className={sharedStyles.container}>
+      <div className={sharedStyles.innerContainer}>
         <div className={styles.features}>
           {/* Why Rspack? */}
           <WhyRspackCard />

diff --git a/website/theme/components/Landingpage/shared.module.scss b/website/theme/components/Landingpage/shared.module.scss
@@ -91,7 +91,8 @@
     gap: 32px;
     flex-direction: column;
     width: 100%;
-    max-width: 1280px;
+
+    max-width: 1440px;
   }
 }