feat(dashboard/Header): responsive design

kachvame · Apr 17, 2022 · deade1a · deade1a
1 parent dead5d3
commit deade1a
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/dashboard/src/components/Header.svelte b/dashboard/src/components/Header.svelte
@@ -9,20 +9,25 @@
   @import '@carbon/colors';
 
   .header {
+    display: flex;
+    place-items: center;
+    justify-content: center;
+    gap: 2vw;
     background-color: $gray-100;
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+    padding-top: 2vmin;
+    padding-bottom: 2vmin;
   }
 
   .header-title {
     text-align: center;
+    font-size: min(2.625rem, 10vw);
   }
 
   .header-kek {
     text-align: center;
   }
 
   .header-kek > img {
-    height: 100px;
+    height: min(6.25rem, 20vw);
   }
 </style>