Change the color of the text header

Add an additionnal media query for smaller mobile screen sizes
Adjust the font sizes

Author: HaudinFlorence

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

@@ -9,16 +9,19 @@
   position: relative;
 }
 
-@media only screen and (max-width: 996px) {
-  /*Mobile*/
+
+@media only screen and (max-width: 530px) {
+  /*Small mobile screens*/
   .logos_carousel {
     display: none;
   }
 
   .pydata_header {
     text-align: center;
-    color: var(--ifm-color-primary-p1);
-    font-size: 1em;
+    color: var(--ifm-color-blue-jupyter);
+    font-family: var(--ifm-font-family-bebas-neue);
+    font-size: var(--ifm-font-normal);
+    font-weight: 600;
     position: absolute;
     top: 40%;
     left: 50%;
@@ -39,6 +42,38 @@
     color: var(--ifm-color-primary-p1);
   }
 }
+@media only screen and (min-width: 530px) and (max-width: 996px)  {
+  /*Mobile*/
+  .logos_carousel {
+    display: none;
+  }
+
+  .pydata_header {
+    text-align: center;
+    color: var(--ifm-color-blue-jupyter);
+    font-family: var(--ifm-font-family-bebas-neue);
+    font-size: var(--ifm-font-size-medium);
+    font-weight: 600;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .pydata_informations {
+    text-align: center;
+    color: white;
+    font-size: var(--ifm-font-size-small);
+    position: absolute;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  a {
+    color: var(--ifm-color-primary-p1);
+  }
+}
 
 .hero_container {
   background-color: var(--ifm-color-primary-p0);
@@ -75,8 +110,10 @@
   /*Desktop*/
   .pydata_header {
     text-align: center;
-    color: var(--ifm-color-primary-p1);
-    font-size: 2em;
+    color: var(--ifm-color-blue-jupyter);
+    font-family: var(--ifm-font-family-bebas-neue);
+    font-size: var(--ifm-font-size-large);
+    font-weight: 600;
     position: absolute;
     top: 40%;
     left: 50%;
@@ -86,7 +123,7 @@
   .pydata_informations {
     text-align: center;
     color: white;
-    font-size: 1.5em;
+    font-size: var(--ifm-font-size-normal);
     position: absolute;
     top: 70%;
     left: 50%;

src/css/custom.css

@@ -36,6 +36,7 @@
   --ifm-font-size-small: 14px;
   --ifm-font-size-normal: 18px;
   --ifm-font-size-medium: 24px;
+  --ifm-font-size-large: 40px;
   --ifm-font-size-main-title: 48px;
   --ifm-font-size-secondary-title: 32px;