🔥 Huge style refactoring by using SvelteKit built-in style tag

It's been tricky but got there finally! Hello `:global`
- Avoid using one global CSS file containing everything
- Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used

src/routes/[country]/[location]/[photo].svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../../style/pages/viewer";
+</style>
+
 <script lang="ts">
     import { browser } from '$app/env'
     import { page } from '$app/stores'
@@ -223,24 +227,24 @@
             autoplay: false,
         })
 
-        anime.set('.viewer__picture', {
+        anime.set('.photo-page__picture', {
             opacity: 0,
         })
-        anime.set('.viewer__picture.is-1', {
+        anime.set('.photo-page__picture.is-1', {
             translateY: 24,
         })
 
         // Photos
         timeline.add({
-            targets: '.viewer__picture.is-1',
+            targets: '.photo-page__picture.is-1',
             opacity: 1,
             translateY: 0,
             duration: 900,
         }, 250)
         timeline.add({
-            targets: '.viewer__picture:not(.is-1)',
+            targets: '.photo-page__picture:not(.is-1)',
             opacity: 1,
-            translateX (element: HTMLElement, index: number) {
+            translateX (element: HTMLElement) {
                 const x = getComputedStyle(element).getPropertyValue('--offset-x').trim()
                 return [`-${x}`, 0]
             },
@@ -249,7 +253,7 @@
 
         // Prev/Next buttons
         timeline.add({
-            targets: '.viewer__controls button',
+            targets: '.photo-page__controls button',
             translateX (item: HTMLElement) {
                 let direction = item.classList.contains('prev') ? -1 : 1
                 return [16 * direction, 0]
@@ -260,25 +264,25 @@
 
         // Infos
         timeline.add({
-            targets: '.viewer__info > *',
+            targets: '.photo-page__info > *',
             translateY: [24, 0],
             opacity: [0, 1],
             delay: anime.stagger(200)
         }, 400)
 
 
-        anime.set('.viewer__index', {
+        anime.set('.photo-page__index', {
             opacity: 0
         })
         // Index
         timeline.add({
-            targets: '.viewer__index',
+            targets: '.photo-page__index',
             opacity: 1,
             duration: 900,
         }, 600)
         // Fly each number
         timeline.add({
-            targets: '.viewer__index .char',
+            targets: '.photo-page__index .char',
             translateY: ['100%', 0],
             delay: anime.stagger(200),
             duration: 1000,
@@ -303,25 +307,25 @@
 {/if}
 
 
-<PageTransition name="viewer">
+<PageTransition name="photo-page">
     <div class="container grid">
-        <p class="viewer__notice text-label">Tap for fullscreen</p>
+        <p class="photo-page__notice text-label">Tap for fullscreen</p>
 
         <ButtonCircle
             tag="a"
             url={previousUrl}
             color="purple"
-            class="viewer__close shadow-box-dark"
+            class="close shadow-box-dark"
         >
             <svg width="12" height="12">
                 <use xlink:href="#cross">
             </svg>
         </ButtonCircle>
 
-        <div class="viewer__carousel">
-            <div class="viewer__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
+        <div class="photo-page__carousel">
+            <div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                 {#each visiblePhotos as { id, image, title }, index (id)}
-                    <div class="viewer__picture is-{currentIndex === 0 ? index + 1 : index}">
+                    <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
                         <Image
                             class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
                             id={image.id}
@@ -337,7 +341,7 @@
                     </div>
                 {/each}
 
-                <div class="viewer__controls">
+                <div class="photo-page__controls">
                     <ButtonCircle class="prev shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
                         <IconArrow color="pink" flip={true} />
                     </ButtonCircle>
@@ -347,12 +351,12 @@
                 </div>
 
 
-                <div class="viewer__index title-index">
+                <div class="photo-page__index title-index">
                     <SplitText text="{(currentPhotoIndex < 10) ? '0' : ''}{currentPhotoIndex}" mode="chars" />
                 </div>
             </div>
 
-            <div class="viewer__info">
+            <div class="photo-page__info">
                 <h1 class="title-medium">{currentPhoto.title}</h1>
 
                 <div class="detail text-info">
@@ -376,7 +380,7 @@
     </div>
 
     {#if isFullscreen}
-        <div class="viewer__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
+        <div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
             in:fade={{ easing: quartOut, duration: 1000 }}
             out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
         >

src/routes/[country]/[location]/index.svelte

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../../style/pages/location";
+</style>
+
 <script lang="ts">
     import { navigating, page } from '$app/stores'
     import { onMount } from 'svelte'
@@ -14,6 +18,7 @@
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import House from '$components/molecules/House.svelte'
+    import Pagination from '$components/molecules/Pagination.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
     export let location: any
@@ -279,23 +284,19 @@
 
         <section class="location-page__next">
             <div class="container">
-                <div class="pagination" role="button"
-                    on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}
+                <Pagination
+                    ended={ended}
+                    current={currentPhotosAmount}
+                    total={totalPhotos}
+                    on:click={!ended && loadMorePhotos}
                     on:keydown={({ key, target }) => key === 'Enter' && target.click()}
-                    tabindex="0"
-                >
-                    <div class="pagination__progress">
-                        <span class="current">{currentPhotosAmount}</span>
-                        <span>/</span>
-                        <span class="total">{totalPhotos}</span>
-
-                        {#if !ended}
-                            <p class="pagination__more">See more photos</p>
-                        {:else}
-                            <p class="pagination__message">You've seen it all!</p>
-                        {/if}
-                    </div>
-                </div>
+            >
+                    {#if !ended}
+                        <p class="more">See more photos</p>
+                    {:else}
+                        <p class="message">You've seen it all!</p>
+                    {/if}
+                </Pagination>
 
                 {#if ended}
                     <NewsletterModule theme="light" />