Create shop page

Make components: poster, poster product

src/components/molecules/Poster.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div class="poster">
+    <img src="https://picsum.photos/326/475" width={326} height={475} alt="blob">
+</div>

src/components/organisms/PosterProduct.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+</script>
+
+<div class="poster-product grid">
+    <h2 class="title-huge">Melbourne</h2>
+
+    <div class="poster-product__buy">
+        <img src="/images/poster-display.jpg" alt="">
+        <div class="info">
+            <dl>
+                <dt>Houses Of <br /> Melbourne</dt>
+                <dd>Poster - 30€</dd>
+            </dl>
+            <Button
+                text="Add to cart"
+                color="beige"
+            />
+        </div>
+    </div>
+
+    <div class="poster-product__images grid">
+        <picture class="image image--first photo shadow-box-light">
+            <img src="https://picsum.photos/656/493" width={656} height={493} alt="blob">
+        </picture>
+        <picture class="image image--second photo shadow-box-light">
+            <img src="https://picsum.photos/324/259" width={324} height={259} alt="blob">
+        </picture>
+        <picture class="image image--third photo shadow-box-light">
+            <img src="https://picsum.photos/324/416" width={324} height={416} alt="blob">
+        </picture>
+    </div>
+
+    <div class="poster-product__about grid">
+        <div class="text">
+            <p>This poster will bring you to straight to Melbourne, Australia with its unique Victorian architectural style, wrought iron and colorful fronts.</p>
+            <p class="details">
+                Format: 40cm x 60cm (16” x 24”)<br>Printed on Recycled offset paper, 150gm/m2.<br>Frame not included.
+            </p>
+        </div>
+    </div>
+
+    <div class="poster-product__image grid">
+        <picture class="image image--fourth photo shadow-box-light">
+            <img src="https://picsum.photos/854/588" width={854} height={588} alt="blob">
+        </picture>
+    </div>
+</div>

src/routes/shop.svelte

@@ -1 +0,0 @@
-<h1>Let's sell shit</h1>

src/routes/shop/index.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    import { page } from '$app/stores'
+    // Components
+    import Metas from '$components/Metas.svelte'
+    import SiteTitle from '$components/atoms/SiteTitle.svelte';
+    import Image from '$components/atoms/Image.svelte';
+import PosterProduct from '$components/organisms/PosterProduct.svelte';
+import Poster from '$components/molecules/Poster.svelte';
+import Newsletter from '$components/organisms/Newsletter.svelte';
+import EmailForm from '$components/molecules/EmailForm.svelte';
+
+    export let photos: any
+</script>
+
+<Metas
+    title="Houses Of"
+    description=""
+    image=""
+/>
+
+<main class="shop-page">
+    <header class="shop-page__header">
+        <p class="text-label">Shop your city</p>
+        <nav>
+            <ul>
+                <li>
+                    <a href="#">Bordeaux</a>
+                </li>
+                <li>
+                    <a href="#">Brisbane</a>
+                </li>
+                <li>
+                    <a href="#">Melbourne</a>
+                </li>
+                <li>
+                    <a href="#">Montpellier</a>
+                </li>
+                <li>
+                    <a href="#">Occitanie</a>
+                </li>
+                <li>
+                    <a href="#">Toulouse</a>
+                </li>
+            </ul>
+        </nav>
+        <div class="cart">
+            <span>2 items</span>
+        </div>
+    </header>
+
+    <section class="shop-page__intro">
+        <Image
+            id="d439adf1-2391-415b-bb24-232839f142d4"
+            sizeKey="photo-list"
+            width={1600}
+            height={1000}
+            alt="photo"
+        />
+        <SiteTitle
+            variant="inline"
+        />
+    </section>
+
+    <section class="shop-page__about grid">
+        <p class="description text-normal">Welcome to our shop!<br />We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.</p>
+    </section>
+    <PosterProduct />
+
+    <section class="shop-page__posters grid">
+        <h3>View all of our available posters</h3>
+        <div class="set">
+            <Poster />
+            <Poster />
+            <Poster />
+            <Poster />
+            <Poster />
+            <Poster />
+        </div>
+        <div class="subscribe">
+            <p>Subscribe to be notified when new posters become available</p>
+            <EmailForm />
+        </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"]) {
+                    slug
+                    title
+                    city
+                    location {
+                        name
+                        slug
+                        country {
+                            slug
+                            name
+                            flag { id }
+                        }
+                    }
+                    image { id }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                photos: data.photo,
+            }
+        }
+    }
+</script>

