Skip to content

Commit 3ca5222

Browse files
HaudinFlorenceHaudinFlorence
committed
Fix the contact page style.
1 parent 0fad20a commit 3ca5222

File tree

9 files changed

+165
-96
lines changed

9 files changed

+165
-96
lines changed

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

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
.small_portrait_card {
22
width: 279px;
3-
height: 388px;
4-
background-color: white;
5-
color: var(--ifm-color-primary-p2);
6-
border-radius: 8px;
7-
box-shadow: 0px 0px 8px 1px #c8c8c7;
8-
padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
9-
text-align: center;
10-
margin-bottom: var(--ifm-spacing-xl);
11-
}
3+
height: 388px;
4+
background-color: white;
5+
color: var(--ifm-color-primary-p2);
6+
border-radius: 8px;
7+
box-shadow: 0px 0px 8px 1px #c8c8c7;
8+
padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
9+
text-align: center;
10+
margin-bottom: var(--ifm-spacing-xl);
11+
}
1212

1313
.avatar {
1414
filter: grayscale(1);
@@ -18,20 +18,6 @@
1818
width: 160px;
1919
}
2020

21-
22-
23-
24-
.value_header {
25-
font-family: var(--ifm-font-family-rubik-one);
26-
font-size: var(--ifm-font-size-secondary-title);
27-
font-style: normal;
28-
font-weight: 600;
29-
line-height: 28px;
30-
text-align: center;
31-
margin-bottom: var(--ifm-spacing-xl);
32-
color: var(--ifm-text-color-on-primary-p1);
33-
}
34-
3521
.value_text p {
3622
font-family: var(--ifm-font-family-roboto);
3723
font-size: 14px;
@@ -42,7 +28,6 @@
4228
color: var(--ifm-text-color-on-primary-p1);
4329
}
4430

