✨ Define small PostCard from photo index

src/routes/photos.svelte

@@ -75,6 +75,25 @@
     }
 
 
+    /**
+     * Define small photo size from index
+     * With different grid patterns depending on window width
+     */
+    $: isSmall = (index: number) => {
+        let modulo = index % 5
+        let notOn = [0]
+
+        // Change pattern on small desktop
+        if (innerWidth >= 768 && innerWidth < 1200) {
+            modulo = index % 11
+            notOn = [0, 7, 10]
+        } else if (innerWidth >= 1200) {
+            // Disable on larger desktop
+            return false
+        }
+        return !notOn.includes(modulo)
+    }
+
 
     /**
      * Select change events
@@ -262,8 +281,8 @@
         <div class="grid container">
             {#if photos.length}
                 <div class="photos__grid">
-                    {#each photos as { image, slug, location, title }}
+                    {#each photos as { image, slug, location, title }, index}
-                        <div class="photo shadow-photo">
+                        <figure class="photo shadow-photo">
                             <a href="/{location.country.slug}/{location.slug}/{slug}">
                                 <Image
                                     id={image.id}
@@ -276,15 +295,18 @@
                                     ratio={1.5}
                                     alt={image.title}
                                 />
+                            </a>
+                            <figcaption>
                                 <PostCard
                                     street={title}
                                     location={location.name}
                                     region={location.region}
                                     country={location.country.name}
                                     flagId={location.country.flag.id}
+                                    size={isSmall(index) ? 'small' : null}
                                 />
-                            </a>
+                            </figcaption>
-                        </div>
+                        </figure>
                     {/each}
                 </div>
 

src/style/modules/_postcard.scss

@@ -113,13 +113,11 @@
     */
     // Small size
     &--small {
-        opacity: 1 !important;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border-radius: 0;
-        transform: none !important;
         max-width: 100%;
         max-height: 100%;
         grid-template: 1fr 2fr / 1fr;

src/style/pages/_photos.scss

@@ -204,30 +204,40 @@
         background-color: $color-tertiary;
 
         @include bp (sm) {
+            padding: clamp(40px, 5vw, 64px) 24px;
+        }
+        @include bp (md) {
             margin: 0 30px;
-            padding: clamp(40px, 5vw, 64px) 0;
+            padding-left: 0;
+            padding-right: 0;
         }
 
         &:before, &:after {
-            content: "";
+            @include bp (md) {
-            display: block;
+                content: "";
-            position: absolute;
+                display: block;
-            z-index: -1;
+                position: absolute;
-            top: 0;
+                z-index: -1;
-            width: 25%;
+                top: 0;
-            height: 100%;
+                width: 25%;
-            background: $color-tertiary;
+                height: 100%;
-            transition: transform 0.8s var(--ease-quart);
+                background: $color-tertiary;
+                transition: transform 0.8s var(--ease-quart);
+            }
         }
         &:before {
-            border-radius: var(--corners) 0 0 var(--corners);
+            @include bp (md) {
-            left: 0;
+                border-radius: var(--corners) 0 0 var(--corners);
-            transform: translate3d(calc(-1 * var(--margin-sides)), 0, 0);
+                left: 0;
+                transform: translate3d(calc(-1 * var(--margin-sides)), 0, 0);
+            }
         }
         &:after {
-            border-radius: 0 var(--corners) var(--corners) 0;
+            @include bp (md) {
-            right: 0;
+                border-radius: 0 var(--corners) var(--corners) 0;
-            transform: translate3d(var(--margin-sides), 0, 0);
+                right: 0;
+                transform: translate3d(var(--margin-sides), 0, 0);
+            }
         }
     }
 
@@ -254,6 +264,20 @@
 
         // Photo
         .photo {
+            position: relative;
+
+            a {
+                display: block;
+            }
+            figcaption {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+            }
+
             /**
              * Photo sizes
              */
@@ -330,7 +354,8 @@
                 transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart);
 
                 &--small {
-                    border-radius: 0;
+                    border-radius: 6px 6px 0 0;
+                    transform: translate3d(8%, 12%, 0) rotate(-3deg);
                 }
             }
 
@@ -338,7 +363,11 @@
             &:hover {
                 .postcard {
                     opacity: 1;
-                    transform: translate3d(3%,3%,0) rotate(2deg);
+                    transform: translate3d(3%, 3%, 0) rotate(2deg);
+
+                    &--small {
+                        transform: translate3d(0,0,0);
+                    }
                 }
             }
         }