Fix home page layout for the projects by setting a max width for the row.

Author: HaudinFlorence

src/components/home/ProjectsOverview/Computing.tsx

@@ -4,10 +4,10 @@ import XTensorXSIMDPicture from "@site/static/img/projects/xtensor_xsimd.svg";
 
 export default function ComputingProjects() {
   return (
-    <div className={"container"}>
-      <div className="row">
+    <div className={styles.container_projects}>
+      <div className={styles.row_projects}>
         <div
-          className={"col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding}
+          className={"col col--6" + " " + styles.col_project_overview_with_padding}
         >
           <h1 className="padding-none">Scientific computing </h1>
           <h2 className={styles.h2_custom}>
@@ -17,7 +17,7 @@ export default function ComputingProjects() {
 
           <ComputingMD />
         </div>
-        <div className={"col col--5 flex-full-centered"+ " " + styles.col_project_overview_with_padding}>
+        <div className={"col col--6 flex-full-centered"+ " " + styles.col_project_overview_with_padding}>
           <XTensorXSIMDPicture width={"500px"}/>
         </div>
       </div>

src/components/home/ProjectsOverview/DataAnalysis.tsx

@@ -4,18 +4,18 @@ import ApacheArrowPicture from "@site/static/img/projects/apache_arrow.svg";
 
 export default function DataAnalysisProjects() {
   return (
-    <div className={"container" + " "+ styles.project_light_yellow} style={{paddingBottom : "0px"}}>
-      <div className="row">
+    <div className={styles.container_projects + " "+ styles.project_light_yellow} style={{paddingBottom : "0px"}}>
+     <div className={styles.row_projects}>
         <div
-          className={"col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding}
+          className={"col col--6" + " " + styles.col_project_overview_with_padding}
         >
           <h1 className="padding-none">Data Analysis </h1>
           <h2 className={styles.h2_custom}>
             Supporting the development of key data analysis technologies.
           </h2>
           <DataAnalysisMD />
         </div>
-        <div className={"col col--5"+ " " + "flex-full-centered" + " " + styles.col_project_overview_with_padding}>
+        <div className={"col col--6"+ " " + "flex-full-centered" + " " + styles.col_project_overview_with_padding}>
           <ApacheArrowPicture width={"500px"}/>
         </div>
       </div>

src/components/home/ProjectsOverview/Jupyter.tsx

@@ -5,20 +5,20 @@ import JupyterPictureUrl from "@site/static/img/projects/jupyterlab_examples.png
 export default function JupyterProject() {
   return (
     <div
-      className={"container"}
+      className={styles.container_projects}
       style={{
         marginTop: "var(--ifm-spacing-4xl)",
       }}
     >
-      <div className={"row"}>
-        <div className={"col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding}>
+      <div className={styles.row_projects}>
+        <div className={"col col--6" + " " + styles.col_project_overview_with_padding}>
           <h1 className="padding-none">Jupyter project </h1>
           <h2 className={styles.h2_custom}>We strive to sustain the project in the long term.</h2>
          <JupyterMD/>
         </div>
 
         <div
-          className={"col col--5 flex-full-centered"+" " +styles.col_project_overview_with_padding}
+          className={"col col--6 flex-full-centered"+" " +styles.col_project_overview_with_padding}
         >
           <img src={JupyterPictureUrl} width={"540px"} alt={"Picture showing two jupyterlab user interfaces"}/>
         </div>

src/components/home/ProjectsOverview/Robotics.tsx

@@ -4,11 +4,11 @@ import RoboticsPictureUrl from "@site/static/img/projects/robotics.png";
 
 export default function RoboticsProjects() {
   return (
-    <div className={"container" + " "+ styles.project_light_yellow}>
-      <div className={"row"}>
+    <div className={styles.container_projects + " "+ styles.project_light_yellow}>
+      <div className={styles.row_projects}>
         <div
           className={
-            "col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding
+            "col col--6" + " " + styles.col_project_overview_with_padding
           }
         >
           <h1 className="padding-none">Robotics </h1>
@@ -19,7 +19,7 @@ export default function RoboticsProjects() {
         </div>
         <div
           className={
-            "col col--5" +
+            "col col--6" +
             " " +
             "flex-full-centered" +
             " " +

src/components/home/ProjectsOverview/RoboticsReverse.tsx

@@ -4,18 +4,18 @@ import RoboticsPictureUrl from "@site/static/img/projects/robotics.png";
 
 export default function RoboticsProjects() {
   return (
-    <div className="container">
-      <div className={"row"}>
+    <div className={styles.container_projects}>
+      <div className={styles.row_projects}>
         <div
           className={
-            "col col--5 col--offset-1 flex-full-centered" +
+            "col col--6 flex-full-centered" +
             " " +
             styles.col_project_overview_with_padding
           }
         >
           <img src={RoboticsPictureUrl} width={"640px"} alt={"Picture showing two jupyterlab user interfaces displaying robotics projects."}/>
         </div>
-        <div className={"col col--5" + " " + styles.col_project_overview_with_padding}>
+        <div className={"col col--6" + " " + styles.col_project_overview_with_padding}>
           <h1 className="padding-none">Robotics </h1>
           <h2 className={styles.h2_custom}>
             We just kicked off a new initiative to Robotics education.

src/components/home/ProjectsOverview/SpecialProjects.tsx

@@ -4,9 +4,9 @@ import SpecialProjectsPictureUrl from "@site/static/img/projects/special_project
 
 export default function SpecialProjects() {
     return (
-      <div className={"container" + " " + styles.project_yellow}>
-        <div className="row">
-          <div className={"col col--5 col--offset-1" + " " + styles.col_project_overview_with_padding}>
+      <div className={styles.container_projects + " " + styles.project_yellow}>
+        <div className={styles.row_projects}>
+          <div className={"col col--6" + " " + styles.col_project_overview_with_padding}>
             <h1 className="padding-none">Special projects</h1>
             <h2 className={styles.h2_custom}>
               Applications built from the ground up and addressing a complete use
@@ -15,7 +15,7 @@ export default function SpecialProjects() {
 
              <SpecialProjectsMD/> 
           </div>
-          <div className={"col col--5 flex-full-centered"+ " "+ styles.col_project_overview_with_padding}>
+          <div className={"col col--6 flex-full-centered"+ " "+ styles.col_project_overview_with_padding}>
             <img src={SpecialProjectsPictureUrl} height={"595px"} alt={"Picture showing examples of Jupyter CAD projects in Jupyterlab."} />
           </div>
         </div>

src/components/home/ProjectsOverview/SupplyChain.tsx

@@ -4,11 +4,11 @@ import MambaPictureUrl from "@site/static/img/projects/mamba_console.png";
 
 export default function SupplyChainProjects() {
   return (
-    <div className={"container" + " " + styles.project_light_yellow}>
-      <div className={"row"}>
+    <div className={styles.container_projects + " " + styles.project_light_yellow}>
+      <div className={styles.row_projects}>
         <div
           className={
-            "col col--5 col--offset-1" +
+            "col col--6" +
             " " +
             styles.col_project_overview_with_padding
           }
@@ -22,7 +22,7 @@ export default function SupplyChainProjects() {
         </div>
         <div
           className={
-            "col col--5 flex-full-centered" +
+            "col col--6 flex-full-centered" +
             " " +
             styles.col_project_overview_with_padding
           }

src/components/home/ProjectsOverview/SupplyChainReversed.tsx

@@ -4,11 +4,11 @@ import MambaPictureUrl from "@site/static/img/projects/mamba_console.png";
 
 export default function SupplyChainProjects() {
   return (
-    <div className="container">
-      <div className={"row"}>
+    <div className={styles.container_projects}>
+      <div className={styles.row_projects}>
         <div
           className={
-            "col col--5 col--offset-1 flex-full-centered" +
+            "col col--6 flex-full-centered" +
             " " +
             styles.col_project_overview_with_padding
           }
@@ -17,7 +17,7 @@ export default function SupplyChainProjects() {
         </div>
         <div
           className={
-            "col col--5" + " " + styles.col_project_overview_with_padding
+            "col col--6" + " " + styles.col_project_overview_with_padding
           }
         >
           <h1 className="padding-none">Software supply chain </h1>

src/components/home/ProjectsOverview/styles.module.css

@@ -19,3 +19,14 @@
 .project_light_yellow {
   background-color: var(--ifm-color-primary-p0);
 }
+
+.row_projects {
+  max-width: 1500px;
+  display: flex;
+}
+
+.container_projects {
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}