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();
|
deepLinkedElement.scrollIntoView();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
import { fade } from 'svelte/transition';
|
||||||
|
import Spinner from '$lib/components/Spinner.svelte';
|
||||||
|
import { navigationIsDelayed } from '$lib/stores';
|
||||||
|
</script>
|
||||||
|
|
||||||
<!-- SEO -->
|
<!-- SEO -->
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
@ -91,19 +94,26 @@
|
||||||
<!-- <Analytics /> -->
|
<!-- <Analytics /> -->
|
||||||
<!-- App Shell -->
|
<!-- App Shell -->
|
||||||
<Drawer />
|
<Drawer />
|
||||||
|
{#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>
|
||||||
|
<!-- Page Route Content -->
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
<AppShell class="transition-transform {positionClasses}">
|
<svelte:fragment slot="footer">
|
||||||
<svelte:fragment slot="header">
|
<MainFooter />
|
||||||
<MainHeader />
|
</svelte:fragment>
|
||||||
</svelte:fragment>
|
</AppShell>
|
||||||
<!-- Page Route Content -->
|
{/if}
|
||||||
|
|
||||||
<slot />
|
|
||||||
|
|
||||||
<svelte:fragment slot="footer">
|
|
||||||
<MainFooter />
|
|
||||||
</svelte:fragment>
|
|
||||||
</AppShell>
|
|
||||||
<!-- <CookieConsent />
|
<!-- <CookieConsent />
|
||||||
|
|
||||||
<Segment /> -->
|
<Segment /> -->
|
Loading…
Reference in New Issue