sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify login page styling on web client

Browse source 
- Center all elements: icon, text and button
- Use khoj icon not logo-text
- Simplify login title text
This commit is contained in:
Debanjum Singh Solanky 2023-11-02 16:38:08 -07:00
parent 7b7f6d3bc8
commit b6f07099cd
2 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/khoj/interface/web/assets/khoj.css
View file

@ -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;

54
src/khoj/interface/web/login.html
View file

@ -22,36 +22,30 @@
<button id="khoj-banner-submit" class="khoj-banner-button">Submit</button>
</div>
{% endif %}
<!--Add Header Logo and Nav Pane-->
<div class="khoj-header">
{% if demo %}
<a class="khoj-logo" href="https://khoj.dev" target="_blank">
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
</a>
{% else %}
<a class="khoj-logo" href="/">
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
</a>
{% endif %}
</div>
<div class="khoj-header"></div>
<!-- Sign Up button for Google OAuth -->
<!-- Login Modal -->
<div id="login-modal">
<h1 class="login-modal-title">Become superhuman with your personal knowledge base copilot</h1>
<img class="khoj-logo" src="/static/assets/icons/favicon-128x128.png" alt="Khoj"></img>
<div class="login-modal-title">Log in to Khoj</div>
<!-- Sign Up/Login with Google OAuth -->
<div
class="g_id_signin"
data-shape="circle"
data-text="continue_with"
data-logo_alignment="center"
data-size="large"
data-width="300"
data-type="standard">
</div>
<div id="g_id_onload"
data-client_id="{{ google_client_id }}"
data-ux_mode="redirect"
data-login_uri="{{ redirect_uri }}"
data-auto-select="true">
</div>
</div>
<div id="g_id_onload"
data-client_id="{{ google_client_id }}"
data-ux_mode="redirect"
data-login_uri="{{ redirect_uri }}">
<div class="khoj-footer"></div>
</div>
@ -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) {