Add a newsletter subscription form below locations

- One component used below Locations list and in the Pagination when all photos has been loaded
- Keep the subscribe page with the column display

src/molecules/Newsletter.svelte

@@ -1,46 +0,0 @@
-<script>
-    import { site } from 'utils/store'
-    // Components
-    import IconArrow from 'atoms/IconArrow'
-
-    // Props
-    export let title = true
-    export let small = false
-    export let brightness = 'dark'
-</script>
-
-<div class="newsletter" class:newsletter--small={small} class:newsletter--light={brightness === 'light'}>
-    <div class="newsletter__text style-description" class:style-description--small={small} class:style-description--dark={brightness === 'light'} class:page__part={!small}>
-        <p>{$site.newsletter_text}</p>
-    </div>
-
-    <form method="POST" action={$site.newsletter_url} target="_blank" id="sib-form" class="form"
-        class:form--light={brightness === 'light'}
-        class:page__part={!small}
-    >
-        {#if title}
-        <h2 class="style-location">
-            <label for="EMAIL">{$site.newsletter_subtitle}</label>
-        </h2>
-        {/if}
-
-        <div class="newsletter__input form__group form__inputgroup">
-            <input type="email" id="EMAIL" name="EMAIL" value="" placeholder="Your email address..." class="input__text" required>
-            <button type="submit" form="sib-form" class="button-control dir-right"
-                class:button-control--pink={brightness === 'light'}
-                class:button-control--lightpink={brightness === 'dark'}
-            >
-                <IconArrow direction="right" color="#fff" class="icon" width="12" />
-                <IconArrow direction="right" color="#fff" class="icon" width="12" hidden="true" />
-            </button>
-        </div>
-
-        <div class="newsletter__notice">
-            <p class="style-notice">No spam, promised!</p>
-        </div>
-
-        <input type="text" name="email_address_check" value="" style="display: none;">
-        <input type="hidden" name="locale" value="en">
-        <input type="hidden" name="html_type" value="simple">
-    </form>
-</div>

src/molecules/NewsletterForm.svelte

@@ -0,0 +1,41 @@
+<script>
+    import { site } from 'utils/store'
+    // Components
+    import IconArrow from 'atoms/IconArrow'
+
+    // Props
+    export let title = false
+    export let small = false
+    export let brightness = 'dark'
+    export let align = 'center'
+</script>
+
+<form method="POST" action={$site.newsletter_url} target="_blank" id="sib-form" class="form"
+    class:form--light={brightness === 'light'}
+    class:page__part={!small}
+>
+    {#if title}
+    <h2 class="style-location">
+        <label for="SUB_EMAIL">{$site.newsletter_subtitle}</label>
+    </h2>
+    {/if}
+
+    <div class="newsletter__input form__group form__inputgroup">
+        <input type="email" id="SUB_EMAIL" name="EMAIL" value="" placeholder="Your email address..." class="input__text" required>
+        <button type="submit" form="sib-form" class="button-control dir-right"
+            class:button-control--pink={brightness === 'light'}
+            class:button-control--lightpink={brightness === 'dark'}
+        >
+            <IconArrow direction="right" color="#fff" class="icon" width="12" />
+            <IconArrow direction="right" color="#fff" class="icon" width="12" hidden="true" />
+        </button>
+    </div>
+
+    <div class="newsletter__notice" class:is-aligned--right={align === 'right'}>
+        <p class="style-notice">No spam, we promise!</p>
+    </div>
+
+    <input type="text" name="email_address_check" value="" style="display: none;">
+    <input type="hidden" name="locale" value="en">
+    <input type="hidden" name="html_type" value="simple">
+</form>

src/organisms/Locations.svelte

@@ -7,6 +7,7 @@
     // Components
     import Button from 'atoms/Button'
     import Location from 'molecules/Location'
+    import Newsletter from 'organisms/Newsletter'
     // Animations
     import { animateIn } from 'animations/Locations'
 
@@ -58,12 +59,11 @@
 
     <div class="browse__locations" id="locations_list" role="list" bind:this={list}>
     {#each filteredLocations as location (location.id)}
-        <div animate:flip="{{ duration: transitionDuration }}"
+        <div animate:flip="{{ duration: transitionDuration }}" in:receive="{{ key: location.id }}" out:send="{{ key: location.id }}">
-            in:receive="{{ key: location.id }}"
-            out:send="{{ key: location.id }}"
-        >
             <Location {location} />
         </div>
     {/each}
     </div>
 </div>
+
+<Newsletter />

src/organisms/Newsletter.svelte

@@ -0,0 +1,22 @@
+<script>
+    import { site } from 'utils/store'
+    // Components
+    import NewsletterForm from 'molecules/NewsletterForm'
+
+    // Props
+    export let brightness = undefined
+    export let title = 'Keep Updated'
+</script>
+
+<div class="newsletter" class:newsletter--light={brightness === 'light'}>
+    <div class="wrapper">
+        <div class="newsletter__text style-description style-description--small" class:style-description--dark={brightness === 'light'}>
+            <h2 class="style-location">
+                <label for="SUB_EMAIL">{title}</label>
+            </h2>
+            <p>{$site.newsletter_text}</p>
+        </div>
+
+        <NewsletterForm align="right" {brightness} />
+    </div>
+</div>

src/organisms/Pagination.svelte

@@ -2,7 +2,7 @@
     import { onMount, createEventDispatcher } from 'svelte'
     import { site, currentLocation } from 'utils/store'
     // Components
-    import Newsletter from 'molecules/Newsletter'
+    import Newsletter from 'organisms/Newsletter'
     // Props
     export let photos
     export let paginatedPhotos
@@ -58,12 +58,9 @@
 
     {:else if $currentLocation}
     <div class="pagination__message">
-        <h3>That's all folks!</h3>
-
         <Newsletter
-            small={true}
+            title="That's all folks!"
             brightness="light"
-            title={false}
         />
     </div>
     {/if}

src/routes/subscribe.svelte

@@ -9,7 +9,7 @@
     import TitleSite from 'atoms/TitleSite'
     import LinkTranslate from 'atoms/LinkTranslate'
     import InteractiveGlobe from 'molecules/InteractiveGlobe'
-    import Newsletter from 'molecules/Newsletter'
+    import NewsletterForm from 'molecules/NewsletterForm'
     import Footer from 'organisms/Footer'
     import SocialMetas from 'utils/SocialMetas'
     // Animations
@@ -53,7 +53,15 @@
                 <TitleSite />
             </div>
 
-            <Newsletter />
+            <div class="newsletter newsletter--column">
+                <div class="newsletter__text style-description page__part">
+                    <p>{$site.newsletter_text}</p>
+                </div>
+
+                <div class="page__part">
+                    <NewsletterForm title={true} />
+                </div>
+            </div>
         </div>
 
         {#if process.browser}

src/style/_variables.scss

@@ -1,5 +1,6 @@
 // Colors
 $color-primary: #3C0576;
+$color-primary-dark: #36046A;
 $color-primary-darker: #2D0458;
 $color-secondary: #FF6C89;
 $color-secondary-light: #FFB3C2;

src/style/atoms/_inputs.scss

@@ -0,0 +1,40 @@
+// Text input
+.input__text {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 48px;
+    padding: 0 24px;
+    color: #fff;
+    font-size: rem(16px);
+    font-family: $font-sans-light;
+    border: 2px solid rgba($color-secondary, 0.6);
+    border-radius: 50vh;
+    transition: border 300ms $ease-quart;
+    background: none;
+    outline: none;
+
+    @include breakpoint (sm) {
+        font-size: rem(18px);
+        height: 64px;
+        padding: 0 32px;
+    }
+
+    // States
+    &::placeholder {
+        color: #fff;
+        opacity: 0.75;
+        transition: all 300ms $ease-quart;
+    }
+    &:focus {
+        @extend %input__text--active;
+    }
+}
+
+%input__text--active {
+    border-color: $color-secondary;
+
+    &::placeholder {
+        opacity: 1;
+    }
+}

src/style/layouts/_explore.scss

@@ -21,6 +21,5 @@
         position: relative;
         z-index: 3;
         margin-top: 72px;
-        margin-bottom: 72px;
     }
 }

src/style/molecules/_form.scss

@@ -36,8 +36,9 @@
 
 
     /*
-    ** Light version
+    ** Variants
     */
+    // Light version
     &--light {
         // Text input
         .input__text {
@@ -47,44 +48,3 @@
         }
     }
 }
-
-// Text input
-.input__text {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 48px;
-    padding: 0 24px;
-    color: #fff;
-    font-size: rem(16px);
-    font-family: $font-sans-light;
-    border: 2px solid rgba($color-secondary, 0.6);
-    border-radius: 50vh;
-    transition: border 300ms $ease-quart;
-    background: none;
-    outline: none;
-
-    @include breakpoint (sm) {
-        font-size: rem(18px);
-        height: 64px;
-        padding: 0 32px;
-    }
-
-    // States
-    &::placeholder {
-        color: #fff;
-        opacity: 0.75;
-        transition: all 300ms $ease-quart;
-    }
-    &:focus {
-        @extend %input__text--active;
-    }
-}
-
-%input__text--active {
-    border-color: $color-secondary;
-
-    &::placeholder {
-        opacity: 1;
-    }
-}

src/style/molecules/_newsletter.scss

@@ -1,58 +1,109 @@
 // Newsletter
 .newsletter {
-    max-width: 360px;
+    background-color: $color-primary-dark;
-    margin: 0 auto;
+    padding: 56px 0;
-    text-align: center;
 
     @include breakpoint (sm) {
-        max-width: 444px;
+        padding: 96px 0;
+    }
+
+    .wrapper {
+        @include breakpoint (md) {
+            display: flex;
+            justify-content: space-between;
+        }
     }
 
-    // Title
     h2 {
-        margin-bottom: 40px;
         color: $color-secondary;
     }
 
     // Text
     &__text {
-        margin-bottom: 72px;
+        max-width: 400px;
+        margin: 0 auto 32px;
 
         @include breakpoint (sm) {
-            margin-bottom: 96px;
+            margin-bottom: 40px;
+        }
+        @include breakpoint (md) {
+            margin-left: 0;
+            margin-right: 48px;
+            margin-bottom: 0;
+            text-align: left;
+        }
+
+        h2 {
+            margin-bottom: 16px;
+
+            @include breakpoint (md) {
+                text-align: left;
+            }
         }
     }
 
     // Form
     .form {
+        min-width: 270px;
+        max-width: 320px;
+        margin: 0 auto;
 
+        @include breakpoint (md) {
+            min-width: 320px;
+            max-width: 440px;
+            margin: 48px 0 0;
+        }
+
+        // Title (if existing)
+        h2 {
+            margin-bottom: 24px;
+
+            @include breakpoint (sm) {
+                margin-bottom: 40px;
+            }
+        }
     }
 
     // Notice
     &__notice {
-        margin-top: 32px;
+        margin-top: 16px;
+        text-align: center;
     }
 
 
     /*
-    ** Small version
+    ** Variants
     */
-    &--small {
+    // Centered column mode
-        .newsletter__text {
+    &--column {
-            max-width: 344px;
+        max-width: 360px;
-            margin-bottom: 32px;
+        margin: 0 auto;
+        padding: 0;
+        background: none;
 
         @include breakpoint (sm) {
-                margin-bottom: 48px;
+            max-width: 444px;
+        }
+
+        // Text
+        .newsletter__text {
+            max-width: 440px;
+            margin: 0 0 48px;
+            text-align: center;
+
+            @include breakpoint (sm) {
+                margin-bottom: 72px;
+            }
+            @include breakpoint (md) {
+                margin-bottom: 96px;
             }
         }
     }
 
-
+    // Light version
-    /*
-    ** Light version
-    */
     &--light {
+        background: none;
+
         .newsletter__notice {
             p {
                 color: rgba($color-text, 0.5);

src/style/organisms/_footer.scss

@@ -61,6 +61,10 @@
 
                 li {
                     margin-right: 20px;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
                 }
                 a {
                     display: block;

src/style/organisms/_locations.scss

@@ -1,10 +1,10 @@
 .browse {
     width: 100%;
     overflow: hidden;
+    margin-bottom: 56px;
 
     @include breakpoint (sm) {
         margin-top: 120px;
-        margin-bottom: 52px;
     }
 
     // Description
@@ -50,7 +50,7 @@
             grid-row-gap: pxVW(96);
             min-height: 200px;
             margin-top: 112px;
-            margin-bottom: pxVW(120);
+            margin-bottom: pxVW(72);
         }
         @include breakpoint (xl) {
             grid-column-gap: 96px;
@@ -58,7 +58,7 @@
             max-width: 1024px;
             margin-left: auto;
             margin-right: auto;
-            margin-bottom: 184px;
+            margin-bottom: 72px;
 
             // To apply when having 4 locations:
             // grid-template-columns: repeat(4, 1fr);

src/style/organisms/_pagination.scss

@@ -99,16 +99,23 @@
 
     // Message
     &__message {
-        h3 {
+        // Newsletter
-            font-family: $font-serif;
+        .newsletter {
-            font-size: rem(32px);
+            margin: 0;
-            color: $color-secondary;
+            padding: 0;
-            margin-bottom: 16px;
 
             @include breakpoint (sm) {
-                margin-bottom: 24px;
+                padding: 24px 0 0;
+            }
+
+            // Title
+            h2 {
+                font-size: rem(32px);
+
+                @include breakpoint (md) {
                     font-size: rem(40px);
                 }
             }
         }
+    }
 }

src/style/organisms/_photos.scss

@@ -74,6 +74,10 @@
 
             @include breakpoint (sm) {
                 padding-bottom: 120px;
+
+                &:last-child {
+                    padding-bottom: 0;
+                }
             }
 
             // Even photos
@@ -129,14 +133,16 @@
             margin-top: 24px;
 
             @include breakpoint (sm) {
-                margin-top: -184px;
+                margin-top: -64px;
-                padding-top: pxVW(224);
+                padding-top: pxVW(240);
+                padding-bottom: pxVW(120);
             }
             @include breakpoint (md) {
                 padding-top: pxVW(200);
             }
             @include breakpoint (xl) {
                 padding-top: 200px;
+                padding-bottom: 120px;
             }
         }
     }

src/style/style.scss

@@ -23,6 +23,7 @@
 @import "atoms/switcher";
 @import "atoms/counter";
 @import "atoms/badge";
+@import "atoms/inputs";
 
 // Molecules
 @import "molecules/location";