Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind fixes #20

Merged
merged 1 commit into from
Apr 4, 2024
Merged

Tailwind fixes #20

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions src/routes/login/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,38 @@
<div class="grid grid-cols-1 justify-items-center place-content-center font-inter h-screen" >
<style lang="postcss">
.base{
@apply grid grid-cols-1 justify-items-center place-content-center font-inter h-screen
}
.login_button {
@apply bg-transparent my-3 text-black font-semibold py-2 px-4 border border-black rounded flex items-center justify-center sm:w-1/3 w-1/2 p-5 hover:bg-slate-600 hover:text-white
}
.text_div {
@apply my-5 flex flex-row items-center text-base sm:w-1/3 w-1/2 before:bg-black before:m-2 before:content-[''] before:p-px before:flex-1 after:bg-black after:m-2 after:content-[''] after:p-px after:flex-1
}
.email_input {
@apply bg-transparent my-3 sm:text-xl text-base border p-3 border-black rounded-lg w-5/12 focus:ring-blue-500 focus:border-blue-500
}
</style>


<div class="base" >
<h1 class="text-4xl my-5">Welcome to Mind Palace</h1>
<p class="text-2xl mb-8">To get started, sign in with Google or Github</p>
<p class="text-2xl mb-8 text-center">To get started, sign in with Google or Github</p>

<button class="bg-transparent text-left my-2 text-black font-semibold py-2 px-4 border border-black rounded inline-flex items-center w-1/2 max-h-16">
<svg class="w-1/2 h-1/2 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<button class="login_button">
<svg class="w-8 h-8 me-2 px-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z" clip-rule="evenodd"/>
</svg>
Login with Google
</button>
<button class="bg-transparent text-left my-2 text-black font-semibold py-2 px-4 border border-black rounded inline-flex items-center w-1/2 max-h-16">
<svg class="w-1/2 h-1/2 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<button class="login_button ">
<svg class="w-8 h-8 me-2 px-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clip-rule="evenodd"/>
</svg>
Login with Github
</button>

<p class="flex flex-row items-center text-m w-1/3 before:bg-black before:m-2 before:content-[''] before:p-px before:flex-1 after:bg-black after:m-2 after:content-[''] after:p-px after:flex-1"> or log in with email</p>
<p class="text_div"> or log in with email</p>

<input type="text" placeholder="Type your email here..." class="bg-transparent text-xl border border-black rounded-lg w-1/2 focus:ring-blue-500 focus:border-blue-500">
<div class="flex flex-row space-x-4 justify-around text-blue-500 underline">
<a href="/app">Sign up</a>
<a href="/app">Forgot email?</a>
<a href="/app">Forgot password?</a>
</div>
<input type="text" placeholder="Type your email here..." class="email_input">
</div>