From f6586852d68e9d54e62f5749b3ecb0560c8e9a98 Mon Sep 17 00:00:00 2001
From: Guilherme Rugai Freire <dev@grfreire.com>
Date: Sun, 21 Jul 2024 01:37:11 -0300
Subject: [PATCH] make inbox responsive

---
 pkg/web_server/styles.templ | 57 +++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/pkg/web_server/styles.templ b/pkg/web_server/styles.templ
index 65bca81..75e97dd 100644
--- a/pkg/web_server/styles.templ
+++ b/pkg/web_server/styles.templ
@@ -142,6 +142,39 @@ templ styles() {
             font-style: normal;
         }
 
+        @media (max-width: 1500px) {
+            .header {
+                width: 975px;
+            }
+        }
+
+        @media (max-width: 975px) {
+            .header {
+                width: 100%;
+                padding: 4px 16px;
+
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .header a {
+                margin-bottom: 16px;
+            }
+        }
+
+        @media (max-width: 700px) {
+            .header .header-addr {
+                font-size: 1rem;
+            }
+        }
+
+        @media (max-width: 580px) {
+            .header .header-addr {
+                flex-direction: column;
+                align-items: center;
+            }
+        }
+
         /* FOOTER */
         footer {
             background-color: green;
@@ -194,6 +227,7 @@ templ styles() {
             font-size: 2rem;
             font-family: monospace, "sans-serif";
             color: #CECECE;
+            text-align: center;
         }
 
         body.inbox .inbox-main ul {
@@ -249,6 +283,29 @@ templ styles() {
             font-size: 1.1rem;
         }
 
+        @media (max-width: 1500px) {
+            body.inbox .inbox-main {
+                width: 90%;
+                max-width: 975px;
+            }
+        }
+
+        @media (max-width: 700px) {
+            body.inbox .inbox-main li a {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            body.inbox .inbox-main li a div {
+                max-width: 100%;
+            }
+
+            body.inbox .inbox-main li a .inbox-mail-date {
+                margin: 8px 0 0;
+                font-size: 0.8rem;
+            }
+        }
+
         /* MAIL */
         body.mail {
             width: 100%;