Add a credit page and make style reusable

src/routes/_layout.svelte

@@ -12,6 +12,8 @@
 						explore_globe
 						explore_list
 						instagram
+						credits_text
+						credits_list
 					}
 				}
 				continents {

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>

src/routes/credits.svelte

@@ -0,0 +1,71 @@
+<script>
+    import { onMount } from 'svelte'
+    import { site } from '../store'
+
+    // Dependencies
+    import AOS from 'aos'
+
+    // Components
+    import IconArrow from '../atoms/IconArrow'
+    import TitleSite from '../atoms/TitleSite'
+    import Footer from '../molecules/Footer'
+
+    // Categories
+    $: credits = $site.credits_list
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
+    })
+</script>
+
+<svelte:head>
+	<title>Houses Of - Credits</title>
+</svelte:head>
+
+<section class="page">
+    <div class="wrap">
+        <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>
+
+            <TitleSite />
+        </div>
+
+        <div class="page__description style-description">
+            <p>A little page to thank all the nice people who helped building with this humble project</p>
+        </div>
+
+        <div class="page__list">
+            {#each credits as category}
+            <div class="page__list--category">
+                <h2 class="title-category">{category.name}</h2>
+                {#each category.credits as person}
+                <dl>
+                    <dt class="style-location">
+                        {#if person.url}
+                        <a href={person.url} target="_blank" rel="noopener">
+                            {person.name}
+                        </a>
+                        {:else}
+                        {person.name}
+                        {/if}
+                    </dt>
+                    <dd class="style-caps style-caps style-caps--transparent">{person.role}</dd>
+                </dl>
+                {/each}
+            </div>
+            {/each}
+        </div>
+    </div>
+
+    <Footer />
+</section>