Create Subscribe page

Create issue css component for past newsletter

src/routes/subscribe.svelte

@@ -1 +1,96 @@
-<h1>Subscribe</h1>
+<script lang="ts">
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
+    import Shop from '$components/organisms/Shop.svelte'
+    import Newsletter from '$components/organisms/Newsletter.svelte'
+
+    export let photos: any
+</script>
+
+<Metas
+    title="Subscribe"
+    description=""
+    image=""
+/>
+
+<main class="subscribe">
+    <Heading
+        text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
+    />
+
+    <section class="subscribe__issues">
+        <h2 class="title-small">Past Issues</h2>
+        <ul>
+            <li class="issue">
+                <a href="#">
+                    <img src="/images/issue-1.jpg" alt="">
+                    <dl>
+                        <dt>Issue #3</dt>
+                        <dd>
+                            <p>Adding Occitanie region to the mix!</p>
+                            <time>24/08/2020</time>
+                        </dd>
+                    </dl>
+                </a>
+            </li>
+            <li class="issue">
+                <a href="#">
+                    <img src="/images/issue-1.jpg" alt="">
+                    <dl>
+                        <dt>Issue #3</dt>
+                        <dd>
+                            <p>Adding Occitanie region to the mix!</p>
+                            <time>24/08/2020</time>
+                        </dd>
+                    </dl>
+                </a>
+            </li>
+            <li class="issue">
+                <a href="#">
+                    <img src="/images/issue-1.jpg" alt="">
+                    <dl>
+                        <dt>Issue #3</dt>
+                        <dd>
+                            <p>Adding Occitanie region to the mix!</p>
+                            <time>24/08/2020</time>
+                        </dd>
+                    </dl>
+                </a>
+            </li>
+        </ul>
+    </section>
+
+    <section class="grid-modules grid">
+            <div class="wrap">
+                <Shop />
+                <Newsletter />
+            </div>
+    </section>
+</main>
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, fetch, session, stuff }) {
+        const res = await fetchAPI(`
+            query {
+                photo (limit: 11, sort: ["-date_created"]) {
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                photos: data.photo,
+            }
+        }
+    }
+</script>

src/style/_typography.scss

@@ -54,10 +54,14 @@
 // Small
 .title-small {
     color: $color-secondary;
-    font-size: rem(28px);
+    font-size: rem(24px);
     font-weight: 400;
     line-height: 1.5;
     font-family: $font-serif;
+
+    @include bp (sm) {
+        font-size: rem(28px);
+    }
 }
 
 

src/style/molecules/_issue.scss

@@ -0,0 +1,36 @@
+.issue {
+    display: flex;
+    background-color: #fff;
+    border-radius: 6px;
+
+    a {
+        display: flex;
+        padding: 20px;
+        text-decoration: none;
+    }
+    // Image
+    img {
+        display: block;
+        width: 80px;
+        height: 56px;
+        margin-right: 16px;
+    }
+    // Title
+    dt {
+        color: $color-secondary;
+        font-size: rem(20px);
+        margin-bottom: 8px;
+        font-family: $font-serif;
+        font-weight: 400;
+    }
+    // Description
+    dd {
+        font-size: rem(16px);
+        color: $color-gray;
+    }
+    // Date
+    time {
+        opacity: 0.6;
+        font-size: rem(12px);
+    }
+}

src/style/pages/_subscribe.scss

@@ -0,0 +1,49 @@
+// Subscribe Page
+.subscribe {
+    // Modules
+    .grid-modules {
+        grid-column: span var(--columns);
+        margin: 96px 20px 0;
+        padding-bottom: 40px;
+
+        @include bp (sm) {
+            grid-column: 2 / span 22;
+            margin: 200px 0 72px;
+        }
+    }
+
+    // Past Issues
+    &__issues {
+        margin: 64px auto 0;
+        padding: 0 20px;
+
+        @include bp (sm) {
+            max-width: 800px;
+            padding: 0;
+            margin-top: 0;
+        }
+
+        // Title
+        h2 {
+            text-align: center;
+        }
+
+        ul {
+            margin-top: 32px;
+
+            @include bp (sm) {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                grid-gap: 16px;
+            }
+        }
+        li {
+            display: block;
+            margin-bottom: 16px;
+
+            @include bp (sm) {
+                margin-bottom: 0;
+            }
+        }
+    }
+}

src/style/style.scss

@@ -24,6 +24,7 @@
 @import "pages/photos";
 @import "pages/explore";
 @import "pages/credits";
+@import "pages/subscribe";
 @import "pages/location";
 
 // Modules
@@ -45,6 +46,7 @@
 @import "molecules/location";
 @import "molecules/switcher";
 @import "molecules/heading";
+@import "molecules/issue";
 
 // Organisms
 @import "organisms/locations";