Skip to content

Commit 64b3e43

Browse files
MMeschMMesch
committed
Design pass A+B: color tokens, font unification, card layout fixes
1 parent c20e4ba commit 64b3e43

13 files changed

Lines changed: 89 additions & 107 deletions

File tree

‎src/components/about/FourValues.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,10 @@ export default function FourValues() {
1212
</h1>
1313
</div>
1414
</div>
15-
<ul className="row padding-none flex-full-centered row-with-margins">
15+
<ul className="cards-row">
1616
{valuesDetails.map((value, index) => (
17-
<li className="cards-list" key={index}>
18-
<div className="col">
19-
<ValueCard value={value} />
20-
</div>
17+
<li key={index}>
18+
<ValueCard value={value} />
2119
</li>
2220
))}
2321
</ul>

‎src/components/about/ValueCard.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,13 @@ import styles from "./styles.module.css";
22

33
export function ValueCard({ value }) {
44
return (
5-
<div className={"card" + " " + styles.value_card}>
6-
<div
7-
className={"card__header flex-full-centered"}
8-
style={{ marginBottom: "var(--ifm-spacing-lg)" }}
9-
>
5+
<div className={"content-card " + styles.value_card}>
6+
<div className={styles.value_icon}>
107
<value.pictureComponent alt={value.alt} />
118
</div>
12-
13-
<div className={"card__body"}>
14-
<div className={styles.value_header}>{value.name}</div>
15-
<div className={styles.value_text}>
16-
<value.DescriptionMD />
17-
</div>
9+
<div className={styles.value_header}>{value.name}</div>
10+
<div className={styles.value_text}>
11+
<value.DescriptionMD />
1812
</div>
1913
</div>
2014
);

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

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@
3737
text-decoration: #0000ee underline;
3838
}
3939

40+
.value_icon {
41+
display: flex;
42+
justify-content: center;
43+
margin-bottom: var(--ifm-spacing-lg);
44+
}
45+
4046
.value_text p {
4147
font-family: var(--ifm-font-family-roboto);
4248
font-size: 14px;
@@ -45,7 +51,8 @@
4551
line-height: 20px;
4652
letter-spacing: 0.25px;
4753
color: var(--ifm-text-color-on-primary-p1);
48-
text-align: justify;
54+
text-align: left;
55+
margin-bottom: var(--ifm-spacing-xs);
4956
}
5057

5158
div .row {
@@ -151,14 +158,6 @@ div .join_the_team_text {
151158
padding-right: 5px;
152159
}
153160

154-
.card {
155-
border: 1px solid #ccc;
156-
padding: 16px;
157-
margin: 16px;
158-
cursor: pointer;
159-
border-radius: 8px;
160-
transition: box-shadow 0.2s;
161-
}
162161

163162
.small_portrait_card:hover {
164163
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@@ -167,28 +166,23 @@ div .join_the_team_text {
167166
@media only screen and (max-width: 996px) {
168167
/*Mobile*/
169168
.value_card {
170-
height: 420px;
171169
width: 264px;
172170
padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
173-
border-radius: 8px;
174-
box-shadow: var(--ifm-shadow-card);
175-
background-color: var(--ifm-color-primary-p1);
176-
margin-bottom: var(--ifm-spacing-xl);
177171
}
178172

179173
.value_header {
180-
font-family: var(--ifm-font-family-rubik-one);
174+
font-family: var(--ifm-font-family-roboto);
181175
font-size: 20px;
182176
font-style: normal;
183-
font-weight: 400;
177+
font-weight: 700;
184178
line-height: 20px;
185179
text-align: center;
186180
margin-bottom: var(--ifm-spacing-xl);
187181
color: var(--ifm-text-color-on-primary-p1);
188182
}
189183

190184
.value_text p {
191-
text-align: justify;
185+
text-align: left;
192186
padding: 0;
193187
}
194188

@@ -235,20 +229,15 @@ div .join_the_team_text {
235229
@media only screen and (min-width: 996px) {
236230
/*Desktop*/
237231
.value_card {
238-
height: 460px;
239232
width: 264px;
240233
padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
241-
border-radius: 8px;
242-
box-shadow: var(--ifm-shadow-card);
243-
background-color: var(--ifm-color-primary-p1);
244-
margin-bottom: var(--ifm-spacing-xl);
245234
}
246235

247236
.value_header {
248-
font-family: var(--ifm-font-family-rubik-one);
237+
font-family: var(--ifm-font-family-roboto);
249238
font-size: var(--ifm-font-size-secondary-title);
250239
font-style: normal;
251-
font-weight: 400;
240+
font-weight: 700;
252241
line-height: 28px;
253242
text-align: center;
254243
margin-bottom: var(--ifm-spacing-xl);

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
height: 556px;
77
width: 369px;
88
border-radius: 8px;
9-
box-shadow: 4px 4px 18px -1px #dee0fc;
9+
box-shadow: 4px 4px 18px -1px rgba(160, 140, 40, 0.15);
1010
padding: var(--ifm-spacing-xl);
1111
background: var(--ifm-background-color-card);
1212
}
@@ -44,7 +44,7 @@ div .blogpost_date {
4444
}
4545

4646
.blogpost_header {
47-
color: var(---ifm-text-color);
47+
color: var(--ifm-text-color);
4848
font-family: var(--ifm-font-family-roboto);
4949
font-size: 16px;
5050
font-style: normal;
@@ -57,7 +57,7 @@ div .blogpost_date {
5757
}
5858

5959
.blogpost_date {
60-
color: var(---ifm-text-color);
60+
color: var(--ifm-text-color);
6161
font-family: var(--ifm-font-family-roboto);
6262
font-size: 12px;
6363
font-style: normal;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
}
44

55
.project_category_header {
6-
font-family: var(--ifm-font-family-rubik-one);
6+
font-family: var(--ifm-font-family-roboto);
77
font-style: normal;
8-
font-weight: 400;
8+
font-weight: 700;
99
line-height: 20px;
1010
text-align: center;
1111
margin-bottom: var(--ifm-spacing-xl);
@@ -15,7 +15,7 @@
1515

1616
.project_title {
1717
color: var(--ifm-text-color-main-title);
18-
font-family: var(--ifm-font-family-bebas-neue);
18+
font-family: var(--ifm-font-family-roboto);
1919
font-size: 32px;
2020
font-style: normal;
2121
font-weight: 600;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
@media only screen and (min-width: 996px) {
1818
.aboutQS_container {
19-
background-color: var(--ifm-color-primary-p1);
19+
background: linear-gradient(180deg, var(--ifm-color-primary-p0) 0%, #ffffff 100%);
2020
color: var(--ifm-color-primary-p2);
2121
padding: var(--ifm-spacing-2xl) var(--ifm-spacing-5xl) 0
2222
var(--ifm-spacing-5xl);

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -170,11 +170,13 @@
170170
}
171171

172172
.worked_with {
173-
font-size: 24px;
174-
font-weight: 200;
175-
font-family: var(--ifm-font-family-rubik-one);
176-
color: var(--ifm-color-primary-p2);
173+
font-size: 16px;
174+
font-weight: 300;
175+
font-family: var(--ifm-font-family-roboto);
176+
color: var(--ifm-color-neutral-n1);
177177
text-align: center;
178+
letter-spacing: 0.1em;
179+
text-transform: uppercase;
178180
margin: var(--ifm-spacing-2xl) 0;
179181
}
180182

@@ -203,11 +205,13 @@
203205
}
204206

205207
.worked_with {
206-
font-size: 24px;
207-
font-weight: 200;
208-
font-family: var(--ifm-font-family-rubik-one);
209-
color: var(--ifm-color-primary-p2);
208+
font-size: 16px;
209+
font-weight: 300;
210+
font-family: var(--ifm-font-family-roboto);
211+
color: var(--ifm-color-neutral-n1);
210212
text-align: center;
213+
letter-spacing: 0.1em;
214+
text-transform: uppercase;
211215
margin: var(--ifm-spacing-2xl) 0;
212216
}
213217

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414

1515
.project_yellow {
16-
background-color: var(--ifm-color-primary-p1);
16+
background-color: var(--ifm-color-primary-p0);
1717
}
1818

1919
.project_light_yellow {

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,16 @@ const TopicsDescriptions = [JupyterMD, SupplyChainMD, ComputingMD];
99
export function Topics() {
1010
return (
1111
<div>
12-
<div className="container flex-full-centered">
13-
<ul className="row flex-full-centered">
12+
<ul className="cards-row">
1413
{topicsDetails.map((topics, index) => (
15-
<li className="cards-list" key={index}>
14+
<li key={index}>
1615
<TopicsCard
1716
topics={topics}
1817
TopicsDescriptionMD={TopicsDescriptions[index]}
1918
/>
2019
</li>
2120
))}
2221
</ul>
23-
</div>
2422
</div>
2523
);
2624
}

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@ import styles from "./styles.module.css";
22

33
export function TopicsCard({ topics, TopicsDescriptionMD }) {
44
return (
5-
<div className={"card" + " " + styles.topics_card}>
6-
<div className={"card__header" + " " + styles.topics_header}>
7-
{topics.name}
8-
</div>
9-
<div className="card__body">
10-
<TopicsDescriptionMD />
11-
</div>
5+
<div className={"content-card " + styles.topics_card}>
6+
<div className={styles.topics_header}>{topics.name}</div>
7+
<div><TopicsDescriptionMD /></div>
128
</div>
139
);
1410
}

0 commit comments

Comments
 (0)