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 @@
+
+
+
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}
-
-
-
+
\ 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
@@ -38,6 +42,8 @@
{/each}
+
+
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";