transitions, theme stuff, layout stuff
This commit is contained in:
parent
4301584467
commit
9655fc6bae
11 changed files with 39 additions and 20 deletions
|
@ -10,13 +10,16 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex relative w-fit">
|
<div class="flex relative w-fit">
|
||||||
<button class="my-auto w-min" on:click={toggle}>
|
<button
|
||||||
<Menu class="w-5 h-5"></Menu>
|
class="my-auto w-min transition-colors hover:text-overlay2 {visible && 'text-overlay2'}"
|
||||||
|
on:click={toggle}
|
||||||
|
>
|
||||||
|
<Menu size="20"></Menu>
|
||||||
</button>
|
</button>
|
||||||
{#if visible}
|
{#if visible}
|
||||||
<div
|
<div
|
||||||
transition:slide
|
transition:slide
|
||||||
class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md"
|
class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md translate-x-3.5"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
<div
|
<div
|
||||||
class="w-full h-full py-auto flex px-4 place-content-between rounded-xl
|
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
|
||||||
bg-neutral-200 dark:bg-neutral-900 transition-colors"
|
|
||||||
></div>
|
></div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { blur } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
|
import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
|
||||||
import { toast } from 'svelte-sonner';
|
import { toast } from 'svelte-sonner';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div in:blur={{ amount: 1 }} 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-black dark:fill-white">
|
<div class="transition-colors fill-black dark:fill-white">
|
||||||
<Logo />
|
<Logo />
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { blur } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import { Mail, SquareAsterisk, Undo, User, UserPlus } from 'lucide-svelte';
|
import { Mail, SquareAsterisk, Undo, User, UserPlus } from 'lucide-svelte';
|
||||||
import { toast } from 'svelte-sonner';
|
import { toast } from 'svelte-sonner';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div in:blur={{ amount: 1 }} 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-black dark:fill-white">
|
<div class="transition-colors fill-black dark:fill-white">
|
||||||
<Logo />
|
<Logo />
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
{href}
|
{href}
|
||||||
class="my-auto md:text-lg transition-all {selected
|
class="my-auto md:text-lg transition-all {selected
|
||||||
? 'font-bold tracking-wider'
|
? 'font-bold tracking-wider'
|
||||||
: 'hover:text-neutral-500 focus:text-neutral-500'}"
|
: 'hover:text-overlay2 focus:text-overlay2'}"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,16 +1,23 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
import Header from '$lib/components/Header.svelte';
|
import Header from '$lib/components/Header.svelte';
|
||||||
import Footer from '$lib/components/Footer.svelte';
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
|
|
||||||
|
let show = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="my-2 w-full min-h-screen">
|
<div class="container my-2 w-full min-h-screen">
|
||||||
<div class="w-full h-12">
|
<div class="w-full h-12">
|
||||||
<Header></Header>
|
<Header></Header>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full min-h-[calc(100vh-4.5rem)] my-2">
|
{#key $page.url}
|
||||||
|
<div in:fade|global class="w-full min-h-[calc(100vh-4.5rem)] my-2">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
{/key}
|
||||||
|
|
||||||
<div class="w-full h-20">
|
<div class="w-full h-20">
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
|
|
10
src/routes/(landing)/+layout.svelte
Normal file
10
src/routes/(landing)/+layout.svelte
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#key $page.url}
|
||||||
|
<div in:fade class="container">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/key}
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { blur } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import { LogIn, UserPlus } from 'lucide-svelte';
|
import { LogIn, UserPlus } from 'lucide-svelte';
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
|
|
||||||
<div class="h-[85vh] md:h-screen">
|
<div class="h-[85vh] md:h-screen">
|
||||||
{#if $state === '/landing'}
|
{#if $state === '/landing'}
|
||||||
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
|
<div class="flex justify-center items-center h-full">
|
||||||
<div class="flex flex-col space-y-1.5">
|
<div class="flex flex-col space-y-1.5">
|
||||||
<div>
|
<div>
|
||||||
<Logo />
|
<Logo />
|
|
@ -3,10 +3,12 @@
|
||||||
|
|
||||||
import { Toaster } from 'svelte-sonner';
|
import { Toaster } from 'svelte-sonner';
|
||||||
import { CircleAlert, TriangleAlert, Info, Check, Loader } from 'lucide-svelte';
|
import { CircleAlert, TriangleAlert, Info, Check, Loader } from 'lucide-svelte';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
import { darkMode, user } from '$lib/stores.js';
|
import { user } from '$lib/stores.js';
|
||||||
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
|
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
|
||||||
import PageMeta from '$lib/components/PageMeta.svelte';
|
import PageMeta from '$lib/components/PageMeta.svelte';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
|
@ -35,6 +37,4 @@
|
||||||
<TriangleAlert size="20" class="text-text" slot="warning-icon" />
|
<TriangleAlert size="20" class="text-text" slot="warning-icon" />
|
||||||
</Toaster>
|
</Toaster>
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
|
||||||
|
|
Loading…
Reference in a new issue