added improved responsive behavior to header (#5)

Author: MathyouMB

src/components/Header/Header.svelte

@@ -10,24 +10,29 @@
 <style>
     .header-wrap {
         display: flex;
-        justify-content: space-evenly;
+        justify-content: space-between;
         align-items: center;
-        width: 80%;
+        width: 70rem;
+        margin: 2rem;
     }
 
     .left {
-        flex: 0 0 40%;
+        margin: 1rem;
     }
 
     .right {
-        flex: 0 0 30%;
+        margin: 1rem;
     }
 
-    @media only screen and (max-width: 760px) {
+    @media only screen and (max-width: 970px) {
         .header-wrap {
             width: 95%;
             flex-direction: column;
-            height: 60vh;
+            height: fit-content;
+        }
+
+        .right {
+            margin-top: 3rem;
         }
     }
 </style>

src/components/HeaderInformation/HeaderInformation.svelte

@@ -20,14 +20,15 @@
     .header-information {
         display: flex;
         flex-direction: column;
+        width: fit-content;
     }
 
     .title-main {
         font-size: 4rem;
         font-weight: bold;
         font-family: 'Nunito', sans-serif;
         margin: 0;
-        width: fit-content;
+        white-space: nowrap;
     }
 
     .title-top {
@@ -42,6 +43,7 @@
         font-size: 1.3rem;
         font-family: 'Nunito', sans-serif;
         margin-top: 1.2rem;
+        width: 30rem;
     }
 
     .header-buttons {

src/components/Navbar/Navbar.svelte

@@ -4,9 +4,9 @@
     .navbar{
         position: fixed;
         width: 100%;
-        min-height: 4.5rem;
+        min-height: 4rem;
         box-shadow: 0 2px 4px 1px rgb(0 0 0 / 20%);
         z-index: 10;
-        background-color: white;
+        background-color: #4285f4ff;  
     }
 </style>

src/pages/Home/Home.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="home-page">
-    <div></div>
+    <div class="navbar-spacing"></div>
 	<div class="header-center"><Header/></div>
 	<Footer/>
 </div>
@@ -20,4 +20,8 @@
         display: flex;
         justify-content: center;
     }
+
+    .navbar-spacing {
+        min-height: 4rem;
+    }
 </style>