Merge branch 'v2' into v2-shop

# Conflicts:
#	src/components/molecules/PosterCart.svelte
#	src/routes/shop/__layout.svelte
#	src/style/atoms/_button-circle.scss
#	src/style/organisms/_cart.scss
#	src/style/pages/_shop.scss
#	src/style/style.scss

src/components/molecules/NotificationCart.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+
+    const { locations, shop } = getContext('global')
+
+</script>
+
+<aside class="notification-cart shadow-small">
+    <div class="notification-cart__left">
+        <img src="/images/issue-1.jpg" width={58} height={88} alt="">
+    </div>
+    <div class="notification-cart__right">
+        <h3>Added to cart</h3>
+        <p>Houses Of Melbourne</p>
+    </div>
+</aside>

src/routes/shop/__layout.svelte

@@ -7,6 +7,7 @@
     import ButtonCart from '$components/atoms/ButtonCart.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import Poster from '$components/molecules/Poster.svelte'
+    import NotificationCart from '$components/molecules/NotificationCart.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
     import Cart from '$components/organisms/Cart.svelte'
 
@@ -102,6 +103,10 @@
         </dl>
 
         <ButtonCart />
+
+        <div class="shop-location__notifications">
+            <NotificationCart />
+        </div>
     </nav>
 
     <section class="shop-page__about grid">

src/style/atoms/_button-circle.scss

@@ -68,6 +68,18 @@
     /*
     ** Variants
     */
+    // Tiny size
+    &--tiny {
+        height: 24px;
+        width: 24px;
+
+        img, svg {
+            width: 8px;
+            height: 8px;
+            object-fit: contain;
+        }
+    }
+
     // Small size
     &--small {
         height: 32px;
@@ -97,4 +109,13 @@
             background-color: $color-lightpurple;
         }
     }
+
+    // Gray color
+    &--gray {
+        background-color: #F2F2F2;
+
+        &:hover {
+            background-color: #D2D2D2;
+        }
+    }
 }

src/style/molecules/_notification-cart.scss

@@ -0,0 +1,60 @@
+.notification-cart {
+    display: flex;
+    background-color: #fff;
+    color: $color-gray;
+    border-radius: 6px;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+
+    // Left Image
+    &__left {
+        margin-right: 20px;
+        width: 100px;
+        height: 150px;
+
+        @include bp (sm) {
+            margin-right: 24px;
+            width: 58px;
+            height: 88px;
+        }
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    // Details
+    &__right {
+        display: flex;
+        flex-direction: column;
+        margin-right: 24px;
+        justify-content: center;
+
+        // Poster Title
+        h3 {
+            font-family: $font-serif;
+            color: $color-secondary;
+            font-size: rem(20px);
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+        }
+        // Text
+        p {
+            font-size: rem(12px);
+            line-height: 1.4;
+            max-width: 124px;
+            margin: 4px 0;
+
+            @include bp (sm) {
+                font-size: rem(13px);
+                max-width: none;
+            }
+        }
+    }
+}

src/style/organisms/_cart.scss

@@ -6,7 +6,7 @@
     padding: 20px 20px 24px;
 
     @include bp (sm) {
-        padding: 24px 32px 0 32px;
+        padding: 24px 32px;
     }
 
     // Heading

src/style/pages/_shop.scss

@@ -3,7 +3,8 @@
 
     // Cart
     .cart {
-        display: flex;
+        // display: flex;
+        // display: none;
         position: fixed;
         z-index: 100;
         top: 72px;
@@ -14,7 +15,7 @@
         @include bp (sm) {
             top: 24px;
             right: 24px;
-            width: clamp(320px, 35vw, 500px);
+            width: clamp(320px, 45vw, 500px);
             height: calc(100vh - 48px);
             max-height: 1000px;
         }
@@ -85,6 +86,20 @@
                 }
             }
         }
+
+        // Notifications
+        &__notifications {
+            position: absolute;
+            z-index: 100;
+            top: 72px;
+            right: 0;
+
+            & > * {
+                &:not(:last-child) {
+                    margin-bottom: 8px;
+                }
+            }
+        }
     }
 
     // Intro
@@ -275,7 +290,7 @@
     // Posters
     &__posters {
         background-color: $color-primary-darker;
-        padding: 56px 20px 72px;
+        padding: 0 20px 72px;
         border-bottom: solid 1px $color-primary-tertiary20 ;
 
         @include bp (sm) {

src/style/style.scss

@@ -53,6 +53,7 @@
 @import "molecules/issue";
 @import "molecules/newsletter-form";
 @import "molecules/poster";
+@import "molecules/notification-cart";
 @import "molecules/cart-item";
 
 // Organisms