Recent Overhaul to content structure, simplifying, read README #1
|
@ -0,0 +1,57 @@
|
|||
<script lang="ts">
|
||||
//class="fill-primary-500 stroke-primary-500"
|
||||
//fill="#FF156D" stroke="#FF156D"
|
||||
</script>
|
||||
<svg class="h-6 w-6 md:h-10 md:w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
|
||||
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" r="15" cx="35" cy="100"
|
||||
><animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur="2"
|
||||
values="35;165;165;35;35"
|
||||
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
|
||||
repeatCount="indefinite"
|
||||
begin="0"
|
||||
/></circle
|
||||
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".8" r="15" cx="35" cy="100"
|
||||
><animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur="2"
|
||||
values="35;165;165;35;35"
|
||||
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
|
||||
repeatCount="indefinite"
|
||||
begin="0.05"
|
||||
/></circle
|
||||
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".6" r="15" cx="35" cy="100"
|
||||
><animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur="2"
|
||||
values="35;165;165;35;35"
|
||||
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
|
||||
repeatCount="indefinite"
|
||||
begin=".1"
|
||||
/></circle
|
||||
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".4" r="15" cx="35" cy="100"
|
||||
><animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur="2"
|
||||
values="35;165;165;35;35"
|
||||
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
|
||||
repeatCount="indefinite"
|
||||
begin=".15"
|
||||
/></circle
|
||||
><circle class="fill-primary-500 stroke-primary-500" stroke-width="15" opacity=".2" r="15" cx="35" cy="100"
|
||||
><animate
|
||||
attributeName="cx"
|
||||
calcMode="spline"
|
||||
dur="2"
|
||||
values="35;165;165;35;35"
|
||||
keySplines="0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1"
|
||||
repeatCount="indefinite"
|
||||
begin=".2"
|
||||
/></circle
|
||||
></svg
|
||||
>
|
|
@ -0,0 +1,21 @@
|
|||
import { writable } from 'svelte/store';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import type { InstagramPost } from '../types/instagram';
|
||||
|
||||
import { derived } from "svelte/store";
|
||||
import { navigating } from "$app/stores";
|
||||
|
||||
|
||||
export const instagramFeed: Writable<InstagramPost[]> = writable([]);
|
||||
|
||||
|
||||
let timer = null;
|
||||
/** When navigating from to, time 500ms to be true, else false */
|
||||
export const navigationIsDelayed = derived(navigating, (newValue, set) => {
|
||||
if (timer) { clearTimeout(timer); }
|
||||
if (newValue) {
|
||||
timer = setTimeout(() => set(true), 500);
|
||||
}
|
||||
set(false);
|
||||
});
|
||||
|
|
@ -57,8 +57,11 @@
|
|||
deepLinkedElement.scrollIntoView();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
};
|
||||
import { fade } from 'svelte/transition';
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
import { navigationIsDelayed } from '$lib/stores';
|
||||
</script>
|
||||
|
||||
<!-- SEO -->
|
||||
<svelte:head>
|
||||
|
@ -91,8 +94,14 @@
|
|||
<!-- <Analytics /> -->
|
||||
<!-- App Shell -->
|
||||
<Drawer />
|
||||
|
||||
<AppShell class="transition-transform {positionClasses}">
|
||||
{#if $navigationIsDelayed}
|
||||
<div class="fixed w-full h-full z-10" in:fade={{ duration: 150 }}>
|
||||
<div class="absolute w-full h-full flex justify-center items-center z-20">
|
||||
<Spinner />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<AppShell class="transition-transform {positionClasses}">
|
||||
<svelte:fragment slot="header">
|
||||
<MainHeader />
|
||||
</svelte:fragment>
|
||||
|
@ -103,7 +112,8 @@
|
|||
<svelte:fragment slot="footer">
|
||||
<MainFooter />
|
||||
</svelte:fragment>
|
||||
</AppShell>
|
||||
</AppShell>
|
||||
{/if}
|
||||
<!-- <CookieConsent />
|
||||
|
||||
<Segment /> -->
|
Loading…
Reference in New Issue