diff --git a/src/molecules/Newsletter.svelte b/src/molecules/Newsletter.svelte
deleted file mode 100644
index 1bff26b..0000000
--- a/src/molecules/Newsletter.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-
-
-
{$site.newsletter_text}
-
-
-
-
\ No newline at end of file
diff --git a/src/molecules/NewsletterForm.svelte b/src/molecules/NewsletterForm.svelte
new file mode 100644
index 0000000..ad4a834
--- /dev/null
+++ b/src/molecules/NewsletterForm.svelte
@@ -0,0 +1,41 @@
+
+
+
\ No newline at end of file
diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte
index 73658cf..01905d5 100644
--- a/src/organisms/Locations.svelte
+++ b/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 @@
{#each filteredLocations as location (location.id)}
-
+
+
\ No newline at end of file
diff --git a/src/organisms/Newsletter.svelte b/src/organisms/Newsletter.svelte
new file mode 100644
index 0000000..bf25df1
--- /dev/null
+++ b/src/organisms/Newsletter.svelte
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ {title}
+
+
{$site.newsletter_text}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/organisms/Pagination.svelte b/src/organisms/Pagination.svelte
index 5b10434..7667bcf 100644
--- a/src/organisms/Pagination.svelte
+++ b/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}
{/if}
diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index e3f608e..af93d87 100644
--- a/src/routes/subscribe.svelte
+++ b/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 @@
-
+
+
+
{$site.newsletter_text}
+
+
+
+
+
+
{#if process.browser}
diff --git a/src/style/_variables.scss b/src/style/_variables.scss
index 3271a3c..95cbfb6 100644
--- a/src/style/_variables.scss
+++ b/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;
diff --git a/src/style/atoms/_inputs.scss b/src/style/atoms/_inputs.scss
new file mode 100644
index 0000000..24e3adb
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/style/layouts/_explore.scss b/src/style/layouts/_explore.scss
index 69fb866..3d1a33b 100644
--- a/src/style/layouts/_explore.scss
+++ b/src/style/layouts/_explore.scss
@@ -21,6 +21,5 @@
position: relative;
z-index: 3;
margin-top: 72px;
- margin-bottom: 72px;
}
}
diff --git a/src/style/molecules/_form.scss b/src/style/molecules/_form.scss
index 037ad9a..0d3bd60 100644
--- a/src/style/molecules/_form.scss
+++ b/src/style/molecules/_form.scss
@@ -36,8 +36,9 @@
/*
- ** Light version
+ ** Variants
*/
+ // Light version
&--light {
// Text input
.input__text {
@@ -46,45 +47,4 @@
}
}
}
-}
-
-// 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;
- }
}
\ No newline at end of file
diff --git a/src/style/molecules/_newsletter.scss b/src/style/molecules/_newsletter.scss
index a3fd3fe..4d43ec3 100644
--- a/src/style/molecules/_newsletter.scss
+++ b/src/style/molecules/_newsletter.scss
@@ -1,58 +1,109 @@
// Newsletter
.newsletter {
- max-width: 360px;
- margin: 0 auto;
- text-align: center;
+ background-color: $color-primary-dark;
+ padding: 56px 0;
@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;
+ }
- // Notice
- &__notice {
- margin-top: 32px;
- }
-
-
- /*
- ** Small version
- */
- &--small {
- .newsletter__text {
- max-width: 344px;
- margin-bottom: 32px;
+ // Title (if existing)
+ h2 {
+ margin-bottom: 24px;
@include breakpoint (sm) {
- margin-bottom: 48px;
+ margin-bottom: 40px;
}
}
}
+ // Notice
+ &__notice {
+ margin-top: 16px;
+ text-align: center;
+ }
+
/*
- ** Light version
+ ** Variants
*/
+ // Centered column mode
+ &--column {
+ max-width: 360px;
+ margin: 0 auto;
+ padding: 0;
+ background: none;
+
+ @include breakpoint (sm) {
+ 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 {
+ background: none;
+
.newsletter__notice {
p {
color: rgba($color-text, 0.5);
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index 99f4120..da8c78d 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -61,6 +61,10 @@
li {
margin-right: 20px;
+
+ &:last-child {
+ margin-right: 0;
+ }
}
a {
display: block;
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index 36d762f..141fa0e 100644
--- a/src/style/organisms/_locations.scss
+++ b/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);
diff --git a/src/style/organisms/_pagination.scss b/src/style/organisms/_pagination.scss
index 820b8e0..3abd7ed 100644
--- a/src/style/organisms/_pagination.scss
+++ b/src/style/organisms/_pagination.scss
@@ -99,16 +99,23 @@
// Message
&__message {
- h3 {
- font-family: $font-serif;
- font-size: rem(32px);
- color: $color-secondary;
- margin-bottom: 16px;
+ // Newsletter
+ .newsletter {
+ margin: 0;
+ padding: 0;
@include breakpoint (sm) {
- margin-bottom: 24px;
- font-size: rem(40px);
+ padding: 24px 0 0;
+ }
+
+ // Title
+ h2 {
+ font-size: rem(32px);
+
+ @include breakpoint (md) {
+ font-size: rem(40px);
+ }
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss
index 9182e4e..462b40b 100644
--- a/src/style/organisms/_photos.scss
+++ b/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;
- padding-top: pxVW(224);
+ margin-top: -64px;
+ padding-top: pxVW(240);
+ padding-bottom: pxVW(120);
}
@include breakpoint (md) {
padding-top: pxVW(200);
}
@include breakpoint (xl) {
padding-top: 200px;
+ padding-bottom: 120px;
}
}
}
diff --git a/src/style/style.scss b/src/style/style.scss
index c77e343..357fd5d 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -23,6 +23,7 @@
@import "atoms/switcher";
@import "atoms/counter";
@import "atoms/badge";
+@import "atoms/inputs";
// Molecules
@import "molecules/location";