Add style to Photo Viewer page

src/components/atoms/ButtonCircle.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<button class="button-circle" on:click>
+    <slot />
+</button>

src/components/atoms/IconArrow.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-
     export let color: string = undefined
+    export let flip: boolean = false
 </script>
 
-<svg class="arrow arrow--{color}" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="arrow arrow--{color}" class:arrow--flip={flip} width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.67961 11.8224C4.34487 12.1571 4.34487 12.6999 4.67961 13.0346C5.01434 13.3693 5.55705 13.3693 5.89179 13.0346L11.3204 7.60602C11.6551 7.27129 11.6551 6.72857 11.3204 6.39384L5.89179 0.965267C5.55705 0.630532 5.01434 0.630532 4.67961 0.965267C4.34487 1.3 4.34487 1.84271 4.67961 2.17745L8.64494 6.14279L1.2857 6.14279C0.812311 6.14279 0.428555 6.52654 0.428555 6.99993C0.428555 7.47332 0.812311 7.85707 1.2857 7.85707L8.64494 7.85707L4.67961 11.8224Z" fill="#000"/>
 </svg>

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

@@ -4,6 +4,8 @@
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     // Components
     import Image from '$components/atoms/Image.svelte'
+import IconArrow from '$components/atoms/IconArrow.svelte'
+import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     export let photos: any[]
     export let location: any
@@ -40,20 +42,11 @@
 </script>
 
 
-<h1>Title</h1>
+<main class="viewer-photo grid">
-<p>{currentPhoto.title}</p>
+    <div class="viewer-photo__carousel">
-
+        <div class="viewer-photo__images">
-<h2>Location</h2>
-<p>{location.name}, {location.country.name}</p>
-<span style="vertical-align: middle;">&middot;</span>
-<time class="text-date" datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>
-    {dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}
-</time>
-
-<button on:click={goToPrevious}>Previous</button>
-<button on:click={goToNext}>Next</button>
-
             <Image
+                class="photo"
                 id={currentPhoto.image.id}
                 alt={currentPhoto.title}
                 sizeKey="photo-list"
@@ -65,7 +58,33 @@
                 ratio={1.5}
             />
 
-<p>index: {currentIndex + 1}</p>
+            <div class="viewer-photo__controls">
+                <ButtonCircle on:click={goToPrevious}>
+                    <IconArrow
+                        color="pink"
+                        flip={true}
+                    />
+                </ButtonCircle>
+                <ButtonCircle on:click={goToPrevious}>
+                    <IconArrow
+                        color="pink"
+                    />
+                </ButtonCircle>
+            </div>
+
+            <p class="viewer-photo__index title-index">{currentIndex + 1}</p>
+        </div>
+
+
+        <div class="viewer-photo__info">
+            <h1 class="title-medium">{currentPhoto.title}</h1>
+
+            <div class="detail text-date">
+                <img src="/images/icons/map-pin.svg" alt=""><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
+            </div>
+        </div>
+    </div>
+</main>
 
 
 <script context="module" lang="ts">

src/style/atoms/_arrow.scss

@@ -6,4 +6,14 @@
             fill: #fff;
         }
     }
+
+    &--pink {
+        path {
+            fill: $color-secondary;
+        }
+    }
+
+    &--flip {
+        transform: rotate(180deg);
+    }
 }

src/style/atoms/_button-circle.scss

@@ -0,0 +1,15 @@
+.button-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    background-color: #fff;
+    border-radius: 100vh;
+
+    & > * {
+        width: 22px;
+        height: 22px;
+        object-fit: contain;
+    }
+}

src/style/pages/_viewer-photo.scss

