From b2d229c1162b852ada1dd64cbcebcb3d8b32acbb Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Mon, 10 Jul 2023 13:10:17 -0700
Subject: [PATCH] Move header pane style to base khoj.css for reuse. Fix logo
 size

---
 src/khoj/interface/web/assets/khoj.css  | 21 +++++++++++++++++++--
 src/khoj/interface/web/base_config.html |  9 ---------
 src/khoj/interface/web/chat.html        | 12 ------------
 src/khoj/interface/web/index.html       | 15 +--------------
 4 files changed, 20 insertions(+), 37 deletions(-)

diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index f3b10e33..7372992e 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -68,9 +68,10 @@ a.khoj-logo {
     text-decoration: none;
     font-size: 20px;
     font-weight: normal;
-    padding: 8px;
+    padding: 0 4px;
     border-radius: 4px;
     justify-self: center;
+    margin: 0;
 }
 .khoj-nav a:hover {
     background-color: var(--primary-hover);
@@ -79,6 +80,22 @@ a.khoj-logo {
     background-color: var(--primary);
 }
 img.khoj-logo {
-    width: min(60vw, 100px);
+    width: min(60vw, 111px);
+    max-width: 100%;
     justify-self: center;
 }
+
+@media only screen and (max-width: 600px) {
+    div.khoj-header {
+        display: grid;
+        grid-auto-flow: column;
+        gap: 20px;
+        padding: 16px 10px;
+        margin: 0 0 16px 0;
+    }
+
+    nav.khoj-nav {
+        grid-gap: 0px;
+        justify-content: space-between;
+    }
+}
diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index 2cd5f7eb..76a25eeb 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -48,15 +48,6 @@
                 display: none;
             }
 
-            div.khoj-header {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                padding: 0;
-                margin-bottom: 8px;
-                margin-top: 8px;
-                padding-top: 8px;
-            }
-
             body.khoj-configure {
                 padding: 0;
             }
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index a8c94000..90f9cded 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -364,18 +364,6 @@
             a.khoj-banner {
                 display: block;
             }
-
-            div.khoj-header {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                padding: 0;
-                margin-bottom: 8px;
-                margin-top: 8px;
-            }
-
-            nav.khoj-nav {
-                grid-gap: 0px;
-            }
         }
         @media only screen and (min-width: 600px) {
             body {
diff --git a/src/khoj/interface/web/index.html b/src/khoj/interface/web/index.html
index c7cc3a24..6ba57e87 100644
--- a/src/khoj/interface/web/index.html
+++ b/src/khoj/interface/web/index.html
@@ -275,19 +275,6 @@
             body > * {
                 grid-column: 1;
             }
-
-            div.khoj-header {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                padding: 0;
-                margin-bottom: 8px;
-                margin-top: 8px;
-            }
-
-            nav.khoj-nav {
-                grid-gap: 0px;
-            }
-
         }
         @media only screen and (min-width: 600px) {
             body {
@@ -303,7 +290,7 @@
         body {
             padding: 0px;
             margin: 0px;
-            background: #f8fafc;
+            background: #fff;
             color: #475569;
             font-family: roboto, karma, segoe ui, sans-serif;
             font-size: 20px;