Skip to content

Commit 4fdd1d9

Browse files
MMeschMMesch
committed
Layout unification: content band, consistent page-start spacing
- Add --ifm-content-width (1200px) token and .page-content / .page-content-narrow global utility classes; replace main-container-with-margins + container nesting across Projects, Services, About, Careers, Fundable, Contact pages - Fix page-start spacing: change upper-container-with-margin-top from margin-top to padding-top (prevents CSS margin collapse through plain div wrappers) - Projects: fix ProjectCard 50/50 split (was col-6-offset-1 + col-4); simplify AllProjects and Header wrappers - Services/Contact: clean up col offsets to 50/50 splits; remove textAlign:justify - About: add values_row modifier so 4 value cards fill one row (flex:1 1 0); remove subteam_container side margins; fix SubTeam to use cards-row - Fundable: change sidebar from position:fixed to position:sticky so it stays aligned within the centered content band - Hero logos: constrain to page-content band so it doesn't overflow the content width - Remove legacy h1 asymmetric padding (8px 36px 8px 20px -> 0 with margin) - global p: text-align justify -> left
1 parent 64b3e43 commit 4fdd1d9

19 files changed

Lines changed: 146 additions & 225 deletions

‎src/components/about/FourValues.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function FourValues() {
1212
</h1>
1313
</div>
1414
</div>
15-
<ul className="cards-row">
15+
<ul className={"cards-row " + styles.values_row}>
1616
{valuesDetails.map((value, index) => (
1717
<li key={index}>
1818
<ValueCard value={value} />

‎src/components/about/SubTeam.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,13 @@ export default function SubTeam({ subTeamName, subTeam }) {
55
return (
66
<div className={styles.subteam_container}>
77
<h2 className={"text--center"}> {subTeamName}</h2>
8-
<div className={"container"}>
9-
<ul className="row padding-none flex-full-centered row-with-margin-top">
10-
{subTeam.map((person, index) => (
11-
<li className="cards-list" key={person.pageName}>
12-
<div className="col">
13-
<SmallPortraitCard person={person} />
14-
</div>
15-
</li>
16-
))}
17-
</ul>
18-
</div>
8+
<ul className="cards-row">
9+
{subTeam.map((person, index) => (
10+
<li key={person.pageName}>
11+
<SmallPortraitCard person={person} />
12+
</li>
13+
))}
14+
</ul>
1915
</div>
2016
);
2117
}

‎src/components/about/index.tsx‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,39 +18,26 @@ export function getTeamByPageName(name: string) {
1818
export function About() {
1919
return (
2020
<div>
21-
<div className="main-container-with-margins">
22-
<div className="container upper-container-with-margin-top">
23-
<div className={"row"}>
24-
<div className={"col flex-full-centered"}>
25-
<FourValues />
26-
</div>
27-
</div>
28-
21+
<div className="page-content upper-container-with-margin-top">
22+
<FourValues />
2923

30-
<div className="row">
31-
<div className="col col--10 col--offset-1">
32-
<h1 className="text--center">Meet the QuantStack team</h1>
33-
<div className={styles.team_description}>
34-
A team of outliers, leaders in software projects adopted at the
35-
global scale, benefiting millions of people worldwide.
36-
</div>
37-
</div>
38-
</div>
39-
40-
<div className="row">
41-
<div className="col">
42-
<SubTeam
43-
subTeamName={"The leadership team"}
44-
subTeam={teams.leadershipTeam}
45-
/>
46-
<SubTeam subTeamName={"The core team"} subTeam={teams.coreTeam} />
47-
<SubTeam
48-
subTeamName={"QuantStack collaborators"}
49-
subTeam={teams.QSCollaboratorsTeam}
50-
/>
51-
</div>
24+
<div className="row-with-margins">
25+
<h1 className="text--center">Meet the QuantStack team</h1>
26+
<div className={styles.team_description}>
27+
A team of outliers, leaders in software projects adopted at the
28+
global scale, benefiting millions of people worldwide.
5229
</div>
5330
</div>
31+
32+
<SubTeam
33+
subTeamName={"The leadership team"}
34+
subTeam={teams.leadershipTeam}
35+
/>
36+
<SubTeam subTeamName={"The core team"} subTeam={teams.coreTeam} />
37+
<SubTeam
38+
subTeamName={"QuantStack collaborators"}
39+
subTeam={teams.QSCollaboratorsTeam}
40+
/>
5441
</div>
5542
<div className="blue-banner-container">
5643
<div className="blue-banner-header">Join the team</div>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,10 +229,13 @@ div .join_the_team_text {
229229
@media only screen and (min-width: 996px) {
230230
/*Desktop*/
231231
.value_card {
232-
width: 264px;
233232
padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
234233
}
235234

235+
.values_row > li {
236+
flex: 1 1 0;
237+
}
238+
236239
.value_header {
237240
font-family: var(--ifm-font-family-roboto);
238241
font-size: var(--ifm-font-size-secondary-title);
@@ -250,7 +253,7 @@ div .join_the_team_text {
250253
}
251254

252255
.subteam_container {
253-
margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl);
256+
margin: var(--ifm-spacing-5xl) 0;
254257
}
255258

256259
.team_description {

‎src/components/careers/index.tsx‎

Lines changed: 15 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,50 +9,21 @@ import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
99
export default function Careers() {
1010
return (
1111
<div>
12-
<div className="main-container-with-margins">
13-
<div className="container upper-container-with-margin-top">
14-
<div
15-
className={
16-
"row padding-none flex-full-centered"
17-
}
18-
>
19-
<div className="col">
20-
<h1 className="text--center">Join the QuantStack team!</h1>
21-
<div
22-
className={
23-
styles.group_photo_container + " " + "flex-full-centered"
24-
}
25-
>
26-
<img
27-
src={GroupPhotoJupyterConUrl}
28-
alt={
29-
"Picture showing QuantStack people gathered at the Jupytercon in Paris in May 2023."
30-
}
31-
/>
32-
</div>
33-
</div>
34-
</div>
35-
<div
36-
className={
37-
"row flex-full-centered" +
38-
" " +
39-
styles.join_the_team_container
40-
41-
}
42-
>
43-
<div className="col col--10 col--offset-1">
44-
<JoinTheTeam />
45-
</div>
46-
<div className={"row" + " " + "flex-full-container"}>
47-
<div className="col col--8 col--offset-2">
48-
<div className={styles.interviews_container}>
49-
<Interviews
50-
details={interviewDetails}
51-
description={"Working at QuantStack"}
52-
/>
53-
</div>
54-
</div>
55-
</div>
12+
<div className="page-content upper-container-with-margin-top">
13+
<h1 className="text--center">Join the QuantStack team!</h1>
14+
<div className={styles.group_photo_container + " flex-full-centered"}>
15+
<img
16+
src={GroupPhotoJupyterConUrl}
17+
alt="Picture showing QuantStack people gathered at the Jupytercon in Paris in May 2023."
18+
/>
19+
</div>
20+
<div className={styles.join_the_team_container}>
21+
<JoinTheTeam />
22+
<div className={styles.interviews_container}>
23+
<Interviews
24+
details={interviewDetails}
25+
description={"Working at QuantStack"}
26+
/>
5627
</div>
5728
</div>
5829
</div>

‎src/components/contact/index.tsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,16 @@ import ContactIllustration from "/img/illustrations/contact.svg";
55

66
export function Contact() {
77
return (
8-
<div className="container upper-container-with-margin-top">
9-
<h1 className={"padding-none text--center"}> Contact us</h1>
10-
<div className={"row"}>
11-
<div
12-
className="col col--5 col--offset-1 flex-full-centered"
13-
style={{
14-
padding: "var(--ifm-spacing-xl)",
15-
}}
16-
>
8+
<div className="page-content upper-container-with-margin-top">
9+
<h1 className="padding-none text--center">Contact us</h1>
10+
<div className="row">
11+
<div className="col col--6 flex-full-centered" style={{ padding: "var(--ifm-spacing-xl)" }}>
1712
<ContactIllustration
1813
height={"460px"}
19-
alt={
20-
"Illustration for the contact page with a woman, a mobile phone and an envelope."
21-
}
14+
alt="Illustration for the contact page with a woman, a mobile phone and an envelope."
2215
/>
2316
</div>
24-
<div
25-
className={"col col--5 flex-full-centered padding-none margin-none"}
26-
>
17+
<div className="col col--6 flex-full-centered padding-none">
2718
<ContactForm />
2819
</div>
2920
</div>

‎src/components/fundable/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,19 +55,19 @@ export function MainAreaFundableProjects() {
5555
export default function FundableProjects() {
5656
return (
5757

58-
<div className="container upper-container-with-margin-top">
58+
<div className="page-content upper-container-with-margin-top">
5959
<div className="row">
6060
<div className={"col col--2" + " " + styles.menu_sidebar}>
6161
<MenuSidebar />
6262
</div>
63-
<div className={"col col--10 col" + " " + styles.main_area_desktop} >
63+
<div className={"col col--10" + " " + styles.main_area_desktop}>
6464
<MainAreaFundableProjects />
65-
</div >
66-
<div className={"col col--12" + " " + styles.main_area_mobile} >
65+
</div>
66+
<div className={"col col--12" + " " + styles.main_area_mobile}>
6767
<MainAreaFundableProjects />
6868
</div>
6969
</div>
70-
</div >
70+
</div>
7171

7272
);
7373
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,10 @@
122122
}
123123

124124
.menu_sidebar_container {
125-
position: fixed;
125+
position: sticky;
126+
top: 80px;
126127
display: flex;
127-
height: auto;
128+
height: fit-content;
128129
}
129130

130131
.menu_sidebar_indicator {

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,10 @@ export function Hero() {
4242
</div>
4343
</div>
4444
</div>
45-
<div className="main-container-with-margins">
46-
<div className={"container" + " " + styles.logos_carousel}>
47-
<div className="row">
48-
<div className="col col--12 col">
49-
<div className={styles.worked_with}> We have worked with </div>
50-
</div>
51-
</div>
52-
<div className="row" >
53-
<div className="col col--12" style={{display:"flex", justifyContent: "center"}}>
54-
<SimpleSlider />
55-
</div>
56-
</div>
45+
<div className={"page-content " + styles.logos_carousel}>
46+
<div className={styles.worked_with}>We have worked with</div>
47+
<div style={{display:"flex", justifyContent: "center"}}>
48+
<SimpleSlider />
5749
</div>
5850
</div>
5951
</div>

‎src/components/projects/AllProjects.tsx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,11 @@ import styles from "./styles.module.css";
44

55
export default function AllProjects() {
66
return (
7-
<div
8-
className={
9-
"container flex-full-centered" + " " + styles.all_projects_container
10-
}
11-
>
12-
<ul className="row --no-gutters">
13-
{projectsDetails.map((project, index) => {
14-
return (
15-
<li className="projects-list" key={index}>
16-
<div className="col" style={{ paddingLeft: "0" }}>
17-
<ProjectCard project={project} />
18-
</div>
19-
</li>
20-
);
21-
})}
7+
<div className="page-content">
8+
<ul className={"projects-list " + styles.all_projects_container}>
9+
{projectsDetails.map((project, index) => (
10+
<li key={index}><ProjectCard project={project} /></li>
11+
))}
2212
</ul>
2313
</div>
2414
)

0 commit comments

Comments
 (0)