Add a credit page and make style reusable

src/routes/choose.svelte

@@ -1,18 +1,21 @@
 <script>
     import { onMount } from 'svelte'
-    import { site, currentLocation } from '../store'
-    import * as fn from '../functions'
+    import { fade, fly } from 'svelte/transition'
+    import { flip } from 'svelte/animate'
+    import { site, currentLocation, currentPhotos } from '../store'
     import AOS from 'aos'
 
     // Components
     import IconArrow from '../atoms/IconArrow'
+    import TitleSite from '../atoms/TitleSite'
     import Globe from '../molecules/InteractiveGlobe'
     import Footer from '../molecules/Footer'
     import Locations from '../organisms/Locations'
 
     // Reset current location if existing
-    $: if ($currentLocation) {
-        currentLocation.set()
+    $: {
+        if ($currentLocation) currentLocation.set()
+        if ($currentPhotos) currentPhotos.set()
     }
 
 
@@ -20,9 +23,6 @@
     ** Run code on browser only
     */
     onMount(() => {
-        const titleHouses = document.getElementById('title-houses')
-        const titleWorld = document.getElementById('title-world')
-
         // Scroll apparitions
         if (process.browser) {
             AOS.init()
@@ -34,32 +34,18 @@
 	<title>Houses Of - Beautiful houses of planet Earth</title>
 </svelte:head>
 
-<section class="explore">
+<section class="page explore">
     <div class="wrap">
-        <div class="explore__top">
+        <div class="page__top">
             <a href="/" class="button-control button-control--pink dir-left">
                 <IconArrow direction="left" color="#fff" class="icon" />
                 <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
             </a>
 
-            <div class="title-location title-location--inline">
-                <div role="heading" aria-level="1" aria-label="Houses" data-aos="letters-translate-bottom">
-                    <div class="anim-mask">
-                        {@html fn.lettersToSpan('Houses')}
-                    </div>
-                </div>
-
-                <em>of the</em>
-
-                <div aria-label="World" data-aos="letters-translate-bottom">
-                    <div class="anim-mask">
-                        {@html fn.lettersToSpan('World')}
-                    </div>
-                </div>
-            </div>
+            <TitleSite />
         </div>
 
-        <div class="explore__description style-description">
+        <div class="page__description style-description">
             <p>{$site.explore_globe}</p>
         </div>
     </div>