Edit and WIP on Location page

Create house component

src/routes/[country]/[location]/index.svelte

@@ -1,44 +1,116 @@
 <script lang="ts">
     import { page } from '$app/stores'
+    import dayjs from 'dayjs'
+    import advancedFormat from 'dayjs/plugin/advancedFormat'
+    import { getAssetUrl } from '$utils/helpers'
     // Components
+    import Button from '$components/atoms/Button.svelte'
+    import IconEarth from '$components/atoms/IconEarth.svelte'
     import Image from '$components/atoms/Image.svelte'
 
     export let data: any
     export let photos: any
 
+    dayjs.extend(advancedFormat)
+
     const { params } = $page
     let descriptionEl: HTMLElement
 </script>
 
-<main class="location">
+<main class="location-page">
-    <h1 class="location__title">
+    <section class="location-page__intro grid"
-        <span class="housesof">
+        style="
-            <strong>Houses</strong>
+            --illus-desktop: url({getAssetUrl(data.illustration_desktop.id, 1600, 1466, 90)});
-            <span>of</span>
+            --illus-desktop-2x: url({getAssetUrl(data.illustration_desktop_2x.id, 3200, 2932, 90)});
-        </span>
+            --illus-mobile: url({getAssetUrl(data.illustration_mobile.id, 1125, 2317, 90)});
-        <strong class="city">
+        "
-            <!-- {data.name} -->
+    >
-            Melbourne
+        <h1 class="title">
-        </strong>
+            <span class="housesof">
-    </h1>
+                <strong>Houses</strong>
+                <span>of</span>
+            </span>
+            <strong class="city">
+                {data.name}
+            </strong>
+        </h1>
 
