From d52d4f877493fc7a3c636860ea7ddb62f770bdb7 Mon Sep 17 00:00:00 2001
From: Ahmed AbdelHalim <pm@a14m.me>
Date: Sun, 7 Sep 2025 19:38:48 +0200
Subject: Fix responsive styling and refactor order

---
 static/css/styles.css | 97 +++++++++++++++++++++++++++------------------------
 1 file changed, 51 insertions(+), 46 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index acf0773..ce6cc6e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -16,40 +16,14 @@ html {
   background-color: var(--light-black);
 }
 
-@media (prefers-color-scheme: light) {
-  html {
-    background-color: var(--light-white);
-  }
-  .message.loading,
-  .message.warning {
-    border-color: var(--light-yellow);
-  }
-  .message.success {
-    border-color: var(--light-green);
-  }
-  .message.error {
-    border-color: var(--light-red);
-  }
-  .connection.loading {
-    border-color: var(--light-yellow);
-  }
-
-  .connection.active {
-    border-color: var(--light-green);
-  }
-
-  .login__form button {
-    color: var(--light-green);
-  }
-}
-
-/* Handle logout on small devices */
-@media (max-width: 600px) {
-  .header__logout {
-    position: inherit !important;
-  }
-  .header__logout button {
-    width: 100% !important;
+header {
+  text-align: center;
+  font-style: normal;
+  .header__title {
+    font-size: 32px;
+    margin-bottom: -16px;
+    margin-top: 36px;
+    clear: right;
   }
 }
 
@@ -57,20 +31,13 @@ body {
   font-family: "PT Sans", "Kohinoor Bangla", sans-serif;
   max-width: 1024px;
   min-width: 375px;
-  margin: 0 2rem;
+  margin: 0 auto;
   float: none;
   font-size: 18px;
 }
 
-header {
-  text-align: center;
-  font-style: normal;
-  .header__title {
-    font-size: 32px;
-    margin-bottom: -16px;
-    margin-top: 36px;
-    clear: right;
-  }
+main {
+  margin: 0 2rem;
 }
 
 .header__logout {
@@ -79,6 +46,10 @@ header {
   right: 1rem;
 }
 
+footer {
+  margin: 32px;
+}
+
 .header__logout button {
   border: 1px solid;
   padding: 1rem;
@@ -169,6 +140,40 @@ header {
   margin-top: 1rem;
 }
 
-footer {
-  margin: 32px;
+@media (prefers-color-scheme: light) {
+  html {
+    background-color: var(--light-white);
+  }
+  .message.loading,
+  .message.warning {
+    border-color: var(--light-yellow);
+  }
+  .message.success {
+    border-color: var(--light-green);
+  }
+  .message.error {
+    border-color: var(--light-red);
+  }
+  .connection.loading {
+    border-color: var(--light-yellow);
+  }
+
+  .connection.active {
+    border-color: var(--light-green);
+  }
+
+  .login__form button {
+    color: var(--light-green);
+  }
+}
+
+/* Handle logout on small devices */
+@media (max-width: 600px) {
+  .header__logout {
+    position: inherit !important;
+    margin: 0 2rem;
+  }
+  .header__logout button {
+    width: 100% !important;
+  }
 }
-- 
cgit v1.2.3