feat: Make header more respsonsive

csaf-poc · Nov 3, 2023 · 0656ffe · 0656ffe
1 parent ae5d228
commit 0656ffe
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -47,16 +47,26 @@
     margin-right: 3rem;
   }
   .header {
-    display: flex;
+    display: flex-column;
     align-items: center;
-    margin-bottom: 1.5rem;
   }
-  .programname {
-    min-width: 45vw;
+
+  h1 {
+    margin-bottom: 0;
   }
-  .version {
-    min-width: 20vw;
-    text-align: right;
-    margin-left: auto;
+  @media only screen and (min-width: 768px) {
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1.5rem;
+    }
+    .programname {
+      min-width: 45vw;
+    }
+    .version {
+      min-width: 20vw;
+      text-align: right;
+      margin-left: auto;
+    }
   }
 </style>