i love web design!
This commit is contained in:
parent
428b391f13
commit
b1555b7fd7
13 changed files with 27 additions and 32 deletions
|
@ -16,3 +16,7 @@ body {
|
|||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply transition-colors;
|
||||
}
|
||||
|
|
|
@ -28,14 +28,14 @@
|
|||
<div class="flex space-x-2">
|
||||
<button on:click="history.back();">
|
||||
<div
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
||||
>
|
||||
<p>Go Back</p>
|
||||
</div>
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
||||
>
|
||||
<p>Go Home</p>
|
||||
</a>
|
||||
|
|
|
@ -10,10 +10,7 @@
|
|||
</script>
|
||||
|
||||
<div class="flex relative w-fit">
|
||||
<button
|
||||
class="my-auto w-min transition-colors hover:text-overlay2 {visible && 'text-overlay2'}"
|
||||
on:click={toggle}
|
||||
>
|
||||
<button class="my-auto w-min hover:text-overlay2 {visible && 'text-overlay2'}" on:click={toggle}>
|
||||
<Menu size="20"></Menu>
|
||||
</button>
|
||||
{#if visible}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
let percent = 0;
|
||||
</script>
|
||||
|
||||
<div class="rounded-md bg-mantle">
|
||||
<div class="rounded-md transition-all bg-mantle">
|
||||
<div
|
||||
in:fade|global={{ delay: 100 * i }}
|
||||
class="flex px-1.5 w-full h-14 rounded-md transition-all"
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<div
|
||||
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
|
||||
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md py-auto bg-crust"
|
||||
></div>
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div class="transition-colors fill-text">
|
||||
<div class=" fill-text">
|
||||
<Logo />
|
||||
</div>
|
||||
<form on:submit|preventDefault>
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div class="transition-colors fill-text">
|
||||
<div class=" fill-text">
|
||||
<Logo />
|
||||
</div>
|
||||
<form on:submit|preventDefault>
|
||||
|
|
|
@ -9,9 +9,7 @@
|
|||
import Logo from '$lib/components/Logo.svelte';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
|
||||
>
|
||||
<div class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md py-auto bg-crust">
|
||||
<div class="flex my-auto md:space-x-6">
|
||||
<a
|
||||
href="/dashboard"
|
||||
|
|
|
@ -5,13 +5,13 @@
|
|||
</script>
|
||||
|
||||
<button
|
||||
class="group/button {pulse ? 'animate-pulse cursor-wait' : ''} transition-colors"
|
||||
class="group/button {pulse ? 'animate-pulse cursor-wait' : ''} "
|
||||
type="button"
|
||||
on:click={click}
|
||||
{disabled}
|
||||
>
|
||||
<div
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
@ -7,12 +7,12 @@
|
|||
<!-- insane that i have to do this because -->
|
||||
<!-- 'type' attribute cannot be dynamic if input uses two-way binding -->
|
||||
{#if type === 'username'}
|
||||
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
|
||||
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
|
||||
<div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
|
||||
<div class="py-0.5 pr-1 border-r-2 border-overlay2">
|
||||
<slot />
|
||||
</div>
|
||||
<input
|
||||
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
|
||||
class="py-0.5 bg-crust peer placeholder:text-overlay1"
|
||||
type="username"
|
||||
{name}
|
||||
{id}
|
||||
|
@ -28,12 +28,12 @@
|
|||
</div>
|
||||
</div>
|
||||
{:else if type === 'email'}
|
||||
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
|
||||
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
|
||||
<div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
|
||||
<div class="py-0.5 pr-1 border-r-2 border-overlay2">
|
||||
<slot />
|
||||
</div>
|
||||
<input
|
||||
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
|
||||
class="py-0.5 bg-crust peer placeholder:text-overlay1"
|
||||
type="email"
|
||||
{name}
|
||||
{id}
|
||||
|
@ -49,12 +49,12 @@
|
|||
</div>
|
||||
</div>
|
||||
{:else if type === 'password'}
|
||||
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
|
||||
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
|
||||
<div class="flex p-2 space-x-1 rounded-lg shadow-md bg-crust">
|
||||
<div class="py-0.5 pr-1 border-r-2 border-overlay2">
|
||||
<slot />
|
||||
</div>
|
||||
<input
|
||||
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
|
||||
class="py-0.5 bg-crust peer placeholder:text-overlay1"
|
||||
type="password"
|
||||
{name}
|
||||
{id}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
{:else if style === 'button'}
|
||||
<a
|
||||
{href}
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400
|
||||
class="flex p-2 space-x-2 rounded-lg border-b-2 border-neutral-400
|
||||
hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
viewBox="0 0 1200 628"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
class="transition-colors fill-inherit"
|
||||
class=" fill-inherit"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
Before Width: | Height: | Size: 291 KiB After Width: | Height: | Size: 291 KiB |
|
@ -43,9 +43,7 @@
|
|||
input.click();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-overlay1"
|
||||
>
|
||||
<div class="flex m-auto text-lg text-surface2 group-hover:text-overlay1">
|
||||
<Upload></Upload>
|
||||
</div>
|
||||
</button>
|
||||
|
@ -56,9 +54,7 @@
|
|||
running = true;
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-green"
|
||||
>
|
||||
<div class="flex m-auto text-lg text-surface2 group-hover:text-green">
|
||||
<Check class=""></Check>
|
||||
</div>
|
||||
</button>
|
||||
|
|
Loading…
Reference in a new issue