Add a credit page and make style reusable

src/atoms/TitleSite.svelte

@@ -0,0 +1,19 @@
+<script>
+    import * as fn from '../functions'
+</script>
+
+<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>

src/molecules/Footer.svelte

@@ -12,19 +12,24 @@
 			<Switcher radius="30" />
 		</div>
 
-		<div class="footer__right">
+		<ul class="footer__right">
-			<div class="instagram">
+			<li>
+				<ul>
+					<li><a href="/credits">Credits</a></li>
+					<li class="instagram">
 						<a href="https://instagram.com/{$site.instagram}" target="_blank">
 							<img src="/img/icons/instagram.svg" alt="Instagram">
 							<span>Instagram</span>
 						</a>
-			</div>
+					</li>
-			<div class="cetrucflotte">
+				</ul>
+			</li>
+			<li class="cetrucflotte">
 				<span>A project by</span>
 				<a href="https://cetrucflotte.com" target="_blank">
 					<img src="/img/logo-ctf.svg" alt="Cetrucflotte logo's">
 				</a>
-			</div>
+			</li>
-		</div>
+		</ul>
 	</div>
 </footer>

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 { fade, fly } from 'svelte/transition'
-    import * as fn from '../functions'
+    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">
+            <TitleSite />
-                <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 class="page__description style-description">
-
-                <div aria-label="World" data-aos="letters-translate-bottom">
-                    <div class="anim-mask">
-                        {@html fn.lettersToSpan('World')}
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="explore__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>

src/style/_base.scss

@@ -6,6 +6,7 @@ html {
 body {
     @include font-smooth;
     background: $color-primary;
+    color: #fff;
     cursor: default;
     overflow-x: hidden;
 }
@@ -67,6 +68,15 @@ button {
     }
 }
 
+
+// Title: Category
+.title-category {
+    font-family: $font-serif;
+    font-size: rem(28px);
+    line-height: 1;
+    color: $color-secondary;
+}
+
 // Title: Locations
 .title-location {
     font-family: $font-serif;
@@ -150,25 +160,40 @@ button {
 /* Text Styles
 ========================================================================== */
 .style-location {
-    text-align: center;
-
-    .street {
-        margin-bottom: 8px;
     font-family: $font-serif;
     font-size: rem(24px);
+    color: #fff;
+    line-height: 1;
+    text-align: center;
+
+    a {
+        color: #fff;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 
     @include breakpoint (sm) {
         font-size: rem(28px);
     }
+
+    .street {
+        margin-bottom: 8px;
     }
 }
 
 .style-caps {
+    font-family: $font-sans;
     font-size: rem(14px);
     color: $color-tertiary;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
+.style-caps--transparent {
+    color: rgba($color-tertiary, 0.5);
+}
 
 .style-description {
     color: $color-tertiary;

src/style/layouts/_explore.scss

@@ -0,0 +1,13 @@
+.explore {
+    // Description
+    &__description {
+        max-width: 312px;
+        margin: 0 auto;
+        margin-bottom: 72px;
+
+        @include breakpoint (sm) {
+            max-width: 472px;
+            margin-bottom: 120px;
+        }
+    }
+}

src/style/molecules/_footer.scss

@@ -33,36 +33,56 @@
     // Right part
     &__right {
         font-size: 14px;
+        text-align: center;
 
         @include breakpoint (sm) {
             display: flex;
-            align-items: center;
+            align-items: baseline;
+        }
+
+        li {
+            display: block;
+            text-align: center;
+
+            & > ul {
+                display: flex;
+                justify-content: center;
+                margin-bottom: 32px;
+
+                @include breakpoint (sm) {
+                    margin-bottom: 0;
+                    margin-right: 24px;
+                }
+
+                li {
+                    margin: 0 20px;
+                }
+            }
+        }
+        a {
+            text-decoration: none;
+            color: #fff;
+
+            img {
+                margin-right: 16px;
+            }
         }
 
         // Instagram
         .instagram {
-            margin-bottom: 32px;
-
-            @include breakpoint (sm) {
-                margin: 0 40px 0 0;
-            }
-
             a {
-                display: flex;
+                display: inline-flex;
                 align-items: center;
                 justify-content: center;
-                text-decoration: none;
-                color: #fff;
-
-                span {
-                    margin-left: 16px;
             }
+            img {
+                display: inline-block;
             }
         }
 
         // Collective
         .cetrucflotte {
-            display: flex;
+            display: inline-flex;
             align-items: center;
             justify-content: center;
 

src/style/pages/_page.scss

@@ -1,5 +1,4 @@
-.explore {
+.page {
-    background-color: $color-primary;
     overflow-x: hidden;
 
     // Top part
@@ -40,4 +39,27 @@
             margin-bottom: 120px;
         }
     }
+
+    // List
+    &__list {
+        // Category
+        &--category {
+            margin-bottom: 96px;
+            text-align: center;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            h2 {
+                margin-bottom: 56px;
+            }
+            dl {
+                margin-bottom: 40px;
+            }
+            dt {
+                margin-bottom: 8px;
+            }
+        }
+    }
 }

src/style/style.scss

@@ -32,11 +32,14 @@
 @import "organisms/carousel";
 @import "organisms/photos";
 
+// Layouts
+@import "layouts/explore";
+
 // Pages
+@import "pages/page";
 @import "pages/homepage";
 @import "pages/viewer";
 @import "pages/place";
-@import "pages/explore";
 
 // Animations
 @import "animations";