Merge branch 'v2' of https://git.server.flayks.com/cetrucflotte/housesof into v2

src/components/molecules/Heading.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+
+    import SiteTitle from '$components/atoms/SiteTitle.svelte';
+
+    export let text: string
+
+</script>
+
+<section class="heading">
+    <SiteTitle variant="inline" />
+    <p class="text-medium">{text}</p>
+</section>

src/components/organisms/Shop.svelte

@@ -14,7 +14,6 @@
 <div class="shop shadow-box-dark">
     <div class="content">
         <div class="shop__image">
-            <img src="/images/poster-display.jpg" alt="">
             <Image id={shop.module_image.id} alt={shop.module_image.title} width={800} height={800} />
         </div>
 

src/routes/locations.svelte

@@ -6,7 +6,7 @@
     import Locations from '$components/organisms/Locations.svelte'
     import Shop from '$components/organisms/Shop.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
-    import SiteTitle from '$components/atoms/SiteTitle.svelte'
+    import Heading from '$components/molecules/Heading.svelte'
 
     export let photos: any
 
@@ -20,10 +20,9 @@
 />
 
 <main class="explore">
-    <section class="explore__intro">
+    <Heading
-        <SiteTitle variant="inline" />
+        text="Explore the globe to discover unique locations across the world"
-        <p class="text-medium">Explore the globe to discover unique locations across the world</p>
+    />
-    </section>
 
     <section class="explore__locations" id="locations">
         <InteractiveGlobe />

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

@@ -14,21 +14,29 @@
 
 // House Name
 .title-image {
-    font-size: rem(88px);
+    font-size: rem(40px);
     font-family: $font-serif;
     line-height: 1;
     color: $color-secondary;
 
+    @include bp (sm) {
+        font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
+    }
+
 }
 
 // House Number
 .title-index {
-    font-size: rem(280px);
+    font-size: rem(80px);
     font-family: $font-serif;
     letter-spacing: -0.05em;
     font-weight: 200;
     line-height: 1;
     color: rgba($color-tertiary, 0.6);
+
+    @include bp (sm) {
+        font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
+    }
 }
 
 // Medium
@@ -46,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);
+    }
 }
 
 
@@ -73,9 +85,12 @@
     line-height: 1.4;
 
     @include bp (sm) {
-        font-size: rem(28px);
+        font-size: rem(24px);
         line-height: 1.5;
     }
+    @include bp (md) {
+        font-size: rem(28px);
+    }
 }
 
 // Normal
@@ -94,8 +109,13 @@
 
 // Photo date
 .text-date {
-    font-size: rem(16px);
+    font-size: rem(14px);
-    line-height: 1.4;
+    line-height: 1.3;
+
+    @include bp (sm) {
+        font-size: rem(16px);
+        line-height: 1.4;
+    }
 }
 
 // Label

src/style/_variables.scss

@@ -46,7 +46,7 @@ $font-serif: "Magnolia", #{$replacement-serif};
 $base-width: 1600 !default;
 
 // Grid
-$cols-m: 12 !default;
+$cols-m: 8 !default;
 $cols-d: 24 !default;
 
 

src/style/molecules/_heading.scss

@@ -0,0 +1,27 @@
+.heading {
+    overflow: hidden;
+    color: $color-tertiary;
+    text-align: center;
+
+    // Title
+    h1 {
+        color: $color-secondary;
+        line-height: 1;
+        margin-top: 56px;
+
+        @include bp (sm) {
+            margin-top: 160px;
+        }
+    }
+    // Text
+    p {
+        max-width: 260px;
+        margin: 40px auto 0;
+        font-weight: 200;
+
+        @include bp (sm) {
+            margin: 72px auto 130px;
+            max-width: 600px;
+        }
+    }
+}

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/organisms/_house.scss