45-
4631
div .row {
4732
margin-left: 0;
4833
margin-right: 0;
@@ -75,7 +60,7 @@ div .row {
7560
color: var(---ifm-text-color);
7661
font-style: normal;
7762
font-weight: 600;
78-
line-height: 24px;
63+
line-height: 24px;
7964
letter-spacing: 0.5px;
8065
color: var(--ifm-color-primary-p2);
8166
}
@@ -89,9 +74,7 @@ div .row {
8974
line-height: 40px;
9075
color: var(--ifm-color-primary-p2);
9176
}
92-
s
93-
94-
.large_card_position {
77+
s .large_card_position {
9578
font-size: var(--ifm--font-size-normal);
9679
font-family: var(--ifm-font-family-roboto);
9780
color: var(--ifm-color-primary-p2);
@@ -136,8 +119,6 @@ div .join_the_team_text {
136119
color: var(--ifm-color-secondary-s2);
137120
}
138121

139-
140-
141122
@media only screen and (max-width: 996px) {
142123
/*Mobile*/
143124
.value_card {
@@ -150,6 +131,17 @@ div .join_the_team_text {
150131
margin-bottom: var(--ifm-spacing-xl);
151132
}
152133

134+
.value_header {
135+
font-family: var(--ifm-font-family-rubik-one);
136+
font-size: 20px;
137+
font-style: normal;
138+
font-weight: 600;
139+
line-height: 20px;
140+
text-align: center;
141+
margin-bottom: var(--ifm-spacing-xl);
142+
color: var(--ifm-text-color-on-primary-p1);
143+
}
144+
153145
.large_portrait_card {
154146
width: 100%;
155147
height: 200%;
@@ -171,7 +163,7 @@ div .join_the_team_text {
171163
.subteam_container {
172164
margin: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl);
173165
}
174-
166+
175167
.team_description {
176168
font-family: var(--ifm-font-family-roboto);
177169
font-size: 18px;
@@ -194,7 +186,16 @@ div .join_the_team_text {
194186
margin-bottom: var(--ifm-spacing-xl);
195187
}
196188

197-
189+
.value_header {
190+
font-family: var(--ifm-font-family-rubik-one);
191+
font-size: var(--ifm-font-size-secondary-title);
192+
font-style: normal;
193+
font-weight: 600;
194+
line-height: 28px;
195+
text-align: center;
196+
margin-bottom: var(--ifm-spacing-xl);
197+
color: var(--ifm-text-color-on-primary-p1);
198+
}
198199

199200
.large_portrait_card {
200201
width: 1000px;
@@ -209,15 +210,14 @@ div .join_the_team_text {
209210
margin-bottom: var(--ifm-spacing-2xl);
210211
}
211212

212-
213213
.row_with_margins {
214214
margin: var(--ifm-spacing-2xl) 0;
215215
}
216216

217217
.subteam_container {
218218
margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl);
219219
}
220-
220+
221221
.team_description {
222222
font-family: var(--ifm-font-family-roboto);
223223
font-size: 22px;
@@ -226,5 +226,4 @@ div .join_the_team_text {
226226
line-height: 28px;
227227
text-align: center;
228228
}
229-
230-
}
229+
}

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

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,7 @@
4444
margin-bottom: var(--ifm-spacing-xl);
4545
}
4646

47-
.join_the_team_text {
48-
text-align: center;
49-
font-size: 28px;
50-
font-family: var(--ifm-font-family-roboto);
51-
color: var(--ifm-color-primary-p2);
52-
text-align: center;
53-
font-style: normal;
54-
font-weight: 400;
55-
line-height: 36px; /* 128.571% */
56-
}
47+
5748

5849
.join_the_team_container {
5950
padding: var(--ifm-spacing-4xl) 0;
@@ -88,3 +79,30 @@
8879
line-height: 24px; /* 133.333% */
8980
letter-spacing: 0.5px;
9081
}
82+
83+
@media only screen and (max-width: 996px) {
84+
/*Mobile*/
85+
.join_the_team_text {
86+
text-align: center;
87+
font-size: 18px;
88+
font-family: var(--ifm-font-family-roboto);
89+
color: var(--ifm-color-primary-p2);
90+
text-align: center;
91+
font-style: normal;
92+
font-weight: 400;
93+
line-height: 36px;
94+
}
95+
}
96+
@media only screen and (min-width: 996px) {
97+
/*Desktop*/
98+
.join_the_team_text {
99+
text-align: center;
100+
font-size: 28px;
101+
font-family: var(--ifm-font-family-roboto);
102+
color: var(--ifm-color-primary-p2);
103+
text-align: center;
104+
font-style: normal;
105+
font-weight: 400;
106+
line-height: 36px;
107+
}
108+
}

‎src/components/contact/index.tsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
import styles from "./styles.module.css";
22
import ContactForm from "./ContactForm";
33
import { useEffect, useState } from "react";
4-
import ContactIllustration from "/img/illustrations/contact.svg"
5-
4+
import ContactIllustration from "/img/illustrations/contact.svg";
65

76
export function Contact() {
87
return (
98
<div className="container upper-container-with-margin-top">
9+
<h1 className={"padding-none text--center"}> Contact us</h1>
1010
<div className={"row"}>
1111
<div
12-
className={
13-
"col col--6 col--offset-1" + " " + "flex-full-centered" + " "
14-
}
12+
className={"col col--5 col--offset-1 flex-full-centered" + " "}
1513
style={{
16-
margin: "var(--ifm-spacing-2xl) 0",
17-
padding: "var(--ifm-spacing-2xl)",
14+
padding: "var(--ifm-spacing-xl)",
1815
}}
1916
>
20-
<ContactIllustration alt={"Illustration for the contact page with a woman, a mobile phone and an enveloppe."} />
17+
<ContactIllustration
18+
height={"460px"}
19+
alt={
20+
"Illustration for the contact page with a woman, a mobile phone and an enveloppe."
21+
}
22+
/>
2123
</div>
2224
<div
23-
className={"col col--5" + " " + "padding-none" + " " + "margin-none"}
25+
className={"col col--5 flex-full-centered padding-none margin-none"}
2426
>
25-
<h1 className={"padding-none"}> Contact us</h1>
26-
<div>
27-
<ContactForm />
28-
</div>
27+
<ContactForm />
2928
</div>
3029
</div>
3130
</div>
3231
);
3332
}
34-
export default Contact;
33+
export default Contact;

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

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@
44
background: var(--ifm-color-blue-jupyter);
55
}
66

7-
.send_button_container {
8-
height: 59px;
9-
width: 508px;
10-
margin-top: var(--ifm-spacing-2xl);
11-
}
7+
128

139
.contact_form {
1410
margin-top: var(--ifm-spacing-xl);
@@ -19,14 +15,46 @@
1915
color: var(--ifm-text-color);
2016
background-color: var(--ifm-background-color);
2117
}
22-
.small_input {
23-
width: 508px;
24-
height: 56px;
25-
border-radius: 4px;
26-
}
2718

28-
.large_input {
29-
width: 508px;
30-
height: 220px;
31-
border-radius: 4px;
32-
}
19+
20+
21+
@media only screen and (max-width: 996px) {
22+
/*Mobile*/
23+
.small_input {
24+
width: 300px;
25+
height: 56px;
26+
border-radius: 4px;
27+
}
28+
29+
.large_input {
30+
width: 300px;
31+
height: 220px;
32+
border-radius: 4px;
33+
}
34+
.send_button_container {
35+
height: 59px;
36+
width: 300px;
37+
margin: var(--ifm-spacing-2xl) 0;
38+
}
39+
40+
}
41+
42+
@media only screen and (min-width: 996px) {
43+
/*Desktop*/
44+
.small_input {
45+
width: 508px;
46+
height: 56px;
47+
border-radius: 4px;
48+
}
49+
50+
.large_input {
51+
width: 508px;
52+
height: 220px;
53+
border-radius: 4px;
54+
}
55+
.send_button_container {
56+
height: 59px;
57+
width: 508px;
58+
margin: var(--ifm-spacing-2xl) 0;
59+
}
60+
}

‎src/components/projects/Header.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,18 @@ import styles from "./styles.module.css";
22
import HeaderMD from "./descriptions/Header.md";
33

44
export default function Header() {
5-
return (
6-
<div className={"container upper-container-with-margin-top"}>
5+
return (
6+
<div className={styles.header_container}>
7+
<div className={"container"}>
78
<div className="row">
8-
<div className={"col padding-none"+ " " + styles.header_container}>
9+
<div className="col padding-none">
910
<h1 className={styles.header_title}>Working in the open</h1>
1011
<div className={styles.header_text}>
11-
<HeaderMD/>
12+
<HeaderMD />
1213
</div>
1314
</div>
1415
</div>
1516
</div>
16-
);
17-
}
17+
</div>
18+
);
19+
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ div .project_title {
2929
@media only screen and (max-width: 996px) {
3030
/*Mobile*/
3131

32-
.header_container {
32+
.header_container{
33+
padding-top: var(--ifm-spacing-2xl);
3334
background-color: var(--ifm-color-primary-p1);
3435
}
35-
3636
.header_title {
3737
padding-left: none;
3838
}
@@ -61,6 +61,9 @@ div .project_title {
6161

6262
@media only screen and (min-width: 996px) {
6363
/*Desktop*/
64+
.header_container{
65+
margin-top: var(--ifm-spacing-6xl);
66+
}
6467
.header_title {
6568
padding-left: var(--ifm-spacing-4xl);
6669
}

‎src/components/services/SpecialProjects.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function SpecialProjects() {
1717
<SpecialProjectsIllustration
1818
alt={
1919
"Picture showing an illustration of a group of people working together in an office."}
20-
width={"360px"}
20+
height={"300px"}
2121

2222
/>
2323
</div>

‎src/components/services/Support.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export function Support() {
88
<div className="container upper-container-with-margin-top">
99
<div className="row">
1010
<div className="col col--4 col--offset-1">
11-
<div className="flex-full-centered">
12-
<SupportIllustration width={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
11+
<div className="flex-full-centered" style={{marginBottom:"var(--ifm-spacing-xl)"}}>
12+
<SupportIllustration height={"280px"} alt="Illustration for the support section, showing symbolically a person indicating the direction to take." />
1313
</div>
1414
</div>
1515
<div className={"col col--6"}>

0 commit comments

Comments
 (0)