-    <div class="location__description" bind:this={descriptionEl}>
+        <div class="location-page__description grid" bind:this={descriptionEl}>
-        {@html data.description}
+            <div class="wrap">
-    </div>
+                <div class="text-medium">
+                    Houses of {data.name} {data.description}
+                </div>
+                <div class="info">
+                    <p class="text-label">
+                        Photos by
+                        {#each data.credits as { credit_id: { name, website }}}
+                            {#if website}
+                                <a href={website} target="_blank" rel="noopener external">
+                                    {name}
+                                </a>
+                            {:else}
+                                <span>{name}</span>
+                            {/if}
+                        {/each}
+                    </p>
+                    &middot;
+                    <p class="text-label">Updated [10] days ago</p>
+                </div>
 
-    {#each photos as { image: { id, title }, slug }}
+                <div class="ctas">
-        <div class="photo">
+                    <Button url="/locations" text="Change location" class="shadow-small">
-            <a href="/{params.country}/{params.location}/{slug}">
+                        <IconEarth />
-                <Image
+                    </Button>
-                    id={id}
+                    <Button url="/shop" text="Buy the poster" class="button--pink shadow-small">
-                    alt="{title}"
+                        <!-- <IconEarth /> -->
-                    width={1000}
+                    </Button>
-                    height={600}
+                </div>
-                    format="webp"
+            </div>
-                />
-            </a>
         </div>
-    {/each}
+
+        <div class="location-page__illustration" />
+    </section>
+
+    <section class="location-page__houses grid">
+        {#each photos as { title, image: { id, title: alt }, slug, date_taken }}
+            <div class="house grid">
+                <div class="house__info">
+                    <a href="/{params.country}/{params.location}/{slug}">
+                        <h2 class="title-image">
+                            {title}
+                        </h2>
+                        <time class="text-date" datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
+                            {dayjs(date_taken).format('MMMM, Do YYYY')}
+                        </time>
+                    </a>
+                </div>
+                <a class="house__photo" href="/{params.country}/{params.location}/{slug}">
+                    <Image
+                        id={id}
+                        alt="{alt}"
+                        width={1280}
+                        height={853}
+                        class="shadow-photo"
+                    />
+                    <span class="house__index title-index">22</span>
+                </a>
+            </div>
+        {/each}
+    </section>
+
+    <section class="location-page__next">
+        <div class="pagination" role="button">
+            <div class="pagination__progress">
+                <span class="pagination__page">page</span>
+                <span class="current">1</span>
+                <span>/</span>
+                <span class="total">1</span>
+            </div>
+            <p class="pagination__more">
+                See more photos
+            </p>
+        </div>
+    </section>
 </main>
 
 
@@ -55,6 +127,15 @@
                     slug
                     description
                     date_updated
+                    illustration_desktop { id }
+                    illustration_desktop_2x { id }
+                    illustration_mobile { id }
+                    credits {
+                        credit_id {
+                            name
+                            website
+                        }
+                    }
                 }
 
                 photo (filter: { location: { slug: { _eq: "${location}" } }}) {

src/style/_typography.scss

@@ -10,6 +10,25 @@
     line-height: 1;
 }
 
+// House Name
+.title-image {
+    font-size: rem(88px);
+    font-family: $font-serif;
+    line-height: 1;
+    color: $color-secondary;
+
+}
+
+// House Number
+.title-index {
+    font-size: rem(280px);
+    font-family: $font-serif;
+    letter-spacing: -0.05em;
+    font-weight: 200;
+    line-height: 1;
+    color: rgba($color-tertiary, 0.6);
+}
+
 // Medium
 .title-medium {
     font-family: $font-serif;
@@ -71,10 +90,17 @@
     line-height: 1.5;
 }
 
+// Photo date
+.text-date {
+    font-size: rem(16px);
+    line-height: 1.4;
+}
+
 // Label
 .text-label {
     font-size: rem(12px);
     line-height: 1.4;
     text-transform: uppercase;
     letter-spacing: 1px;
+    font-weight: 500;
 }

src/style/atoms/_button.scss

@@ -11,7 +11,7 @@
     text-decoration: none;
 
     // Icon
-    img {
+    img, svg {
         display: block;
         margin-right: 12px;
     }
@@ -27,5 +27,6 @@
     // Pink
     &--pink {
         background: $color-secondary-light;
+
     }
 }

src/style/organisms/_house.scss

@@ -0,0 +1,51 @@
+.house {
+    --columns: 20;
+    grid-column-start: 3;
+    position: relative;
+
+    a {
+        text-decoration: none;
+    }
+
+    // Information
+    &__info {
+        grid-column: 4 / span 14;
+        margin-bottom: 56px;
+        max-width: 800px;
+
+        time {
+            display: block;
+            margin-top: 24px;
+            color: $color-lightgray;
+        }
+    }
+
+    // Photo
+    &__photo {
+        position: relative;
+        display: block;
+        grid-column: 1 / span 17;
+
+        picture {
+            position: relative;
+            z-index: 3;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        img {
+            display: block;
+            width: 100%;
+            height: auto;
+            object-fit: contain;
+        }
+    }
+
+    // Photo number
+    &__index {
+        position: absolute;
+        right: -250px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+    }
+}

src/style/pages/_location.scss

@@ -1,38 +1,199 @@
 // Location Page
-.location {
+.location-page {
-    // Houses Of Title
+    background: #fff;
-    &__title {
-        max-width: 1164px;
-        margin: 0 auto;
-        padding: 0 32px;
-        font-family: $font-serif;
-        line-height: 1;
-        text-transform: uppercase;
-        color: $color-lightpurple;
-        font-size: rem(56px);
 
-        strong {
+    // Intro
-            display: block;
+    .location-page__intro {
-            font-size: clamp(48px, 16vw, 160px);
+        position: relative;
-            color: $color-secondary;
+        // height: 85vh;
-            font-weight: 300;
+        background: $color-primary;
-            text-transform: none;
-        }
 
-        .housesof {
+        // Houses Of Title
-            grid-column: span var(--columns);
+        .title {
-            display: flex;
+            grid-column: 1 / span var(--columns);
-            align-items: baseline;
+            position: relative;
-            // margin-left: -10vw;
+            z-index: 2;
+            max-width: 1164px;
+            margin: clamp(80px, 10vw, 240px) auto clamp(60px, 6vw, 120px);
+            padding: 0 32px;
+            font-family: $font-serif;
+            line-height: 1;
+            text-transform: uppercase;
+            color: $color-lightpurple;
+            font-size: rem(56px);
 
-            span {
+            strong {
-                margin-left: 24px;
+                display: block;
+                font-size: clamp(48px, 16vw, 160px);
+                color: $color-secondary;
+                font-weight: 300;
+                text-transform: none;
+            }
+
+            .housesof {
+                grid-column: span var(--columns);
+                display: flex;
+                align-items: baseline;
+                // margin-left: -10vw;
+
+                span {
+                    margin-left: 24px;
+                }
+            }
+            .city {
+                grid-row: 2;
+                // grid-column: 4 / span 13;
+                text-align: center;
             }
         }
-        .city {
+    }
-            grid-row: 2;
+
-            // grid-column: 4 / span 13;
+    // Illustration
-            text-align: center;
+    &__illustration {
+        pointer-events: none;
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 50%;
+        width: clamp(320px, 100vw, 1920px);
+        height: 100%;
+        background: 0 0 var(--illus-mobile) no-repeat;
+        background-size: 100% auto;
+        transform: translate3d(-50%, 0, 0);
+
+
+        @include bp (sm) {
+            background-image: var(--illus-desktop);
+        }
+        @include bp (xl) {
+            background-image: var(--illus-desktop-2x);
+        }
+    }
+
+    // Description
+    &__description {
+        --columns: 19;
+        grid-column: 6 / span 19;
+        position: relative;
+        z-index: 2;
+        margin-bottom: calc(-1 * clamp(60px, 6vw, 120px));
+        background-color: $color-tertiary;
+        color: $color-text;
+        border-radius: 8px 0 0 8px;
+
+        .wrap {
+            grid-column: 3 / span 13;
+            max-width: 800px;
+            padding: 128px 0;
+        }
+
+        .info {
+            $text-color: rgba($color-text, 0.5);
+            margin: 40px 0 64px;
+            color: $text-color;
+
+            a {
+                color: $text-color;
+
+                &:hover {
+                    color: $color-secondary;
+                }
+            }
+
+            & > * {
+                display: inline-block;
+                vertical-align: middle;
+            }
+        }
+        .ctas {
+            display: flex;
+            flex-wrap: wrap;
+
+            .button {
+                margin-right: 16px;
+            }
+        }
+    }
+
+    // Houses
+    &__houses {
+        background-color: #fff;
+        padding-top: 240px;
+    }
+
+    // House
+    .house {
+        &:not(:last-child) {
+            margin-bottom: 120px;
+        }
+
+        &:nth-child(even) {
+            .house {
+                &__photo {
+                    grid-column-start: 4;
+                }
+                &__info {
+                    margin-left: auto;
+                    text-align: right;
+                }
+                &__index {
+                    right: auto;
+                    left: -250px;
+                }
+            }
+        }
+    }
+
+    &__next {
+        margin-top: -120px;
+        padding: 240px 0 104px;
+        background-color: $color-tertiary;
+        text-align: center;
+
+        .pagination {
+            position: relative;
+            display: block;
+            margin: auto 0;
+            cursor: pointer;
+
+            &__progress {
+                position: relative;
+                display: inline-block;
+                font-size: rem(160px);
+                color: rgba($color-text, 0.15);
+                font-family: $font-serif;
+                font-weight: 200;
+                line-height: 1;
+                letter-spacing: -0.05em;
+
+                span {
+                    display: inline-block;
+                    margin: 0 -10px;
+                }
+            }
+            &__page {
+                position: absolute;
+                color: $color-secondary-bright;
+                font-size: rem(40px);
+                font-family: $font-serif;
+                top: 50%;
+                left: 8%;
+                display: block;
+                width: 100%;
+                transform: translateY(-50%);
+                text-align: center;
+                letter-spacing: normal;
+                font-weight: 400;
+            }
+            &__more {
+                display: block;
+                margin-top: 16px;
+                color: $color-gray;
+                text-transform: uppercase;
+                letter-spacing: 0.1em;
+                font-weight: 300;
+                font-size: rem(14px);
+            }
         }
     }
 }

src/style/style.scss

@@ -47,6 +47,7 @@
 
 // Organisms
 @import "organisms/locations";
+@import "organisms/house";
 @import "organisms/newsletter";
 @import "organisms/shop";
 @import "organisms/footer";