Place: Add photo Transition In, Add Illustration system, Visual fixes

- Add a transition in on each photo component (scale down + fade in), TODO: Parallax on number
- Illustration takes two images and changes the source depending on the viewport size

src/molecules/Photo.svelte

@@ -1,10 +1,11 @@
 <script>
     import { onMount } from 'svelte'
-    import { fly } from 'svelte/transition'
-    import { quartOut } from 'svelte/easing'
     import { site, currentLocation } from '../utils/store'
     import { getThumbnail, formatDate } from '../utils/functions'
 
+    // Animations
+    import { animateIn } from '../animations/Photo'
+
     // Props and variables
     export let photo
     export let index
@@ -22,10 +23,11 @@
 
 
     /*
-	** Run code on browser only
-	*/
-	onMount(() => {
+    ** Run code when mounted
+    */
+    onMount(() => {
         animateIn(scope)
+
         // Parallax on photo when the image has been loaded
         // const parallaxNumber = basicScroll.default.create({
         //     elem: photoElement.querySelector('.photo__number'),
@@ -45,14 +47,13 @@
     })
 </script>
 
-<div class="photo"
-    bind:this={photoElement}
-    in:fly="{{ y: 40, duration: 1000, easing: quartOut }}"
->
 <div class="photo" bind:this={scope}>
     <div class="photo__location wrap">
         <div class="wrapper">
-            <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
+            <h2 class="title-location">
+                <span>{photo.name.split(', ')[0]},</span>
+                <span>{photo.name.split(', ')[1]}</span>
+            </h2>
             <p class="style-caps">{location.region}, {location.country.name}</p>
         </div>
     </div>
@@ -71,7 +72,7 @@
                         width={defaultWidth} height={defaultHeight}
                         alt={imgAlt}
                         class="lazyload"
-                        data-aos="scale-down-fade-in" data-aos-once="true">
+                    >
 
                     {:else}
                     <source media="(min-width: 992px)" srcset={getThumbnail(photo.image.private_hash, 1300)}>
@@ -85,7 +86,9 @@
             <time class="photo__date" datetime={formatDate(photo.date, 'DATETIME')}>
                 {formatDate(photo.date, 'FULL')}
             </time>
-            <span class="photo__number">{(index < 10 ? '0': '') + index}</span>
+            <span class="photo__number">
+                {(index < 10 ? '0': '') + index}
+            </span>
         </div>
     </div>
 </div>