Merge pull request #12 from wethmiranasinghe/main

Flexbox Layout
cepdnaclk · Jun 10, 2024 · 4841852 · 4841852
2 parents c64b384 + 35c2405
commit 4841852
Showing 1 changed file with 115 additions and 10 deletions.
diff --git a/front-end/src/Header.css b/front-end/src/Header.css
@@ -1,7 +1,5 @@
 
 :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
     font-weight: 400;
 
     color-scheme: light dark;
@@ -22,7 +20,7 @@
   }
   a {
     font-weight: 600;
-    font-size: 1em;
+    font-size: 0.9em;
     color: #646cff;
     text-decoration: inherit;
   }
@@ -63,15 +61,17 @@
 
   .Erasmus-plus-Logo{
     margin-top: 20px;
-    max-width: 45%;
-    margin-left: 40px;
+    width: 150px;
+    margin-left: 100px;
+    margin-right: 70px;
     height: auto;
   }
 
   .Cycle-Logo{
-    max-width: 20%;
+    width: 280px;
     height: auto;
-    margin-right: 20px;
+    margin-right: 30px;
+    margin-top: 20px
   }
 
   nav {
@@ -92,7 +92,7 @@
     padding: 10px 30px;
     display: block;
     text-align: center;
-    width: 188px;
+    width: 185px;
   }
 
   .headerNavBar a:hover{
@@ -109,7 +109,6 @@
     border-color: hsla(214, 54%, 60%);
     background-color: hsla(214, 85%, 71%);
     box-shadow: rgba(0,0,0,0.2);
-    min-width: 160px;
     z-index: 1;
   }
 
@@ -127,4 +126,110 @@
 
   .headerDropDown:hover .dropdown-content{
     display: block;
-  }
+  }
+
+  /* Media queries for responsiveness */
+@media screen and (max-width: 1400px) {
+  .logo-block {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
+
+  .Erasmus-plus-Logo {
+      width: 100px; /* smaller width for medium screens */
+  }
+
+  .Cycle-Logo {
+      width: 200px; /* smaller width for medium screens */
+  }
+  h1 {
+    font-size: 4em;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 0.9em;
+    font-weight: 400;
+  }
+
+  nav ul {
+    flex-direction: column;
+    align-items: center;
+}
+
+.headerNavBar a {
+    padding: 10px 25px;
+    text-align: center;
+    width: 150px;
+}
+
+.dropdown-content a{
+  padding: 10px 25px;
+}
+
+.nav-toggle {
+    display: block;
+    margin: 10px;
+}
+
+a {
+  font-weight: 500;
+  font-size: 0.8em;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+}
+
+@media screen and (max-width: 768px) {
+  h1 {
+    font-size: 2em;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 0.6em;
+    font-weight: 400;
+  }
+
+  .logo-block {
+      flex-direction: column;
+      align-items: center;
+  }
+
+  .Erasmus-plus-Logo {
+      display: none;
+  }
+
+  .Cycle-Logo {
+      display: none;
+  }
+
+  nav ul {
+      flex-direction: column;
+      align-items: center;
+  }
+
+  .headerNavBar a {
+      padding: 10px 25px;
+      text-align: center;
+      width: 130px;
+  }
+
+  .dropdown-content a{
+    padding: 10px 25px;
+  }
+
+  .nav-toggle {
+      display: block;
+      margin: 10px;
+  }
+
+  a {
+    font-weight: 500;
+    font-size: 0.8em;
+    color: #646cff;
+    text-decoration: inherit;
+  }
+}