From 76c8c31c89ef60d3e3ac08fc3343c15d92852a16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 29 Feb 2020 18:32:32 +0100
Subject: [PATCH] Readapt the misuse of BEM, Code organization

- -- is only for a modifier, not a child "child". Use master__child without the parent__ in it to make it more readable.
https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
- Redefine atom design components
---
 src/molecules/Photo.svelte                    |   8 +-
 src/molecules/Switcher.svelte                 |  11 -
 src/organisms/Carousel.svelte                 |  26 +--
 src/routes/credits.svelte                     |   2 +-
 .../location/[country]/[location].svelte      |   9 +-
 src/style/atoms/_link.scss                    |   2 +
 src/style/molecules/_location.scss            |  85 ++++++++
 src/style/molecules/_photo.scss               | 148 ++++++-------
 src/style/organisms/_carousel.scss            | 197 +++++++++---------
 .../{molecules => organisms}/_footer.scss     |  13 +-
 src/style/organisms/_locations.scss           |  86 +-------
 .../{molecules => organisms}/_pagination.scss |  72 +++----
 src/style/organisms/_photos.scss              |  65 +++---
 src/style/pages/_homepage.scss                |   2 +-
 src/style/pages/_page.scss                    |  33 ++-
 src/style/pages/_place.scss                   |  12 +-
 src/style/style.scss                          |   7 +-
 17 files changed, 387 insertions(+), 391 deletions(-)
 create mode 100644 src/style/molecules/_location.scss
 rename src/style/{molecules => organisms}/_footer.scss (91%)
 rename src/style/{molecules => organisms}/_pagination.scss (62%)

diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 473a6c1..e1af0d4 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -33,7 +33,7 @@
 	onMount(() => {
         // Parallax on photo when the image has been loaded
         const parallaxNumber = basicScroll.default.create({
-            elem: photoElement.querySelector('.photo__image--number'),
+            elem: photoElement.querySelector('.photo__number'),
             direct: photoElement,
             from: 'top-bottom',
             to: 'bottom-top',
@@ -64,7 +64,7 @@
     <div class="photo__image wrap">
         <div class="align">
             <a href={photoHref}>
-                <picture class="photo__image--img">
+                <picture class="photo__picture">
                     {#if layout === 'list'}
                     <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
                     <source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
@@ -86,10 +86,10 @@
                     {/if}
                 </picture>
             </a>
-            <time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
+            <time class="photo__date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
                 {dayjs(photo.date).format('MMM Do, YYYY')}
             </time>
-            <span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
+            <span class="photo__number">{(index < 10 ? '0': '') + index}</span>
         </div>
     </div>
 </div>
diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte
index d3fa0bc..00b92e4 100644
--- a/src/molecules/Switcher.svelte
+++ b/src/molecules/Switcher.svelte
@@ -49,14 +49,3 @@
         </a>
     </div>
 </div>
-
-<!-- <div class="switcher switcher--side">
-    <p class="switcher__location">
-        <a href="/">Houses <span class="caps">{locationOf}</span></a> <br>
-        <strong class="name">{locationName}</strong>
-    </p>
-
-    <a href="/choose" class="switcher__icon icon is-medium has-text-danger">
-        <i class="fas fa-exchange-alt fa-lg"></i>
-    </a>
-</div> -->
\ No newline at end of file
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index 428e708..b44ead4 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -81,7 +81,7 @@
         // Hover function
         hover = event => {
             const button = event.currentTarget.querySelector('button')
-            const photoActive = document.querySelector('.gallery__images .active')
+            const photoActive = document.querySelector('.gallery__photo--active')
 
             let photoToHover
             if (event.currentTarget.dataset.to === 'prev') {
@@ -122,10 +122,10 @@
         <div class="gallery">
             <div class="gallery__images">
                 {#each photos as photo, index}
-                <picture class="gallery__images--photo"
-                    class:prev={photo === prevPhoto}
-                    class:active={photo === currentPhoto}
-                    class:next={photo === nextPhoto}
+                <picture class="gallery__photo"
+                    class:gallery__photo--prev={photo === prevPhoto}
+                    class:gallery__photo--active={photo === currentPhoto}
+                    class:gallery__photo--next={photo === nextPhoto}
                 >
                     <source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
                     <source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
@@ -137,14 +137,14 @@
             </div>
 
             <div class="carousel__controls">
-                <div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
+                <div class="carousel__area carousel__area--prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
                     <button class="button-control button-control--white dir-left" aria-label="Previous">
                         <IconArrow direction="left" color="#ff6c89" class="icon" />
                         <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                     </button>
                 </div>
 
-                <div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
+                <div class="carousel__area carousel__area--next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
                     <button class="button-control button-control--white dir-right" aria-label="Next">
                         <IconArrow direction="right" color="#ff6c89" class="icon" />
                         <IconArrow direction="right" color="#fff" class="icon" hidden="true" />
@@ -160,12 +160,12 @@
         </div>
 
         <div class="carousel__infos">
-            <div class="carousel__infos--locations">
+            <div class="carousel__locations">
                 {#each photos as photo, index}
-                <div class="carousel__infos--location style-location"
-                    class:prev={photo === prevPhoto}
-                    class:active={photo === currentPhoto}
-                    class:next={photo === nextPhoto}
+                <div class="carousel__location style-location"
+                    class:carousel__location--prev={photo === prevPhoto}
+                    class:carousel__location--active={photo === currentPhoto}
+                    class:carousel__location--next={photo === nextPhoto}
                 >
                     <p class="street">{photo.name}</p>
                     <p class="state style-caps style-caps--transparent">
@@ -175,7 +175,7 @@
                 {/each}
             </div>
             {#if viewer}
-            <p class="carousel__infos--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
+            <p class="carousel__date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
             {/if}
         </div>
 
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index 5674634..3bbd3d5 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -48,7 +48,7 @@
 
         <div class="page__list">
             {#each credits as category}
-            <div class="page__list--category">
+            <div class="page__category">
                 <h2 class="title-category">{category.name}</h2>
                 {#each category.credits as person}
                 <dl>
diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte
index 71a829b..8c7348f 100644
--- a/src/routes/location/[country]/[location].svelte
+++ b/src/routes/location/[country]/[location].svelte
@@ -129,7 +129,7 @@
 		</a>
 	</div>
 
-	<div class="place__description--wrap wrap">
+	<div class="place__wrap wrap">
 		<div class="place__description">
 			<div class="wrapper">
 				<p>{$site.description}</p>
@@ -158,9 +158,10 @@
 </section>
 
 <section class="photos photos--{layoutSetting || 'list'}">
-	<div class="photos__side--wrap wrap">
+	<div class="photos__sidewrap wrap">
 		<aside class="photos__side">
 			<Switcher type="switcher--side" />
+
 			<p class="updated style-caps">
 				<strong>Updated</strong>
 				<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
@@ -186,8 +187,8 @@
 			on:mouseenter={() => pageTranslate = pageTranslate - ((100 / pagesTotal) * 0.666)}
 			on:mouseleave={() => pageTranslate = pageTranslate + ((100 / pagesTotal) * 0.666)}
 		>
-			<div class="pagination__page--info">page</div>
-			<div class="pagination__page--numbers">
+			<div class="pagination__info">page</div>
+			<div class="pagination__numbers">
 				<div class="scroll" style="transform: translateY(-{pageTranslate}%);">
 					{#each pages as page}
 					<span>{page}</span>
diff --git a/src/style/atoms/_link.scss b/src/style/atoms/_link.scss
index 94efb32..141deae 100644
--- a/src/style/atoms/_link.scss
+++ b/src/style/atoms/_link.scss
@@ -67,6 +67,8 @@
 
 // Link with animated letters
 .link-translate {
+    display: inline-block;
+
     .text {
         position: relative;
         overflow: hidden;
diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
new file mode 100644
index 0000000..2964220
--- /dev/null
+++ b/src/style/molecules/_location.scss
@@ -0,0 +1,85 @@
+// Location
+.location {
+    position: relative;
+    margin-bottom: 48px;
+
+    @include breakpoint (sm) {
+        margin-left: pxVW(72);
+        margin-right: pxVW(72);
+    }
+    @include breakpoint (xl) {
+        margin-left: 72px;
+        margin-right: 72px;
+    }
+
+    a {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        text-decoration: none;
+    }
+
+    // Flag image
+    img {
+        display: block;
+        width: 32px;
+        height: auto;
+        margin: 0 auto;
+        border-radius: 50vh;
+    }
+
+    // City
+    &__city {
+        font-family: $font-serif;
+        font-size: rem(32px);
+        color: $color-secondary;
+
+        @include breakpoint (sm) {
+            font-size: rem(48px);
+        }
+    }
+        .mask-city {
+            height: 40px;
+            margin: 24px 0 16px;
+
+            @include breakpoint (sm) {
+                height: 64px;
+                margin-bottom: 24px;
+            }
+        }
+        .mask-country {
+            height: 16px;
+        }
+
+    // Hover
+    &:hover {
+        .location__city {
+            color: $color-tertiary;
+        }
+
+        &:after {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+        }
+    }
+
+    // Shape on hover
+    &:after {
+        content: "";
+        pointer-events: none;
+        opacity: 0;
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0.94);
+        display: block;
+        width: 216px;
+        height: 216px;
+        background: rgba($color-lightpurple, 0.3);
+        border-radius: 50vh;
+        transition: all 85ms ease-in-out;
+    }
+}
diff --git a/src/style/molecules/_photo.scss b/src/style/molecules/_photo.scss
index c196753..77c1698 100644
--- a/src/style/molecules/_photo.scss
+++ b/src/style/molecules/_photo.scss
@@ -48,45 +48,45 @@
             margin: 0;
             padding: 0;
         }
+    }
 
-        // Image container
-        &--img {
-            overflow: hidden;
-            position: relative;
-            z-index: 2;
+    // Image itself
+    &__picture {
+        overflow: hidden;
+        position: relative;
+        z-index: 2;
+        display: block;
+        width: 100%;
+        border-radius: 0;
+        background-color: #fff;
+        box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
+        user-select: none;
+
+        @include breakpoint (sm) {
+            border-radius: 8px;
+        }
+
+        img {
             display: block;
             width: 100%;
-            border-radius: 0;
-            background-color: #fff;
-            box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
-            user-select: none;
+            height: auto;
+        }
 
-            @include breakpoint (sm) {
-                border-radius: 8px;
-            }
-
-            img {
-                display: block;
-                width: 100%;
-                height: auto;
-            }
-
-            // Overlay
-            &:after {
-                content: "";
-                position: absolute;
-                z-index: 2;
-                opacity: 0;
-                pointer-events: none;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                background-color: $color-primary;
-                display: block;
-                z-index: 3;
-                transition: opacity 150ms $ease-inout;
-            }
+        // Overlay
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: 2;
+            opacity: 0;
+            pointer-events: none;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background-color: $color-primary;
+            display: block;
+            z-index: 3;
+            transition: opacity 150ms $ease-inout;
         }
 
         a {
@@ -103,49 +103,49 @@
                 }
             }
         }
+    }
 
-        // Date (on the side)
-        &--date {
-            display: block;
-            margin-top: 16px;
-            padding: 0 pxVW(128);
-            font-size: rem(14px);
-            color: $color-lightgray;
+    // Date (on the side)
+    &__date {
+        display: block;
+        margin-top: 16px;
+        padding: 0 pxVW(128);
+        font-size: rem(14px);
+        color: $color-lightgray;
 
-            @include breakpoint (sm) {
-                position: absolute;
-                z-index: 3;
-                left: calc(100% + 30px);
-                bottom: 0;
-                transform: rotate(270deg);
-                transform-origin: 0 0;
-                white-space: nowrap;
-                line-height: 0;
-                padding: 0;
-            }
-        }
-
-        // Photo number
-        &--number {
+        @include breakpoint (sm) {
             position: absolute;
-            bottom: -80px;
-            right: 24px;
-            font-family: $font-serif-extra;
-            color: rgba($color-tertiary, 0.5);
-            font-size: rem(124px);
-            pointer-events: none;
-            user-select: none;
+            z-index: 3;
+            left: calc(100% + 30px);
+            bottom: 0;
+            transform: rotate(270deg);
+            transform-origin: 0 0;
+            white-space: nowrap;
+            line-height: 0;
+            padding: 0;
+        }
+    }
 
-            @include breakpoint (sm) {
-                font-size: pxVW(300);
-                left: 92%;
-                top: 50%;
-                z-index: 1;
-                transform: translate(-50%, -50%);
-            }
-            @include breakpoint (xxl) {
-                font-size: rem(300px);
-            }
+    // Photo number
+    &__number {
+        position: absolute;
+        bottom: -80px;
+        right: 24px;
+        font-family: $font-serif-extra;
+        color: rgba($color-tertiary, 0.5);
+        font-size: rem(124px);
+        pointer-events: none;
+        user-select: none;
+
+        @include breakpoint (sm) {
+            font-size: pxVW(300);
+            left: 92%;
+            top: 50%;
+            z-index: 1;
+            transform: translate(-50%, -50%);
+        }
+        @include breakpoint (xxl) {
+            font-size: rem(300px);
         }
     }
 }
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index b01fbea..e5e9321 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -41,54 +41,54 @@
             height: 0;
             padding-bottom: calc(100% / 1.5); // Ratio 3.2
             user-select: none;
+        }
 
-            // Photo
-            &--photo {
-                $duration: 0.9s;
+        // Photo
+        &__photo {
+            $duration: 0.9s;
 
+            opacity: 0;
+            overflow: hidden;
+            position: absolute;
+            z-index: -1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: scale($scale);
+            box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
+            transition: transform $duration $ease-quart, opacity $duration $ease-quart;
+            will-change: transform, opacity;
+
+            @include breakpoint (sm) {
+                border-radius: $radius;
+            }
+
+            img {
                 opacity: 0;
-                overflow: hidden;
+                position: relative;
+                z-index: 1;
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+
+            // Overlay
+            &:before {
+                opacity: 0;
+                content: "";
+                display: block;
                 position: absolute;
-                z-index: -1;
+                z-index: 2;
                 top: 0;
                 left: 0;
-                width: 100%;
-                height: 100%;
-                transform: scale($scale);
-                box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
-                transition: transform $duration $ease-quart, opacity $duration $ease-quart;
-                will-change: transform, opacity;
-
-                @include breakpoint (sm) {
-                    border-radius: $radius;
-                }
-
-                img {
-                    opacity: 0;
-                    position: relative;
-                    z-index: 1;
-                    display: block;
-                    width: 100%;
-                    height: auto;
-                }
-
-                // Overlay
-                &:before {
-                    opacity: 0;
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    z-index: 2;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                    background-color: $color-primary;
-                }
+                right: 0;
+                bottom: 0;
+                background-color: $color-primary;
             }
 
             // Active photo
-            .active {
+            &--active {
                 opacity: 1;
                 z-index: 10;
                 transform: scale(1);
@@ -99,7 +99,7 @@
             }
 
             // Previous & next photo
-            .prev, .next {
+            &--prev, &--next {
                 opacity: 1;
 
                 img {
@@ -112,7 +112,7 @@
             }
 
             // Previous photo
-            .prev {
+            &--prev {
                 z-index: 8;
 
                 @include breakpoint (sm) {
@@ -126,7 +126,7 @@
             }
 
             // Next photo
-            .next {
+            &--next {
                 z-index: 9;
 
                 @include breakpoint (sm) {
@@ -159,28 +159,28 @@
             justify-content: space-between;
         }
 
-        // Hover and clicking area
-        &--area {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 12%;
-            height: 100%;
-            cursor: pointer;
-
-            &.prev {
-                margin-left: -6%;
-            }
-            &.next {
-                margin-right: -6%;
-            }
-        }
-
         button {
             box-shadow: 0 2px 20px rgba(#000, 0.15);
         }
     }
 
+    // Hover and clicking area
+    &__area {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 12%;
+        height: 100%;
+        cursor: pointer;
+
+        &--prev {
+            margin-left: -6%;
+        }
+        &--next {
+            margin-right: -6%;
+        }
+    }
+
 
     /*
     ** Information
@@ -188,49 +188,50 @@
     &__infos {
         position: relative;
         z-index: 3;
+    }
 
-        // Locations
-        &--locations {
-            position: relative;
-            overflow: hidden;
-            min-height: 128px;
+    // Locations
+    &__locations {
+        position: relative;
+        overflow: hidden;
+        min-height: 128px;
+    }
+
+    // Location
+    &__location {
+        $distance: 40%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        opacity: 0;
+        text-align: center;
+        transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
+        will-change: transform, opacity;
+        margin-top: 32px;
+
+        @include breakpoint (sm) {
+            margin-top: pxVW(80);
+        }
+        @include breakpoint (xl) {
+            margin-top: 72px;
         }
 
-        // Location
-        &--location {
-            $distance: 40%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            opacity: 0;
-            text-align: center;
-            transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
-            will-change: transform, opacity;
-            margin-top: 32px;
+        // States
+        &--prev {
+            transform: translateY(-$distance);
+        }
+        &--active {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        &--next {
+            transform: translateY($distance);
+        }
 
-            @include breakpoint (sm) {
-                margin-top: pxVW(80);
-            }
-            @include breakpoint (xl) {
-                margin-top: 72px;
-            }
-
-            &.prev {
-                transform: translateY(-$distance);
-            }
-            &.active {
-                transform: translateY(0);
-                opacity: 1;
-            }
-            &.next {
-                transform: translateY($distance);
-            }
-
-            // State
-            .state {
-                margin-top: 6px;
-            }
+        // State
+        .state {
+            margin-top: 6px;
         }
     }
 
diff --git a/src/style/molecules/_footer.scss b/src/style/organisms/_footer.scss
similarity index 91%
rename from src/style/molecules/_footer.scss
rename to src/style/organisms/_footer.scss
index f1f032a..5426330 100644
--- a/src/style/molecules/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -43,6 +43,7 @@
         li {
             display: block;
             text-align: center;
+            height: 100%;
 
             & > ul {
                 display: flex;
@@ -57,6 +58,10 @@
                 li {
                     margin: 0 20px;
                 }
+
+                a {
+                    display: block;
+                }
             }
         }
 
@@ -84,7 +89,7 @@
                 justify-content: center;
             }
             img {
-                display: inline-block;
+                display: block;
             }
         }
 
@@ -99,8 +104,8 @@
             }
 
             img {
-                display: inline-block;
-                margin: 8px 0 0 12px;
+                display: block;
+                margin: 3px 0 0 12px;
                 transition: transform 400ms $ease-quart;
                 will-change: transform;
 
@@ -111,7 +116,7 @@
 
             // Hover
             a:hover img {
-                transform: scale(1.025);
+                transform: scale(1.04);
             }
         }
     }
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index a349248..5ac8e8f 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -53,88 +53,4 @@
             margin-bottom: 232px;
         }
     }
-
-    // Location
-    .location {
-        position: relative;
-        margin-bottom: 48px;
-
-        @include breakpoint (sm) {
-            margin-left: pxVW(72);
-            margin-right: pxVW(72);
-        }
-        @include breakpoint (xl) {
-            margin-left: 72px;
-            margin-right: 72px;
-        }
-
-        a {
-            position: relative;
-            z-index: 2;
-            display: flex;
-            flex-flow: column;
-            align-items: center;
-            text-decoration: none;
-        }
-
-        // Flag image
-        img {
-            display: block;
-            width: 32px;
-            height: auto;
-            margin: 0 auto;
-            border-radius: 50vh;
-        }
-
-        // City
-        &__city {
-            font-family: $font-serif;
-            font-size: rem(32px);
-            color: $color-secondary;
-
-            @include breakpoint (sm) {
-                font-size: rem(48px);
-            }
-        }
-        .mask-city {
-            height: 40px;
-            margin: 24px 0 16px;
-
-            @include breakpoint (sm) {
-                height: 64px;
-                margin-bottom: 24px;
-            }
-        }
-        .mask-country {
-            height: 16px;
-        }
-
-        // Shape on hover
-        &:after {
-            content: "";
-            pointer-events: none;
-            opacity: 0;
-            position: absolute;
-            z-index: 1;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%) scale(0.94);
-            display: block;
-            width: 216px;
-            height: 216px;
-            background: rgba($color-lightpurple, 0.3);
-            border-radius: 50vh;
-            transition: all 85ms ease-in-out;
-        }
-        &:hover {
-            .location__city {
-                color: $color-tertiary;
-            }
-
-            &:after {
-                opacity: 1;
-                transform: translate(-50%, -50%) scale(1);
-            }
-        }
-    }
-}
\ No newline at end of file
+}
diff --git a/src/style/molecules/_pagination.scss b/src/style/organisms/_pagination.scss
similarity index 62%
rename from src/style/molecules/_pagination.scss
rename to src/style/organisms/_pagination.scss
index 552f0fc..4c24e35 100644
--- a/src/style/molecules/_pagination.scss
+++ b/src/style/organisms/_pagination.scss
@@ -30,48 +30,48 @@
             font-size: rem(160px);
         }
 
-        // Numbers
-        &--numbers {
-            overflow: hidden;
-            height: 62px;
-            margin-right: 4px;
-
-            @include breakpoint (sm) {
-                height: 136px;
-            }
-
-            .scroll {
-                display: flex;
-                flex-direction: column;
-                transform: translate(0, 0);
-                text-align: right;
-                line-height: 0.85;
-                transition: transform 325ms $ease-cubic;
-                will-change: transform;
-            }
-        }
-
-        // Info
-        &--info {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -72%);
-            font-family: $font-serif;
-            font-size: 18px;
-            color: $color-secondary-bright;
-
-            @include breakpoint (sm) {
-                font-size: rem(40px);
-            }
-        }
-
         // Hover
         &:hover {
             color: rgba($color-text, 0.25);
         }
     }
 
+    // Numbers
+    &__numbers {
+        overflow: hidden;
+        height: 62px;
+        margin-right: 4px;
+
+        @include breakpoint (sm) {
+            height: 136px;
+        }
+
+        .scroll {
+            display: flex;
+            flex-direction: column;
+            transform: translate(0, 0);
+            text-align: right;
+            line-height: 0.85;
+            transition: transform 325ms $ease-cubic;
+            will-change: transform;
+        }
+    }
+
+    // Info
+    &__info {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -72%);
+        font-family: $font-serif;
+        font-size: 18px;
+        color: $color-secondary-bright;
+
+        @include breakpoint (sm) {
+            font-size: rem(40px);
+        }
+    }
+
     // Caption
     &__caption {
         max-width: 420px;
diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss
index b2318dd..4f9ec8d 100644
--- a/src/style/organisms/_photos.scss
+++ b/src/style/organisms/_photos.scss
@@ -26,16 +26,6 @@
             transform: rotate(-90deg) translateX(-100%);
         }
 
-        // Container
-        &--wrap {
-            @include breakpoint (md) {
-                position: sticky;
-                z-index: 10;
-                top: 32px;
-                height: 100%;
-            }
-        }
-
         p {
             font-size: rem(12px);
             color: $color-lightgray;
@@ -49,6 +39,16 @@
         }
     }
 
+        // Container
+        &__sidewrap {
+            @include breakpoint (md) {
+                position: sticky;
+                z-index: 10;
+                top: 32px;
+                height: 100%;
+            }
+        }
+
     // Each photo
     .photo {
         position: relative;
@@ -87,14 +87,15 @@
                     }
 
                     // Image
-                    .photo__image {
-                        justify-content: flex-end;
-
-                        &--date {
+                    .photo {
+                        &__image {
+                            justify-content: flex-end;
+                        }
+                        &__date {
                             right: 100%;
                             left: -30px;
                         }
-                        &--number {
+                        &__number {
                             right: 77%;
                             left: auto;
                             text-align: right;
@@ -104,7 +105,7 @@
             }
 
             // Number
-            &__image--number {
+            &__number {
                 @include breakpoint (sm) {
                     transform: translate(-50%, var(--translate));
                     will-change: transform;
@@ -185,23 +186,21 @@
                 }
             }
 
-            // Image
-            &__image {
-                &--img {
-                    border-radius: 8px;
-                }
-                &--number {
-                    font-size: rem(96px);
-                    bottom: -88px;
-                    right: 24px;
-                    z-index: 1;
-                    transform: none;
-                    top: auto;
-                    left: auto;
-                }
-                &--date {
-                    display: none;
-                }
+            // Image informations
+            &__img {
+                border-radius: 8px;
+            }
+            &__number {
+                font-size: rem(96px);
+                bottom: -88px;
+                right: 24px;
+                z-index: 1;
+                transform: none;
+                top: auto;
+                left: auto;
+            }
+            &__date {
+                display: none;
             }
         }
 
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 3280c92..98e9388 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -50,7 +50,7 @@
         }
 
         // Photos
-        .gallery__images--photo {
+        .gallery__photo {
             &:before {
                 background-color: $color-secondary;
             }
diff --git a/src/style/pages/_page.scss b/src/style/pages/_page.scss
index 705237d..84784f5 100644
--- a/src/style/pages/_page.scss
+++ b/src/style/pages/_page.scss
@@ -40,26 +40,23 @@
         }
     }
 
-    // List
-    &__list {
-        // Category
-        &--category {
-            margin-bottom: 96px;
-            text-align: center;
+    // Category
+    &__category {
+        margin-bottom: 96px;
+        text-align: center;
 
-            &:last-child {
-                margin-bottom: 0;
-            }
+        &:last-child {
+            margin-bottom: 0;
+        }
 
-            h2 {
-                margin-bottom: 56px;
-            }
-            dl {
-                margin-bottom: 40px;
-            }
-            dt {
-                margin-bottom: 8px;
-            }
+        h2 {
+            margin-bottom: 56px;
+        }
+        dl {
+            margin-bottom: 40px;
+        }
+        dt {
+            margin-bottom: 8px;
         }
     }
 
diff --git a/src/style/pages/_place.scss b/src/style/pages/_place.scss
index 41cba0d..ac8b85e 100644
--- a/src/style/pages/_place.scss
+++ b/src/style/pages/_place.scss
@@ -124,14 +124,14 @@
             height: 100%;
             background-color: $color-tertiary;
         }
+    }
 
-        // Wrap
-        &--wrap {
-            padding: 0;
+    // Wrap
+    &__wrap {
+        padding: 0;
 
-            @include breakpoint (md) {
-                padding-left: 128px;
-            }
+        @include breakpoint (md) {
+            padding-left: 128px;
         }
     }
 
diff --git a/src/style/style.scss b/src/style/style.scss
index 4bdb912..063f6d7 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -22,15 +22,16 @@
 @import "atoms/switcher";
 
 // Molecules
+@import "molecules/location";
 @import "molecules/photo";
-@import "molecules/pagination";
 @import "molecules/globe";
-@import "molecules/footer";
 
 // Organisms
-@import "organisms/locations";
 @import "organisms/carousel";
 @import "organisms/photos";
+@import "organisms/locations";
+@import "organisms/pagination";
+@import "organisms/footer";
 
 // Layouts
 @import "layouts/explore";