tweak header

tobz-nz · Jan 13, 2024 · 9fc20cc · 9fc20cc
1 parent 6106a31
commit 9fc20cc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/css/utilities.css b/css/utilities.css
@@ -1,20 +1,36 @@
 @layer utilities {
     .flex {
         display: flex;
+
+        .col {
+            flex-direction: column;
+        }
     }
 
     .items-center {
         align-items: center;
     }
 
-    .gap-1 {
-        gap: var(--size-1);
+    .gap-2 {
+        gap: var(--size-2);
     }
 
     .mb-4 {
         margin-bottom: var(--size-4);
     }
 
+    .text-0 {
+        font-size: var(--font-size-0);
+    }
+
+    .text-1 {
+        font-size: var(--font-size-1);
+    }
+
+    .text-3 {
+        font-size: var(--font-size-3);
+    }
+
 	.pointer {
 		cursor: pointer;
 	}

diff --git a/index.html b/index.html
@@ -67,14 +67,17 @@
     <body>
         <meili-instance>
             <header>
-                <h1 class="flex gap-1 items-center font-2">
-                    <img width="52" height="30" src="/images/logo.svg" alt="" /> Meilisearch UI
-                </h1>
+                <div class="flex gap-2 items-center">
+                    <img width="68" height="40" src="/images/logo.svg" alt="" />
+                    <div class="flex col">
+                        <h1 class="text-3">Meilisearch UI</h1>
+                        <instance-version class="text-0" onerror="document.querySelector('#instance-settings-dialog').showModal()"></instance-version>
+                    </div>
+                </div>
                 <instance-details>
                     <instance-name></instance-name>
                     <instance-host></instance-host>
                     <instance-size></instance-size>
-                    <instance-version onerror="document.querySelector('#instance-settings-dialog').showModal()"></instance-version>
                     <instance-status></instance-status>
                     <svg-icon
                         aria-role="button"