⚠️ Rework completely how transitions works

- Use Svelte/Sapper native if and transitions to show either the page content or the loader, then load each page animationIn
- Code is safe on SSR side, using process.browser on this if
- The <main> element is on position absolute to fade nicely the different pages
- Code cleaning

src/atoms/Button.svelte

@@ -2,7 +2,6 @@
     export let href = '#'
     export let type = 'a'
     export let text = ''
-    export let noScroll = null
 </script>
 
 {#if type === 'button'}
@@ -14,7 +13,7 @@
 </button>
 
 {:else}
-<a {href} class={$$props.class ? $$props.class : 'button'} sapper-noscroll={noScroll} on:click>
+<a {href} class={$$props.class ? $$props.class : 'button'} on:click>
     <slot></slot>
     <div class="text" data-text={text}>
         <span>{text}</span>

src/atoms/LinkChange.svelte

@@ -1,10 +1,9 @@
 <script>
     export let href = '#'
     export let text = ''
-    export let noScroll = null
 </script>
 
-<a href={href} class="link-change" sapper-noscroll={noScroll}>
+<a href={href} class="link-change">
     {text}
     <span class="icon">
         <slot></slot>

src/atoms/LinkTranslate.svelte

@@ -3,10 +3,9 @@
     export let text = ''
     export let target = null
     export let rel = null
-    export let noScroll = null
 </script>
 
-<a class="link-translate" {href} {target} {rel} sapper-noscroll={noScroll}>
+<a class="link-translate" {href} {target} {rel}>
     <slot />
     <div class="text" data-text={text}>
         <span>{text}</span>

src/atoms/TitleSite.svelte

@@ -6,28 +6,30 @@
     import { animateIn } from 'animations/TitleSite'
 
     // Props and variables
-    export let init = false
-    let scope
     let mounted = false
+    let scope
 
 
     /*
-    ** Run code on component mount
+    ** Run code when mounted
     */
     onMount(() => {
-        animateIn(scope, init)
+        animateIn(scope)
         mounted = true
     })
 </script>
 
-<div class="title-location title-location--inline" bind:this={scope} style="opacity: {mounted ? 1 : 0}">
+<div class="title-location title-location--inline"
+    bind:this={scope}
+    style="opacity: {mounted ? 1 : 0}"
+>
     <div role="heading" aria-level="1" aria-label="Houses">
         <div class="anim-mask">
             {@html charsToSpan('Houses')}
         </div>
     </div>
 
-    <em>
+    <em class="anim-mask">
         <span>of</span>
         <span>the</span>
     </em>

src/atoms/ToggleLayout.svelte

@@ -8,7 +8,7 @@
 
 
     /*
-    ** Run code on browser only
+    ** Run code when mounted
     */
     onMount(() => {
         // Get layout setting from storage