src/style/atoms/_site-title.scss

@@ -56,28 +56,25 @@
         align-items: baseline;
         color: $color-lightpurple;
         justify-content: center;
+        font-size: rem(64px);
 
         @include bp (sm) {
             display: flex;
+            font-size: rem(96px);
         }
 
         strong {
             color: $color-secondary;
-            font-size: rem(64px);
-
-            @include bp (sm) {
-                font-size: rem(96px);
-            }
         }
 
         span {
             display: block;
             top: 0;
             margin: 10px 0;
-            font-size: rem(20px);
+            font-size: 0.3125em;
 
             @include bp (sm) {
-                font-size: rem(32px);
+                font-size: 0.333em;
                 margin: 0 16px 0 20px;
             }
         }

src/style/molecules/_poster.scss

@@ -0,0 +1,7 @@
+.poster {
+    img {
+        display: block;
+        width: 100%;
+        height: auto;
+    }
+}

src/style/organisms/_poster-product.scss

@@ -0,0 +1,119 @@
+.poster-product {
+    background-color: $color-cream;
+
+    // Title Location
+    h2 {
+        grid-column: 2 / span calc(var(--columns) - 1);
+        font-size: clamp(200px, 20vw, 340px);
+        color: $color-secondary;
+        text-align: center;
+        margin-bottom: 48px;
+    }
+
+    // Poster Product
+    &__buy {
+        grid-column: 2 / span 10;
+
+        img {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+
+        // Product Info
+        .info {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 36px;
+        }
+
+        // Title
+        dt {
+            color: $color-secondary;
+            font-family: $font-serif;
+            font-size: rem(36px);
+            line-height: 1.3;
+        }
+
+        // Text
+        dd {
+            font-size: rem(16px);
+            color: $color-gray;
+            margin-top: 8px;
+        }
+    }
+
+    // Images set
+    &__images {
+        --columns: 10;
+        grid-column: 14 / span var(--columns);
+        position: relative;
+        z-index: 2;
+
+        .image {
+            border-radius: 6px;
+
+            img {
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+        }
+
+        // Image 1
+        .image--first {
+            grid-column: 1 / span 10;
+        }
+        // Image 2
+        .image--second {
+            grid-column: 2 / span 5;
+            margin: 48px 0;
+        }
+        // Image 3
+        .image--third {
+            grid-column: 5 / span 5;
+        }
+    }
+
+    // About
+    &__about {
+        background-color: #fff;
+        padding: 148px 0 260px;
+        margin: -80px 0 -120px;
+        font-size: rem(36px);
+        font-weight: 300;
+        color: $color-primary-tertiary20;
+        line-height: 1.4;
+
+        .text {
+            grid-column: 4 / span 13;
+        }
+
+        .details {
+            color: $color-gray;
+            font-size: rem(18px);
+            margin-top: 56px;
+            line-height: 1.5;
+        }
+    }
+
+    // Single Image
+    &__image {
+        margin-bottom: 120px;
+
+        .image {
+            border-radius: 6px;
+
+            img {
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+        }
+
+        // Image 4
+        .image--fourth {
+            grid-column: 8 / span 13;
+        }
+    }
+}

src/style/pages/_shop.scss

@@ -0,0 +1,183 @@
+.shop-page {
+
+    // Header
+    header {
+        // display: flex;
+        display: none;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+
+        // Shop
+        p {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+        }
+
+        // Navigation
+        ul {
+            display: flex;
+
+            li {
+                display: block;
+            }
+            a {
+                text-decoration: none;
+                font-size: rem(24px);
+                font-family: $font-serif;
+                color: $color-tertiary;
+                margin: 0 12px;
+            }
+        }
+
+        // Cart
+        span {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+    }
+
+    // Intro
+    &__intro {
+        position: relative;
+        height: 80vh;
+        min-height: 800px;
+        overflow: hidden;
+
+        // Background Image
+        picture {
+            width: 100%;
+            height: 100%;
+
+            img {
+                display: block;
+                object-fit: cover;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+
+        // Site Title
+        h1 {
+            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            text-align: center;
+
+            span, strong {
+                color: #fff;
+            }
+        }
+    }
+
+    // About
+    &__about {
+        background-color: $color-cream;
+        color: $color-text;
+        padding: 120px 0;
+
+        .description {
+            grid-column: 3 / span 12;
+            max-width: 560px;
+            font-weight: 300;
+        }
+    }
+
+    // Posters
+    &__posters {
+        padding: 120px 0;
+
+        // Title
+        h3 {
+            grid-column: 3 / span 7;
+            font-family: $font-serif;
+            color: $color-cream;
+            font-size: rem(48px);
+            line-height: 1.1;
+        }
+
+        // Posters Set
+        .set {
+            --gap: 24px;
+            grid-column: 2 / span 22;
+            display: block;
+
+            @include bp (mob-lg) {
+                --gap: 32px;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: var(--gap);
+            }
+            @include bp (md) {
+                grid-template-columns: repeat(3, 1fr);
+            }
+            @include bp (sd) {
+                --gap: 48px;
+                grid-template-columns: repeat(4, 1fr);
+            }
+
+            .poster {
+                // 2 columns
+                &:nth-child(2n + 1) {
+                    @include bp (sm, max) {
+                        margin-top: calc(var(--gap) * 2);
+                    }
+                }
+
+                // 3 columns
+                &:nth-child(3n + 1) {
+                    @include bp (sd, max) {
+                        margin-top: calc(var(--gap) * 2);
+                    }
+                }
+                &:nth-child(3n + 2) {
+                    @include bp (sd, max) {
+                        margin-top: var(--gap);
+                    }
+                }
+
+                // 4 columns
+                &:nth-child(4n + 1) {
+                    @include bp (sd) {
+                        margin-top: 64px * 3;
+                    }
+                }
+                &:nth-child(4n + 2) {
+                    @include bp (sd) {
+                        margin-top: 64px * 2;
+                    }
+                }
+                &:nth-child(4n + 3) {
+                    @include bp (sd) {
+                        margin-top: 64px;
+                    }
+                }
+            }
+        }
+
+        // Subscribe
+        .subscribe {
+            grid-column: 14 / span 7;
+
+            p {
+                font-size: rem(22px);
+                color: $color-cream;
+                font-weight: 300;
+                line-height: 1.5;
+                margin-bottom: 30px;
+            }
+
+            .newsletter-form__bottom {
+                display: none;
+            }
+        }
+    }
+}

src/style/style.scss

@@ -26,6 +26,7 @@
 @import "pages/credits";
 @import "pages/subscribe";
 @import "pages/location";
+@import "pages/shop";
 
 // Modules
 @import "modules/globe";
@@ -50,12 +51,14 @@
 @import "molecules/heading";
 @import "molecules/issue";
 @import "molecules/newsletter-form";
+@import "molecules/poster";
 
 // Organisms
 @import "organisms/locations";
 @import "organisms/house";
 @import "organisms/newsletter";
 @import "organisms/shop";
+@import "organisms/poster-product";
 @import "organisms/footer";