diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css index 1e2274a2..f3b10e33 100644 --- a/src/khoj/interface/web/assets/khoj.css +++ b/src/khoj/interface/web/assets/khoj.css @@ -41,17 +41,28 @@ } .khoj-header { display: grid; - grid-auto-flow: row; + grid-auto-flow: column; gap: 20px; padding: 16px 0; margin: 0 0 16px 0; } -.khoj-nav { + +nav.khoj-nav { display: grid; grid-auto-flow: column; grid-gap: 32px; - justify-self: center; + justify-self: right; } + +a.khoj-nav { + display: flex; + align-items: center; +} + +a.khoj-logo { + justify-self: left; +} + .khoj-nav a { color: #333; text-decoration: none; @@ -68,6 +79,6 @@ background-color: var(--primary); } img.khoj-logo { - width: min(60vw, 150px); + width: min(60vw, 100px); justify-self: center; } diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html index 6d3d8655..2cd5f7eb 100644 --- a/src/khoj/interface/web/base_config.html +++ b/src/khoj/interface/web/base_config.html @@ -9,13 +9,19 @@ -
- - +
+
+
+ + +
+
{% block content %} @@ -28,6 +34,41 @@ margin: 0; padding: 0; } + @media only screen and (max-width: 600px) { + body { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr auto auto auto minmax(80px, 100%); + } + body > * { + grid-column: 1; + } + + div.filler { + 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; + } + } + + img.khoj-logo { + max-width: none!important; + } + div.khoj-header-wrapper{ + display: grid; + grid-template-columns: 1fr min(70vw, 100%) 1fr; + } .page { display: grid; grid-auto-flow: row; diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index 7914d3a3..a8c94000 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -181,19 +181,19 @@
{% endif %} {% if demo %} - + {% else %} - + {% endif %}
@@ -364,6 +364,18 @@ 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 8702d0c6..c7cc3a24 100644 --- a/src/khoj/interface/web/index.html +++ b/src/khoj/interface/web/index.html @@ -238,10 +238,10 @@ {% endif %} @@ -270,10 +270,24 @@ display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto minmax(80px, 100%); + font-size: small!important; } 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 {