Skip to content

Commit 7f9d991

Browse files
Change the color of the text header
Add an additionnal media query for smaller mobile screen sizes Adjust the font sizes
1 parent fdb1b8f commit 7f9d991

File tree

3 files changed

+48
-16
lines changed

3 files changed

+48
-16
lines changed

docusaurus.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@ const config: Config = {
215215

216216
copyright: copyright,
217217
},
218+
218219

219220
colorMode: {
220221
defaultMode: 'light',

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

Lines changed: 46 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,55 @@
33
width: 100%;
44
height: auto;
55
display: block;
6+
opacity: calc(0.4);
67
}
78

89
.pydata_banner {
910
position: relative;
1011
}
1112

12-
@media only screen and (max-width: 996px) {
13+
@media only screen and (max-width: 530px) {
14+
/*Small mobile screens*/
15+
.logos_carousel {
16+
display: none;
17+
}
18+
19+
.pydata_header {
20+
text-align: center;
21+
color: var(--ifm-color-blue-jupyter);
22+
font-family: var(--ifm-font-family-bebas-neue);
23+
font-size: 16px;
24+
font-weight: 600;
25+
position: absolute;
26+
top: 25%;
27+
left: 50%;
28+
transform: translate(-50%, -50%);
29+
}
30+
31+
.pydata_informations {
32+
text-align: center;
33+
color:var(--ifm-color-primary-p2);
34+
font-size: 12px;
35+
font-weight: 600;
36+
position: absolute;
37+
top: 60%;
38+
left: 50%;
39+
transform: translate(-50%, -50%);
40+
}
41+
}
42+
43+
@media only screen and (min-width: 530px) and (max-width: 996px) {
1344
/*Mobile*/
1445
.logos_carousel {
1546
display: none;
1647
}
1748

1849
.pydata_header {
1950
text-align: center;
20-
color: var(--ifm-color-primary-p1);
21-
font-size: 1em;
51+
color: var(--ifm-color-blue-jupyter);
52+
font-family: var(--ifm-font-family-bebas-neue);
53+
font-size: var(--ifm-font-size-medium);
54+
font-weight: 600;
2255
position: absolute;
2356
top: 40%;
2457
left: 50%;
@@ -27,17 +60,14 @@
2760

2861
.pydata_informations {
2962
text-align: center;
30-
color: white;
31-
font-size: 0.75em;
63+
color: var(--ifm-color-primary-p2);
64+
font-size: var(--ifm-font-size-small);
65+
font-weight: 600;
3266
position: absolute;
3367
top: 70%;
3468
left: 50%;
3569
transform: translate(-50%, -50%);
3670
}
37-
38-
a {
39-
color: var(--ifm-color-primary-p1);
40-
}
4171
}
4272

4373
.hero_container {
@@ -75,8 +105,10 @@
75105
/*Desktop*/
76106
.pydata_header {
77107
text-align: center;
78-
color: var(--ifm-color-primary-p1);
79-
font-size: 2em;
108+
color: var(--ifm-color-blue-jupyter);
109+
font-family: var(--ifm-font-family-bebas-neue);
110+
font-size: var(--ifm-font-size-large);
111+
font-weight: 600;
80112
position: absolute;
81113
top: 40%;
82114
left: 50%;
@@ -85,15 +117,13 @@
85117

86118
.pydata_informations {
87119
text-align: center;
88-
color: white;
89-
font-size: 1.5em;
120+
color: var(--ifm-color-primary-p2);
121+
font-size: var(--ifm-font-size-medium);
122+
font-weight: 600;
90123
position: absolute;
91124
top: 70%;
92125
left: 50%;
93126
transform: translate(-50%, -50%);
94127
}
95128

96-
a {
97-
color: var(--ifm-color-primary-p1);
98-
}
99129
}

src/css/custom.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
--ifm-font-size-small: 14px;
3737
--ifm-font-size-normal: 18px;
3838
--ifm-font-size-medium: 24px;
39+
--ifm-font-size-large: 40px;
3940
--ifm-font-size-main-title: 48px;
4041
--ifm-font-size-secondary-title: 32px;
4142

0 commit comments

Comments
 (0)