Skip to content

Fix home page layout #288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SylvainCorlay merged 2 commits into from
Feb 10, 2026
Merged

Fix home page layout #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b24904
Fix home page layout for the projects by setting a max width for the …
HaudinFlorence Feb 10, 2026
6fa9d59
Update width of the carousel with logos.
HaudinFlorence Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/home/Hero/LogosTableBy8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/Hero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/components/home/Hero/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/Computing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/DataAnalysis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/Jupyter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/Robotics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -19,7 +19,7 @@ export default function RoboticsProjects() {
</div>
<div
className={
"col col--5" +
"col col--6" +
" " +
"flex-full-centered" +
" " +
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/RoboticsReverse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/SpecialProjects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/SupplyChain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/home/ProjectsOverview/SupplyChainReversed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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>
Expand Down
11 changes: 11 additions & 0 deletions src/components/home/ProjectsOverview/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
6 changes: 6 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,12 @@ ul {
padding: 0;
}

.row-max-width {
max-width: 1500px;
display: flex;
}


/***footer*****/
.footer__item {
color: var(--ifm-text-color-footer);
Expand Down
Loading