Fixing up logged in sheet.

This commit is contained in:
Bradley Shellnut 2023-09-12 16:49:04 -07:00
parent 98acc78ea3
commit df665376ef
3 changed files with 105 additions and 77 deletions

View file

@ -2,7 +2,7 @@
import { enhance } from '$app/forms';
import { LogOut } from 'lucide-svelte';
import { Button } from '$lib/components/ui/button';
import { Toggle } from "$lib/components/ui/toggle";
// import { Toggle } from "$lib/components/ui/toggle"; -- TODO: Add light/dark toggle
import * as Avatar from "$lib/components/ui/avatar";
import * as Sheet from "$lib/components/ui/sheet";
import Logo from '$components/logo.svelte';
@ -34,9 +34,6 @@
<Sheet.Content side="right">
<Sheet.Header>
<Sheet.Title>Menu</Sheet.Title>
<Toggle aria-label="toggle bold">
</Toggle>
</Sheet.Header>
<div class="menu">
<Sheet.Close asChild let:builder>

View file

@ -39,7 +39,7 @@
<div class="quote-wrapper">
<blockquote class="quote">
<p>
"How many games do I own? What was the last one I played? What haven't I played in a long time? If this sound like you then Bored Game is your new best friend."
"How many games do I own? What was the last one I played? What haven't I played in a long time? If this sounds like you then Bored Game is your new best friend."
</p>
<footer>Bradley</footer>
</blockquote>

View file

@ -43,14 +43,9 @@
<title>Bored Game | Sign Up</title>
</svelte:head>
<div class="page">
<div class="sign-up">
<form method="POST" action="/sign-up" use:enhance>
<div class="grid w-full max-w-sm items-center gap-2.5">
<h2
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
>
Signup for an account
</h2>
<h2>Signup for an account</h2>
<Label for="username">Username</Label>
<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
{#if $errors.username}
@ -116,9 +111,45 @@
</Alert.Description>
</Alert.Root>
{/if}
</div>
</form>
</div>
<style scoped>
<style lang="postcss">
.sign-up {
display: flex;
margin-top: 1.5rem;
flex-direction: column;
justify-content: center;
width: 100%;
margin-right: auto;
margin-left: auto;
@media (min-width: 640px) {
width: 350px;
}
form {
display: grid;
gap: 0.5rem;
align-items: center;
max-width: 24rem;
h2:first-child {
margin-top: 0;
}
h2 {
padding-bottom: 0.5rem;
border-bottom-width: 1px;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 600;
letter-spacing: -0.025em;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
scroll-margin: 5rem;
}
}
}
</style>