diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte new file mode 100644 index 0000000..ee98ee0 --- /dev/null +++ b/src/components/molecules/EmailForm.svelte @@ -0,0 +1,44 @@ + + +
+
+ + + + + +
+ +
+ {#if past} + + + + + See past issues + + {/if} +

No spam, we promise!

+
+
diff --git a/src/components/organisms/Newsletter.svelte b/src/components/organisms/Newsletter.svelte index bf9aada..f3b1f9c 100644 --- a/src/components/organisms/Newsletter.svelte +++ b/src/components/organisms/Newsletter.svelte @@ -1,16 +1,11 @@
@@ -20,30 +15,6 @@

{newsletter_text}

-
- - - - - -
- -
- - - - - See past issues - -

No spam, we promise!

-
+
\ No newline at end of file diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte index 9fb18ab..3f90340 100644 --- a/src/routes/subscribe.svelte +++ b/src/routes/subscribe.svelte @@ -4,6 +4,8 @@ import Metas from '$components/Metas.svelte' import Image from '$components/atoms/Image.svelte' import Heading from '$components/molecules/Heading.svelte' + import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'; + import EmailForm from '$components/molecules/EmailForm.svelte'; export let issues: any @@ -19,6 +21,8 @@ text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below." /> + +

Past Issues

+ + diff --git a/src/style/molecules/_newsletter-form.scss b/src/style/molecules/_newsletter-form.scss new file mode 100644 index 0000000..3e5bbce --- /dev/null +++ b/src/style/molecules/_newsletter-form.scss @@ -0,0 +1,107 @@ +// Email Form +.newsletter-form { + &__email { + position: relative; + width: 100%; + max-width: 600px; + height: 56px; + margin-bottom: 20px; + padding: 0 24px; + border-radius: 100vh; + box-shadow: inset 0 0 0 2px $color-secondary; + transition: box-shadow 0.6s var(--ease-quart); + + @include bp (sm) { + height: 64px; + padding: 0 30px; + } + + input { + display: block; + width: 100%; + height: 100%; + font-size: rem(16px); + font-family: $font-sans; + font-weight: 300; + color: #333; + background: none; + border: none; + + @include bp (sm) { + font-size: rem(18px); + } + + &::placeholder { + color: $color-gray; + opacity: 1; + } + } + button { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + margin-left: 32px; + background-color: $color-secondary; + height: 32px; + width: 32px; + flex-shrink: 0; + border-radius: 100vh; + } + + // States + &.is-focused { + box-shadow: inset 0 0 0 4px $color-secondary; + } + } + + // Bottom details + &__bottom { + display: block; + text-align: center; + font-size: rem(14px); + max-width: 600px; + + @include bp (sm) { + display: flex; + justify-content: center; + font-size: rem(16px); + } + + .past-issues { + display: inline-flex; + align-items: center; + margin: 0 auto auto 0; + text-decoration: none; + color: $color-text; + + span { + display: block; + padding-bottom: 2px; + font-size: rem(14px); + color: $color-text; + margin-left: 8px; + border-bottom: 1px solid $color-text; + + @include bp (sm) { + margin-left: 12px; + padding-bottom: 0; + font-size: rem(16px); + } + } + } + p { + color: $color-gray; + line-height: 1.3; + margin-top: 16px; + margin-bottom: 0; + + @include bp (sm) { + margin-top: 0; + } + } + } +} \ No newline at end of file diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss index ad04871..39879a1 100644 --- a/src/style/organisms/_newsletter.scss +++ b/src/style/organisms/_newsletter.scss @@ -35,106 +35,6 @@ } } - // Form - &__email { - position: relative; - display: flex; - width: 100%; - max-width: 600px; - height: 64px; - margin-bottom: 20px; - padding: 0 30px; - border-radius: 100vh; - box-shadow: inset 0 0 0 2px $color-secondary; - transition: box-shadow 0.6s var(--ease-quart); - - input { - display: block; - width: 100%; - font-size: rem(18px); - font-family: $font-sans; - font-weight: 300; - color: #333; - background: none; - border: none; - - &::placeholder { - color: $color-gray; - opacity: 1; - } - } - button { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - right: 16px; - top: 50%; - transform: translateY(-50%); - margin-left: 32px; - background-color: $color-secondary; - height: 32px; - width: 32px; - flex-shrink: 0; - border-radius: 100vh; - } - - // States - &.is-focused { - box-shadow: inset 0 0 0 4px $color-secondary; - } - } - - // Past Issues - .past-issues { - display: block; - text-align: center; - font-size: rem(14px); - max-width: 600px; - - @include bp (sm) { - display: flex; - justify-content: space-between; - font-size: rem(16px); - } - - a { - display: flex; - align-items: center; - justify-content: center; - text-decoration: none; - color: $color-text; - - @include bp (sm) { - justify-content: start; - } - } - span { - display: block; - padding-bottom: 2px; - font-size: rem(14px); - color: $color-text; - margin-left: 8px; - border-bottom: 1px solid $color-text; - - @include bp (sm) { - margin-left: 12px; - padding-bottom: 0; - font-size: rem(16px); - } - } - p { - color: $color-gray; - line-height: 1.3; - margin-top: 16px; - margin-bottom: 0; - - @include bp (sm) { - margin-top: 0; - } - } - } - // Variants // Default color &--default { diff --git a/src/style/pages/_subscribe.scss b/src/style/pages/_subscribe.scss index e232a4c..2dd19ac 100644 --- a/src/style/pages/_subscribe.scss +++ b/src/style/pages/_subscribe.scss @@ -12,6 +12,34 @@ } } + // Email Form + .newsletter-form { + margin: 42px auto 70px; + padding: 0 20px; + max-width: max(432px, 70%); + + @include bp (sm) { + max-width: 560px; + margin-top: 0; + margin-bottom: 120px; + } + + &__email { + input { + color: #fff; + + &::placeholder { + color: rgba($color-tertiary, 0.6); + } + } + } + &__bottom { + p { + color: rgba($color-tertiary, 0.6); + } + } + } + // Past Issues &__issues { margin: 64px auto 0; @@ -46,4 +74,12 @@ } } } + + .globe--cropped { + margin-top: 96px; + + @include bp (sm) { + margin-top: 156px; + } + } } \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 6ae7ba0..622c6bb 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -47,6 +47,7 @@ @import "molecules/switcher"; @import "molecules/heading"; @import "molecules/issue"; +@import "molecules/newsletter-form"; // Organisms @import "organisms/locations";