Skip to content

Commit ffb0df6

Browse files
MMeschMMesch
committed
Layout system: migrate remaining components, remove legacy global CSS
Migrate Hero, News, WhatWeDo, AboutQS, SubTeam, ScheduleAMeeting, VisitWTJProfile to Section/CardGrid/Banner layout components. Remove blue-banner-container, cards-row, cards-list, row-with-margin-*, main-container-with-margins, upper-container-with-margin-top from custom.css.
1 parent 345b129 commit ffb0df6

13 files changed

Lines changed: 129 additions & 301 deletions

File tree

‎src/components/about/SubTeam.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import styles from "./styles.module.css";
22
import { SmallPortraitCard } from "./SmallPortraitCard";
3+
import CardGrid from "../layout/CardGrid";
34

45
export default function SubTeam({ subTeamName, subTeam }) {
56
return (
67
<div className={styles.subteam_container}>
7-
<h2 className={"text--center"}> {subTeamName}</h2>
8-
<ul className="cards-row">
9-
{subTeam.map((person, index) => (
8+
<h2 className="text--center">{subTeamName}</h2>
9+
<CardGrid cols={3}>
10+
{subTeam.map((person) => (
1011
<li key={person.pageName}>
1112
<SmallPortraitCard person={person} />
1213
</li>
1314
))}
14-
</ul>
15+
</CardGrid>
1516
</div>
1617
);
1718
}

‎src/components/about/styles.module.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,8 @@
2121
}
2222

2323
.small_portrait_card {
24-
width: 279px;
2524
height: 320px;
2625
padding: var(--ifm-spacing-lg) var(--ifm-spacing-xs);
27-
margin-bottom: var(--ifm-spacing-xl);
2826
align-items: center;
2927
}
3028

‎src/components/careers/VisitWTJProfile.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
import Banner from "../layout/Banner";
12
import LinkToWTJ from "./LinkToWTJ";
23

34
export default function VisitWTJProfile() {
45
return (
5-
<div className="blue-banner-container">
6+
<Banner bg="dark" cta={<LinkToWTJ label="OPEN OUR PROFILE" />}>
67
Learn more on our Welcome to the Jungle web page.
7-
<LinkToWTJ label={"OPEN OUR PROFILE"} />
8-
</div>
8+
</Banner>
99
);
1010
}

‎src/components/home/AboutQS/index.tsx‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,21 @@ import LinkToAboutUs from "../LinkToAboutUs";
44

55
export default function AboutQS() {
66
return (
7-
<div className={"container" + " " + styles.aboutQS_container}>
8-
<div className={"row flex-full-centered padding-none"}>
9-
<div className={"col padding-none margin-none"}>
10-
<div className={styles.aboutQS_text}>
11-
We are a team of expert of open-source developers, the very same
12-
people behind a number of technologies that you already use.
13-
</div>
7+
<div className={styles.aboutQS_outer}>
8+
<div className="page-content">
9+
<p className={styles.aboutQS_text}>
10+
We are a team of expert open-source developers, the very same
11+
people behind a number of technologies that you already use.
12+
</p>
13+
<div className="flex-full-centered">
14+
<img
15+
src={GroupPhotoUrl}
16+
alt="Picture showing a group of QuantStack people in front of Saint-Maur's office, in Paris area."
17+
style={{ width: "100%", maxWidth: "900px" }}
18+
/>
1419
</div>
15-
</div>
16-
<div className={"row flex-full-centered padding-none"}>
17-
<div className={"col padding-none margin-none"}>
18-
<div className="flex-full-centered">
19-
<img
20-
src={GroupPhotoUrl}
21-
alt={
22-
"Picture showing a group of Quantstack people in front of Saint-Maur's office, in Paris area."
23-
}
24-
/>
25-
</div>
26-
</div>
27-
</div>
28-
<div className={"row flex-full-centered padding-none"}>
29-
<div className={"col padding-none"}>
30-
<div className={styles.learn_more_button_container}>
31-
<LinkToAboutUs label={"LEARN MORE ABOUT US"} />
32-
</div>
20+
<div className={styles.learn_more_button_container}>
21+
<LinkToAboutUs label="LEARN MORE ABOUT US" />
3322
</div>
3423
</div>
3524
</div>

‎src/components/home/AboutQS/styles.module.css‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,39 @@
1-
@media only screen and (max-width: 996px) {
2-
.aboutQS_container {
1+
@media (max-width: 996px) {
2+
.aboutQS_outer {
33
background-color: var(--ifm-color-secondary-s2);
44
color: white;
5-
padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0
6-
var(--ifm-spacing-2xl);
7-
text-align: center;
5+
padding: var(--ifm-spacing-2xl) 0;
86
}
97

108
.aboutQS_text {
119
font-size: 14px;
1210
text-align: center;
1311
margin-bottom: var(--ifm-spacing-xl);
1412
}
13+
14+
.learn_more_button_container {
15+
display: flex;
16+
justify-content: center;
17+
margin-top: var(--ifm-spacing-xl);
18+
}
1519
}
1620

17-
@media only screen and (min-width: 996px) {
18-
.aboutQS_container {
21+
@media (min-width: 996px) {
22+
.aboutQS_outer {
1923
background: linear-gradient(180deg, var(--ifm-color-primary-p0) 0%, #ffffff 100%);
2024
color: var(--ifm-color-primary-p2);
21-
padding: var(--ifm-spacing-2xl) var(--ifm-spacing-5xl) 0
22-
var(--ifm-spacing-5xl);
25+
padding: var(--ifm-spacing-4xl) 0;
2326
}
2427

2528
.aboutQS_text {
2629
font-size: 24px;
2730
text-align: center;
2831
margin-bottom: var(--ifm-spacing-lg);
2932
}
33+
34+
.learn_more_button_container {
35+
display: flex;
36+
justify-content: center;
37+
margin-top: var(--ifm-spacing-xl);
38+
}
3039
}

‎src/components/home/Hero/index.tsx‎

Lines changed: 21 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,32 @@ import LogoGrid from "./LogosTableBy8";
33
import Astronaut from "/img/quantstack/astronaut.svg";
44
import Banner from "./Banner";
55

6-
76
export function Hero() {
87
return (
98
<div className={styles.hero_container}>
10-
<Banner/>
11-
<div className={styles.banner_image}>
12-
</div>
13-
<div className="main-container-with-margins">
14-
<div>
15-
<div className={"row row--no-gutters flex-full-centered"}>
16-
<div className="col col--6 col--offset-1">
17-
<h1 className="padding-none">
18-
Open-source for discovery, science, and education
19-
</h1>
20-
<p className={styles.subheader}>
21-
A team behind major open-source projects of the scientific
22-
computing ecosystem
23-
</p>
24-
<h2 className={styles.h2_custom}>
25-
Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.
26-
</h2>
27-
</div>
28-
29-
<div
30-
className={
31-
"col col--3 col--offset-1 flex-full-centered" +
32-
" " +
33-
styles.astronaut_column
34-
}
35-
>
36-
<Astronaut
37-
alt={"Astronaut mascot of QuantStack"}
38-
width={"300px"}
39-
height={"300px"}
40-
/>
41-
</div>
9+
<Banner />
10+
<div className="page-content">
11+
<div className={styles.hero_body}>
12+
<div className={styles.hero_text}>
13+
<h1 className="padding-none">
14+
Open-source for discovery, science, and education
15+
</h1>
16+
<p className={styles.sub_header}>
17+
A team behind major open-source projects of the scientific
18+
computing ecosystem
19+
</p>
20+
<h2 className={styles.h2_custom}>
21+
Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.
22+
</h2>
23+
</div>
24+
<div className={styles.hero_image}>
25+
<Astronaut
26+
alt="Astronaut mascot of QuantStack"
27+
width="300px"
28+
height="300px"
29+
/>
4230
</div>
4331
</div>
44-
</div>
45-
<div className="page-content">
4632
<div className={styles.worked_with}>We have worked with</div>
4733
<LogoGrid />
4834
</div>

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

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,34 @@
1111
padding-bottom: var(--ifm-spacing-3xl);
1212
}
1313

14-
.row_max_width {
15-
max-width: 1500px;
14+
.hero_body {
1615
display: flex;
16+
align-items: center;
17+
gap: var(--ifm-spacing-2xl);
18+
padding: var(--ifm-spacing-3xl) 0;
19+
}
20+
21+
.hero_text {
22+
flex: 3;
23+
min-width: 0;
24+
}
25+
26+
.hero_image {
27+
flex: 2;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
}
32+
33+
@media (max-width: 996px) {
34+
.hero_body {
35+
flex-direction: column;
36+
padding: var(--ifm-spacing-xl) 0;
37+
}
38+
39+
.hero_image {
40+
display: none;
41+
}
1742
}
1843

1944
.banner_container_small {

‎src/components/home/News/index.tsx‎

Lines changed: 19 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,30 @@
1+
import styles from "./styles.module.css";
12
import BlogpostCard from "../../blog/BlogpostCard";
23
import { blogpostsDetails } from "../../blog/blogpostsDetails";
3-
import styles from "./styles.module.css";
4+
import CardGrid from "../../layout/CardGrid";
5+
import Section from "../../layout/Section";
46
import LinkToBlogs from "../LinkToBlogs";
57

68
export default function News() {
79
const numberOfBlogs = blogpostsDetails.length;
810
return (
9-
<div className={"container" + " " + styles.news_container}>
10-
<div className={"row flex-full-centerd"}>
11-
<div className="col col--10 col--offset-1">
12-
<h2 className="text--center">Recent blog contributions</h2>
11+
<div className={styles.news_wrapper}>
12+
<Section>
13+
<h2 className="text--center">Recent blog contributions</h2>
14+
<CardGrid cols={3}>
15+
{[0, 1, 2].map((i) => (
16+
<li key={i}>
17+
<BlogpostCard
18+
blogpost={blogpostsDetails[i]}
19+
timeIndex={numberOfBlogs - i}
20+
/>
21+
</li>
22+
))}
23+
</CardGrid>
24+
<div className="flex-full-centered" style={{ marginTop: "var(--ifm-spacing-xl)" }}>
25+
<LinkToBlogs label="READ MORE POSTS" />
1326
</div>
14-
<div className="spacing-2xl"></div>
15-
</div>
16-
<ul className={"row flex-full-centered"}>
17-
<li className="cards-list">
18-
<div className="col">
19-
<BlogpostCard
20-
blogpost={blogpostsDetails[0]}
21-
timeIndex={numberOfBlogs}
22-
/>
23-
</div>
24-
</li>
25-
<li className="cards-list">
26-
<div className="col col--2 col--offset-1">
27-
<BlogpostCard
28-
blogpost={blogpostsDetails[1]}
29-
timeIndex={numberOfBlogs - 1}
30-
/>
31-
</div>
32-
</li>
33-
<li className="cards-list">
34-
<div className="col col--2 col--offset-1">
35-
<BlogpostCard
36-
blogpost={blogpostsDetails[2]}
37-
timeIndex={numberOfBlogs - 2}
38-
/>
39-
</div>
40-
</li>
41-
</ul>
42-
43-
<LinkToBlogs label={"READ MORE POSTS"} />
27+
</Section>
4428
</div>
4529
);
4630
}

‎src/components/home/News/styles.module.css‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
@media only screen and (max-width: 996px) {
2-
/*Mobile */
3-
.news_container {
1+
@media (max-width: 996px) {
2+
.news_wrapper {
43
display: none;
54
}
65
}
7-
8-
.news_container {
9-
margin-top: var(--ifm-spacing-2xl);
10-
}

‎src/components/home/WhatWeDo/index.tsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,17 @@ import LinkToProjects from "../LinkToProjects";
55

66
export function WhatWeDo() {
77
return (
8-
<div className={"container " + styles.whatwedo_container}>
9-
<div className="row flex-full-centered">
8+
<div className={styles.whatwedo_outer}>
9+
<div className="page-content">
1010
<div className={styles.services_link_mobile}>
11-
<LinkToServices label={"DISCOVER OUR SERVICES"} />
11+
<LinkToServices label="DISCOVER OUR SERVICES" />
1212
</div>
13-
</div>
14-
<div className={"row flex-full-centered"}>
15-
<h1 className={styles.header}> What we do </h1>
16-
</div>
17-
<div className={"row flex-full-centered"}>
13+
<h1 className={styles.header}>What we do</h1>
1814
<Topics />
19-
</div>
20-
<div className="row flex-full-centered">
2115
<div className={styles.projects_link}>
22-
<LinkToProjects label={"DISCOVER ALL OF OUR PROJECTS"} />
23-
16+
<LinkToProjects label="DISCOVER ALL OF OUR PROJECTS" />
2417
<div className={styles.services_link_desktop}>
25-
<LinkToServices label={"DISCOVER OUR SERVICES"} />
18+
<LinkToServices label="DISCOVER OUR SERVICES" />
2619
</div>
2720
</div>
2821
</div>

0 commit comments

Comments
 (0)