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