From 9c36b2dbf670b40931710b2084a2eb22ec5890fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 5 Oct 2021 21:05:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Create=20Photos=20grid=20for=20m?=
 =?UTF-8?q?obile=20and=20desktop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/PostCard.svelte |   2 +-
 src/style/pages/_photos.scss             | 130 +++++++++++++++++++----
 2 files changed, 109 insertions(+), 23 deletions(-)

diff --git a/src/components/molecules/PostCard.svelte b/src/components/molecules/PostCard.svelte
index d1c6db5..94af05c 100644
--- a/src/components/molecules/PostCard.svelte
+++ b/src/components/molecules/PostCard.svelte
@@ -9,7 +9,7 @@
             <div class="frame">
                 <img src="/images/icons/stamp.svg" width="32" height="42" alt="">
             </div>
-            <Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} />
+            <Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} alt="country" />
         </div>
         <h3 class="post-card__country">
             <span>Houses of <br></span>
diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index 908fb9c..897753e 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -80,9 +80,10 @@
                     margin: 0 2px;
                 }
             }
-            img {
-                color: #fff;
+            .icon {
+                fill: #fff;
                 margin-right: 12px;
+                transition: fill 0.2s;
 
                 @include bp (sm) {
                     margin-right: 16px;
@@ -107,8 +108,14 @@
                     height: 100%;
                     cursor: pointer;
                 }
+            }
 
-                &:hover {
+            // Hover
+            li:hover {
+                .icon {
+                    fill: $color-secondary-light;
+                }
+                .select {
                     background-color: $color-primary-tertiary20;
                 }
             }
@@ -142,6 +149,10 @@
 
             // Reset link
             .reset {
+                padding: 0;
+                color: rgba($color-tertiary, 0.6);
+                font-weight: 900;
+                font-size: rem(14px);
                 transition: color 0.3s;
 
                 &:hover {
@@ -166,18 +177,38 @@
     // Content Block
     &__content {
         background-color: $color-tertiary;
-        width: 100%;
         // margin: 0 12px;
-        padding: 64px 0;
+        padding: 20px 0;
+        border-radius: 6px;
+
+        @include bp (sm) {
+            padding: 64px 0;
+            border-radius: 8px;
+        }
     }
 
     // Photo Grid
     &__grid {
-        grid-column: 2 / span 22;
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-gap: 40px;
+        grid-column: span var(--columns);
+        // Template: 2 / 1-1
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 16px;
 
+        @include bp (mob-lg) {
+            grid-gap: 20px;
+        }
+        @include bp (sm) {
+            // Swich to template: 2-1-1 / 1-1-2 / 4
+            grid-column: 2 / span 22;
+            grid-template-columns: repeat(4, 1fr);
+            grid-gap: 24px;
+        }
+        @include bp (sd) {
+            grid-gap: 40px;
+        }
+
+        // Photo
         .photo {
             overflow: hidden;
             border-radius: 6px;
@@ -188,7 +219,6 @@
                 height: 100%;
 
                 & > picture {
-                    width: 100%;
                     height: 100%;
 
                     img {
@@ -196,25 +226,81 @@
                         width: 100%;
                         height: 100%;
                         object-fit: cover;
+                        pointer-events: none;
+                        user-select: none;
                     }
                 }
             }
 
+            /**
+             * Photo sizes
+             */
+            // MOBILE
+            // 1st photo = 2 columns
+            &:nth-child(5n + 1) {
+                @include bp (sm, max) {
+                    grid-column: span 2;
+                    grid-row: span 2;
+                    margin-bottom: 8px;
+                }
+            }
+            // 4 next photos = 1 column each
+            &:nth-child(5n + 4),
+            &:nth-child(5n + 5) {
+                @include bp (sm, max) {
+                    margin-bottom: 8px;
+                }
+            }
+
+
+            // DESKTOP
+            // 1st photo = left 2 columns, 2 rows
+            &:nth-child(11n + 1){
+                @include bp (sm) {
+                    grid-column: span 2;
+                    grid-row: span 2;
+                }
+            }
+            // 8th photo = right 2 columns, 2 rows
+            &:nth-child(11n + 8){
+                @include bp (sm) {
+                    grid-column: 3 / span 2;
+                    grid-row: span 2;
+                }
+            }
+            // 11th photo = 4 columns
+            &:nth-child(11n){
+                @include bp (sm) {
+                    grid-column: span 4;
+                }
+            }
+            // Additional spacing between grid patterns
+            &:nth-child(11n + 11){
+                @include bp (sm) {
+                    margin-top: 12px;
+                }
+                @include bp (sd) {
+                    margin-top: 16px;
+                }
+            }
+            &:nth-child(11n),
+            &:nth-child(11n + 1),
+            &:nth-child(11n + 4),
+            &:nth-child(11n + 5){
+                @include bp (sm) {
+                    margin-bottom: 12px;
+                }
+                @include bp (sd) {
+                    margin-bottom: 16px;
+                }
+            }
+
+            // Postcard
             .post-card {
                 position: absolute;
                 bottom: 0;
                 right: 0;
-            }
-
-            // Photo sizes
-            &:nth-child(11n+1) {
-                grid-column: 1 / span 2;
-            }
-            &:nth-child(11n+8) {
-                grid-column: 3 / span 2;
-            }
-            &:nth-child(11n) {
-                grid-column: 1 / span 4;
+                display: none;
             }
         }
     }
@@ -223,7 +309,7 @@
      * Controls
      */
     .controls {
-        grid-column: 1 / span var(--columns);
+        grid-column: span var(--columns);
         display: grid;
         margin: 48px auto;
         align-items: center;
@@ -293,7 +379,7 @@
 
     // Modules
     .grid-modules {
-        grid-column: 1 / span var(--columns);
+        grid-column: span var(--columns);
         margin-bottom: 0;
 
         @include bp (sm) {