Change the color of the text header

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

Author: HaudinFlorence

docusaurus.config.ts

@@ -215,6 +215,7 @@ const config: Config = {
 
       copyright: copyright,
     },
+  
 
       colorMode: {
         defaultMode: 'light',

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

@@ -3,22 +3,55 @@
   width: 100%;
   height: auto;
   display: block;
+  opacity: calc(0.4);
 }
 
 .pydata_banner {
   position: relative;
 }
 
-@media only screen and (max-width: 996px) {
+@media only screen and (max-width: 530px) {
+  /*Small mobile screens*/
+  .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: 16px;
+    font-weight: 600;
+    position: absolute;
+    top: 25%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .pydata_informations {
+    text-align: center;
+    color:var(--ifm-color-primary-p2);
+    font-size: 12px;
+    font-weight: 600;
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@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-primary-p1);
-    font-size: 1em;
+    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%;
@@ -27,17 +60,14 @@
 
   .pydata_informations {
     text-align: center;
-    color: white;
-    font-size: 0.75em;
+    color: var(--ifm-color-primary-p2);
+    font-size: var(--ifm-font-size-small);
+    font-weight: 600;
     position: absolute;
     top: 70%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
-
-  a {
-    color: var(--ifm-color-primary-p1);
-  }
 }
 
 .hero_container {
@@ -75,8 +105,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%;
@@ -85,15 +117,13 @@
 
   .pydata_informations {
     text-align: center;
-    color: white;
-    font-size: 1.5em;
+    color: var(--ifm-color-primary-p2);
+    font-size: var(--ifm-font-size-medium);
+    font-weight: 600;
     position: absolute;
     top: 70%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
 
-  a {
-    color: var(--ifm-color-primary-p1);
-  }
 }

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;