From 9b9886a8d2060d3cf1c6c6acd28da283af4e14fc Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sat, 22 Jun 2024 13:40:34 +0500
Subject: [PATCH] refactor: header - make elements left align for mobile view

---
 index.html        |  9 ++---
 public/output.css | 92 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index dc0a519..7f17ad5 100644
--- a/index.html
+++ b/index.html
@@ -37,9 +37,10 @@
 
 <body class="light dark:bg-slate-900" id="body">
     <header class="sticky top-0 left-0 pt-4 pb-6 shadow-lg bg-slate-50 dark:bg-slate-800">
-        <div class="flex flex-col md:flex-row gap-2 items-center container max-w-[1440px] justify-between px-4">
-            <div><img src="/public/images/logo-light.svg" alt="wah.su" id="logo" /></div>
-            <div>
+        <div
+            class="flex flex-col md:flex-row gap-2 md:gap-0 items-center container max-w-[1440px] justify-between px-4">
+            <div class="self-start"><img src="/public/images/logo-light.svg" alt="wah.su" id="logo" /></div>
+            <div class="self-start md:self-auto">
                 <a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
                     <div class="hidden w-4 h-4 bg-green-500 rounded-full dark:bg-green-400" id="status-up-icon"></div>
                     <div class="hidden w-4 h-4 bg-yellow-400 rounded-full dark:bg-yellow-200" id="status-degraded-icon">
@@ -50,7 +51,7 @@
                     <p class="hidden dark:text-slate-50" id="status-down-text">All Systems Down.</p>
                 </a>
             </div>
-            <div class="flex flex-row items-center justify-center gap-6">
+            <div class="flex flex-row items-center self-start justify-center gap-6 -ml-4">
                 <label class="inline-flex items-center cursor-pointer">
                     <span class="mr-4 text-sm font-medium text-gray-900 ms-3 dark:text-gray-300"><svg
                             class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true"
diff --git a/public/output.css b/public/output.css
index ff18a3d..5406776 100644
--- a/public/output.css
+++ b/public/output.css
@@ -1141,6 +1141,26 @@ input:checked + .toggle-bg {
   z-index: 50;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.row-span-1 {
+  grid-row: span 1 / span 1;
+}
+
+.row-span-2 {
+  grid-row: span 2 / span 2;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1198,6 +1218,14 @@ input:checked + .toggle-bg {
   margin-left: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.-ml-4 {
+  margin-left: -1rem;
+}
+
 .block {
   display: block;
 }
@@ -1368,6 +1396,10 @@ input:checked + .toggle-bg {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1420,12 +1452,24 @@ input:checked + .toggle-bg {
   gap: 1.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1609,6 +1653,21 @@ input:checked + .toggle-bg {
   padding-bottom: 1rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -1941,11 +2000,36 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
 }
 
+@media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .sm\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .sm\:py-2\.5 {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:ml-0 {
     margin-left: 0px;
   }
 
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -1954,6 +2038,14 @@ input:checked + .toggle-bg {
     justify-content: flex-start;
   }
 
+  .md\:gap-0 {
+    gap: 0px;
+  }
+
+  .md\:self-auto {
+    align-self: auto;
+  }
+
   .md\:text-8xl {
     font-size: 6rem;
     line-height: 1;