@@ -0,0 +1,141 @@
+.viewer-photo {
+    height: 100vh;
+
+    @include bp (md, max) {
+        display: block;
+    }
+
+    // Carousel
+    &__carousel {
+        display: grid;
+        grid-row-gap: 20px;
+        margin: auto 8px;
+        height: 100%;
+
+        @include bp (md) {
+            margin: auto 0;
+            grid-column: 3 / span 16;
+        }
+    }
+
+    // Images
+    &__images {
+        position: relative;
+        margin: auto 0 0;
+
+        .photo {
+            position: relative;
+            z-index: 3;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow:
+                0 12px 12px rgba(#000, 0.15),
+                0 20px 20px rgba(#000, 0.15),
+                0 48px 48px rgba(#000, 0.15);
+        }
+    }
+
+    // Infos
+    &__info {
+        margin-top: auto;
+        margin-bottom: 40px;
+        padding: 0 20px;
+        text-align: center;
+
+        @include bp (md) {
+            margin-top: 26px;
+            padding: 0;
+            text-align: left;
+        }
+        @include bp (lg) {
+            display: grid;
+            grid-template-columns: 55% 45%;
+            align-items: baseline;
+        }
+
+        h1 {
+            color: $color-secondary;
+            font-size: rem(32px);
+            line-height: 1.1;
+        }
+
+        // Details
+        .detail {
+            display: inline-block;
+            align-items: center;
+            margin-top: 24px;
+            color: $color-tertiary;
+            line-height: 1.5;
+
+            @include bp (lg) {
+                margin-top: 0;
+                margin-left: auto;
+                text-align: right;
+                padding-left: 16px;
+            }
+
+            // Icon
+            img {
+                display: inline-block;
+                margin-top: -5px;
+                margin-right: 12px;
+            }
+            // Separator
+            .sep {
+                display: inline-block;
+                margin: 0 4px;
+                line-height: 1;
+            }
+        }
+    }
+
+    // Index
+    &__index {
+        position: absolute;
+        z-index: 1;
+        left: 50%;
+        bottom: calc(92% + 1vw);
+        line-height: 1;
+        transform: translate3d(-50%, 0, 0);
+        color: rgba($color-tertiary, 0.4);
+
+        @include bp (md, max) {
+            font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
+        }
+        @include bp (md) {
+            top: 50%;
+            left: 95%;
+            width: 350px;
+            text-align: center;
+            bottom: auto;
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+
+    // Controls
+    &__controls {
+        display: none;
+
+        @include bp (md) {
+            position: absolute;
+            z-index: 20;
+            display: flex;
+            left: -28px;
+            right: -28px;
+            top: 50%;
+            transform: translateY(-50%);
+            justify-content: space-between;
+        }
+    }
+
+    // Image
+    .photo {
+        grid-column: 3 / span 16;
+
+        img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+}

src/style/style.scss

@@ -35,6 +35,7 @@
 // Atomic Design System
 // Atoms
 @import "atoms/button";
+@import "atoms/button-circle";
 @import "atoms/badge";
 @import "atoms/arrow";
 @import "atoms/discover";
@@ -59,7 +60,7 @@
 
 
 // Pages
-// @import "pages/page";
+@import "pages/viewer-photo";
 
 // Misc
 @import "animations";

static/images/icons/map-pin.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.51787 13.244C8.29206 13.6955 7.64287 13.6955 7.41707 13.244C7.41707 13.244 5.27191 9.01059 4.25578 7.03501C3.23965 5.05943 4.02998 2.49118 6.09046 1.44695C8.15094 0.402716 10.663 1.22117 11.6792 3.28141C12.3001 4.52321 12.2719 5.84967 11.6792 7.03501C11.0864 8.22036 8.51787 13.244 8.51787 13.244ZM9.95738 5.22877C9.95738 4.12809 9.08239 3.25319 7.98158 3.25319C6.88078 3.25319 6.00578 4.15631 6.00578 5.22877C6.00578 6.32945 6.88078 7.20435 7.98158 7.20435C9.08239 7.20435 9.95738 6.32945 9.95738 5.22877ZM6.50898 15.1335C6.51939 15.1526 6.53135 15.171 6.54476 15.1888L6.44888 16.5251L10.0169 17.6779V13.4566C10.3586 12.8149 10.7654 12.0515 11.1765 11.2816V17.6779L14.7445 16.5251L14.2539 9.68778L11.4829 10.7079C11.7389 10.2289 11.9905 9.75854 12.223 9.32507L14.5215 8.47535C14.8705 8.37166 15.1411 8.6724 15.178 9.03754L15.9127 16.3004C15.9636 16.8029 15.6579 17.2724 15.1805 17.425L10.5967 18.8903L5.84678 17.4195L0.740081 18.8903C0.561681 18.9301 0.360981 18.9102 0.204881 18.7909C0.0487812 18.6717 -0.0181187 18.5127 0.00418125 18.3338L1.14148 10.4232C1.18608 10.2244 1.31988 10.0654 1.52058 10.0058L3.65978 9.3043C3.81969 9.61333 3.9812 9.92989 4.14174 10.248L2.23418 10.8605L1.25298 17.6779L5.33388 16.5052L5.57503 13.1639C6.1283 14.315 6.50898 15.1335 6.50898 15.1335Z" fill="#FFE0C5"/>
+</svg>