@@ -1,22 +1,37 @@
 .house {
-    --columns: 20;
-    grid-column-start: 3;
     position: relative;
 
+    @include bp (sm) {
+        --columns: 20;
+        grid-column-start: 3;
+    }
+
     a {
         text-decoration: none;
     }
 
     // Information
     &__info {
-        grid-column: 4 / span 14;
+        grid-column: 2 / span var(--columns);
-        margin-bottom: 56px;
+        margin-bottom: 32px;
-        max-width: 800px;
+        padding: 0 20px;
+        max-width: min(540px, 85vw);
+
+        @include bp (sm) {
+            grid-column: 4 / span 14;
+            margin-bottom: 56px;
+            padding: 0;
+            max-width: 800px;
+        }
 
         time {
             display: block;
-            margin-top: 24px;
+            margin-top: 16px;
             color: $color-lightgray;
+
+            @include bp (sm) {
+                margin-top: 24px;
+            }
         }
     }
 
@@ -29,8 +44,11 @@
         picture {
             position: relative;
             z-index: 3;
-            border-radius: 8px;
             overflow: hidden;
+
+            @include bp (sm) {
+                border-radius: 8px;
+            }
         }
         img {
             display: block;
@@ -42,12 +60,17 @@
 
     // Photo number
     &__index {
+        position: absolute;
+        z-index: 1;
+        bottom: -64px;
+        right: 20px;
+        text-align: right;
+
         @include bp (sm) {
-            position: absolute;
-            z-index: 1;
             left: 112.5%;
             width: 400px;
             top: 50%;
+            bottom: auto;
             text-align: left;
             transform: translate3d(-50%, -50%, 0);
         }
@@ -57,13 +80,20 @@
     &:nth-child(even) {
         .house {
             &__photo {
-                grid-column-start: 4;
+                @include bp (sm) {
+                    grid-column-start: 4;
+                }
             }
             &__info {
-                margin-left: auto;
+                @include bp (sm) {
-                text-align: right;
+                    margin-left: auto;
+                    text-align: right;
+                }
             }
             &__index {
+                left: auto;
+                right: 20px;
+
                 @include bp (sm) {
                     right: auto;
                     left: -12%;

src/style/pages/_location.scss

@@ -6,6 +6,7 @@
     .location-page__intro {
         position: relative;
         background: $color-primary;
+        // padding-top: clamp(100px, 25vw, 400px);
 
         @include bp (sm) {
             padding-top: clamp(40px, 14vw, 320px);
@@ -16,21 +17,29 @@
 
         // Houses Of Title
         .title {
-            grid-column: 1 / span var(--columns);
             position: relative;
             z-index: 2;
-            display: flex;
+            grid-column: 1 / span var(--columns);
-            flex-flow: row wrap;
-            align-items: baseline;
-            justify-content: flex-start;
-            max-width: clamp(300px, 80vw, 1120px);
             margin: 0 auto;
             padding: 0 32px;
             font-family: $font-serif;
             line-height: 1;
             text-transform: uppercase;
             color: $color-lightpurple;
-            font-size: rem(56px);
+            font-size: rem(52px);
+            text-align: center;
+            margin: min(360px, 60vw) auto;
+
+            @include bp (sm) {
+                display: flex;
+                flex-flow: row wrap;
+                align-items: baseline;
+                justify-content: flex-start;
+                max-width: clamp(300px, 80vw, 1120px);
+                margin: 0 auto;
+                font-size: rem(56px);
+                text-align: left;
+            }
 
             strong {
                 display: block;
@@ -42,11 +51,22 @@
 
             .housesof {
                 grid-column: span var(--columns);
-                display: flex;
+
-                align-items: baseline;
+                @include bp (sm) {
+                    display: flex;
+                    align-items: baseline;
+                }
 
                 span {
-                    margin: 0 24px;
+                    display: block;
+                    font-size: rem(24px);
+                    margin-top: 8px;
+
+                    @include bp (sm) {
+                        display: inline;
+                        font-size: rem(56px);
+                        margin: 0 24px;
+                    }
                 }
             }
             .city {
@@ -58,25 +78,47 @@
 
     // Description
     &__description {
-        --columns: 19;
+        grid-column: span var(--columns);
-        grid-column: 6 / span 19;
         position: relative;
         z-index: 2;
-        margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
+        margin-bottom: -8px;
         background-color: $color-tertiary;
         color: $color-text;
-        border-radius: 8px 0 0 8px;
+        border-radius: 8px;
+
+        @include bp (sm) {
+            --columns: 19;
+            grid-column: 4 / span 21;
+            margin: clamp(40px, 14vw, 200px) 0 calc(-1 * clamp(60px, 6vw, 120px));
+        }
+        @include bp (md) {
+            grid-column: 6 / span 19;
+        }
 
         .wrap {
-            grid-column: 3 / span 13;
+            grid-column: 2 / span 6;
             max-width: 800px;
-            padding: 128px 0;
+            padding: 50px 0;
+
+            @include bp (sm) {
+                grid-column: 3 / span 13;
+                padding: 72px 0;
+            }
+            @include bp (md) {
+                padding: 128px 0;
+            }
         }
 
         .info {
             $text-color: rgba($color-text, 0.5);
-            margin: 40px 0 64px;
+            margin: 32px 0 40px;
             color: $text-color;
+            line-height: 0.8;
+
+            @include bp (sm) {
+                margin: 40px 0 64px;
+                line-height: 1.3;
+            }
 
             a {
                 color: $text-color;
@@ -97,6 +139,13 @@
 
             .button {
                 margin-right: 16px;
+                margin-bottom: 16px;
+                font-size: rem(16px);
+
+                @include bp (sm) {
+                    margin-bottom: 0;
+                    font-size: rem(18px);
+                }
             }
         }
     }
@@ -108,7 +157,7 @@
         z-index: 1;
         top: 0;
         left: 50%;
-        width: clamp(320px, 100vw, 1920px);
+        width: clamp(320px, 100vw, 2560px);
         height: 100%;
         background: 0 0 var(--illus-mobile) no-repeat;
         background-size: 100% auto;
@@ -126,25 +175,33 @@
     // Houses
     &__houses {
         background-color: #fff;
-        padding-top: 240px;
+        padding-top: 80px;
+
+        @include bp (sm) {
+            padding-top: 240px;
+        }
     }
 
     // House
     .house {
         &:not(:last-child) {
-            margin-bottom: 120px;
+            margin-bottom: 86px;
+
+            @include bp (sm) {
+                margin-bottom: 120px;
+            }
         }
     }
 
     // Next photos section
     &__next {
-        margin-top: 80px;
+        margin-top: 135px;
-        padding: 64px 0 48px;
+        padding: 72px 0 56px;
         background-color: $color-tertiary;
         text-align: center;
 
         @include bp (sm) {
-            margin-top: -120px;
+            margin-top: calc(-1 * clamp(64px, 8vw, 120px));
             padding-top: 240px;
             padding-bottom: 104px;
         }
@@ -170,13 +227,17 @@
             &__progress {
                 position: relative;
                 display: inline-block;
-                font-size: clamp(80px, 16vw, #{rem(160px)});
+                font-size: rem(88px);
                 color: rgba($color-text, 0.2);
                 font-family: $font-serif;
                 font-weight: 200;
                 line-height: 1;
                 letter-spacing: -0.05em;
 
+                @include bp (sm) {
+                    font-size: clamp(80px, 16vw, #{rem(160px)});
+                }
+
                 span {
                     display: inline-block;
                     margin: 0 -10px;
@@ -216,4 +277,4 @@
             font-size: rem(28px);
         }
     }
-}
+}

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
@@ -44,6 +45,8 @@
 @import "molecules/photo-card";
 @import "molecules/location";
 @import "molecules/switcher";
+@import "molecules/heading";
+@import "molecules/issue";
 
 // Organisms
 @import "organisms/locations";