Merge pull request #288 from HaudinFlorence/fix-home-page-layout

Fix home page layout

Author: SylvainCorlay

src/components/home/Hero/LogosTableBy8.tsx

@@ -66,7 +66,7 @@ export default function SimpleSlider() {
 export function LogosTable1() {
   return (
     <div className={"container" + " " + styles.table_with_8_customers}>
-      <div className="row row--no-gutters">
+      <div className="row-max-width row--no-gutters">
         <div className={"col col--3 flex-full-centered"}>
           <img
             src={BloombergLogoUrl}

src/components/home/Hero/index.tsx

@@ -45,12 +45,12 @@ export function Hero() {
       <div className="main-container-with-margins">
         <div className={"container" + " " + styles.logos_carousel}>
           <div className="row">
-            <div className="col col--10 col--offset-1">
+            <div className="col col--8 col--offset-2">
               <div className={styles.worked_with}> We have worked with </div>
             </div>
           </div>
           <div className="row">
-            <div className="col col--10 col--offset-1">
+            <div className="col col--8 col--offset-2">
               <SimpleSlider />
             </div>
           </div>

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

@@ -11,6 +11,11 @@
   padding-bottom: var(--ifm-spacing-3xl);
 }
 
+.row_max_width {
+  max-width: 1500px;
+  display: flex;
+}
+
 .banner_container_small {
   position: relative;
   width: 100%;

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
           }