Add Fullscreen in viewer, Track links with Google Analytics, Use .env file

- Fullscreen is a component that watches a store value set by the Carousel component on a picture click
- Use a .env file for API and website related settings and informations
- Google Analytics is now in place, tracking each routes link and viewer photo change

src/style/atoms/_button-control.scss

@@ -68,6 +68,15 @@
     }
 
 
+    /*
+    ** Effects
+    */
+    &--shadow {
+        box-shadow: 0 0 10px rgba(#000, 0.4);
+    }
+
+
+
     /*
     ** Directions
     */

src/style/organisms/_fullscreen.scss

@@ -0,0 +1,83 @@
+.fullscreen {
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+
+    // Photo
+    &__image {
+        width: 100%;
+        height: 100%;
+        overflow-x: auto;
+        opacity: 0;
+        transform: scale(1.1);
+        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
+        will-change: transform, opacity;
+
+        img {
+            position: relative;
+            z-index: 200;
+            display: block;
+            height: 100%;
+            width: auto;
+        }
+
+        // Open
+        &.is-open {
+            opacity: 1;
+            transform: scale(1);
+            pointer-events: auto;
+        }
+    }
+
+    // Controls
+    &__close {
+        position: fixed;
+        z-index: 201;
+        bottom: 24px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        opacity: 0;
+        transform: scale(1.1) translateY(24px);
+        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
+        will-change: transform, opacity;
+
+        // Visible state
+        &.is-visible {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+
+    // Loading
+    &__loading {
+        position: absolute;
+        z-index: 202;
+        top: 50%;
+        left: 50%;
+        opacity: 1;
+        transform: translate(-50%, -50%);
+        transform-origin: 50% 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 80px;
+        background-color: $color-primary;
+        border-radius: 100%;
+        transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
+        will-change: transform, opacity;
+
+        // Hidden state
+        &.is-hidden {
+            transform: scale(1.05) translate(-50%, -50%);
+            opacity: 0;
+        }
+    }
+}

src/style/pages/_viewer.scss

@@ -44,17 +44,17 @@
                 display: none;
             }
         }
+    }
 
-        // Buttons
-        .buttons {
-            display: flex;
+    // Buttons
+    &__buttons {
+        display: flex;
 
-            a {
-                margin-left: 16px;
+        a {
+            margin-left: 16px;
 
-                &:first-child {
-                    margin-left: 0;
-                }
+            &:first-child {
+                margin-left: 0;
             }
         }
     }
@@ -86,10 +86,8 @@
             right: 0;
 
             // Specific box shadow for images
-            &__images {
-                &--photo {
-                    box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
-                }
+            &__photo {
+                box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
             }
         }
 

src/style/style.scss

@@ -31,6 +31,7 @@
 // Organisms
 @import "organisms/carousel";
 @import "organisms/photos";
+@import "organisms/fullscreen";
 @import "organisms/locations";
 @import "organisms/pagination";
 @import "organisms/footer";