diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index 51b228c9..a4785be2 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -55,6 +55,8 @@
font-family: roboto, karma, segoe ui, sans-serif;
font-weight: 300;
}
+
+.khoj-footer,
.khoj-header {
display: grid;
grid-auto-flow: column;
@@ -62,6 +64,9 @@
padding: 16px 0;
margin: 0 0 16px 0;
}
+.khoj-footer {
+ margin: 16px 0 0 0;
+}
nav.khoj-nav {
display: grid;
diff --git a/src/khoj/interface/web/login.html b/src/khoj/interface/web/login.html
index e04fab7e..5d40397c 100644
--- a/src/khoj/interface/web/login.html
+++ b/src/khoj/interface/web/login.html
@@ -22,36 +22,30 @@
{% endif %}
-
-
+
-
+
-
Become superhuman with your personal knowledge base copilot
+

+
Log in to Khoj
+
+
+
-
+
+
@@ -62,7 +56,7 @@
body {
display: grid;
grid-template-columns: 1fr;
- grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
+ grid-template-rows: 1fr auto 1fr;
font-size: small!important;
}
body > * {
@@ -73,8 +67,7 @@
body {
display: grid;
grid-template-columns: 1fr min(70vw, 100%) 1fr;
- grid-template-rows: 1fr auto auto auto minmax(80px, 100%);
- padding-top: 60vw;
+ grid-template-rows: 1fr auto 1fr;
}
body > * {
grid-column: 2;
@@ -83,6 +76,7 @@
body {
padding: 0px;
margin: 0px;
+ height: 100%;
background: var(--background-color);
color: var(--main-text-color);
font-family: roboto, karma, segoe ui, sans-serif;
@@ -109,6 +103,7 @@
a.khoj-logo {
text-align: center;
+ justify-self: center;
}
button#khoj-banner-submit,
@@ -127,13 +122,9 @@
div#login-modal {
display: grid;
grid-template-columns: 1fr;
- grid-template-rows: 1fr auto auto auto;
- gap: 10px;
- padding: 10px;
- margin: 10px;
- border-radius: 5px;
- border: 1px solid #475569;
- box-shadow: 0 0 11px #aaa;
+ grid-template-rows: 1fr auto auto 1fr;
+ gap: 32px;
+ min-height: 300px;
background: var(--background-color);
margin-left: 25%;
margin-right: 25%;
@@ -144,10 +135,11 @@
display: block;
}
- h1.login-modal-title {
+ .login-modal-title {
text-align: center;
line-height: 28px;
- font-size: x-large;
+ font-size: 24px;
+ font-weight: 500;
}
@media only screen and (max-width: 700px) {