Code optimization and fixes

src/atoms/ToggleLayout.svelte

@@ -35,12 +35,12 @@
                 case 'grid':
                     grid.classList.add(layoutGridClass)
                     grid.classList.remove(layoutListClass)
-                    break;
+                    break
                 case 'list':
                     grid.classList.add(layoutListClass)
                     grid.classList.remove(layoutGridClass)
-                    break;
+                    break
-                default: break;
+                default: break
             }
 
             // Animate the active pill

src/molecules/Location.svelte

@@ -2,11 +2,13 @@
     export let name
     export let slug
     export let country
+
+    const src = country.flag.full_url
 </script>
 
 <div class="location" data-groups='["{country.continent.id}"]'>
     <a href="/location/{country.slug}/{slug}">
-        <img src={country.flag.full_url} alt={'Flag of ' + country.name} />
+        <img {src} alt={'Flag of ' + country.name} />
         <h3 class="location__city">{name}</h3>
         <p class="location__country style-caps">{country.name}</p>
     </a>

src/organisms/Carousel.svelte

@@ -23,12 +23,17 @@
             const button = event.currentTarget.querySelector('button')
             const photoActive = document.querySelector('.gallery .active')
             const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
-            if (event.type === 'mouseenter') {
+
-                photoToHover.classList.add('hover')
+            switch (event.type) {
-                button.focus()
+                case 'mouseenter':
-            } else {
+                    photoToHover.classList.add('hover')
-                photoToHover.classList.remove('hover')
+                    button.focus()
-                button.blur()
+                    break
+                case 'mouseleave':
+                    photoToHover.classList.remove('hover')
+                    button.blur()
+                    break
+                default: break
             }
         }
 
@@ -87,13 +92,10 @@
 
         <div class="carousel__information">
             <div class="carousel__information--location style-location">
-                <!-- <p class="street">{photos[0].name}</p>
+                <p class="street">Street Name, Suburb</p>
-                <p class="style-caps state">{photos[0].location.region}, {photos[0].location.country.name}</p> -->
+                <p class="style-caps state">Region, Country</p>
             </div>
-            <!-- <div class="carousel__information--location style-location" aria-hidden="true">
+            <!-- Duplicate for animation? -->
-                <p class="street">{photos[1].name}</p>
-                <p class="style-caps state">{photos[1].location.region}, {photos[1].location.country.name}</p>
-            </div> -->
             {#if viewer}
             <p class="carousel__information--date">Apr 6th, 2019</p>
             {/if}

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

@@ -90,7 +90,7 @@
 			<div class="wrapper">
 				<p>{$site.description}</p>
 				<p>
-					Houses on:eventname
+					Houses Of
 					<LinkChange href="/choose" text={location.name}>
 						<IconGlobeSmall width="14" color="#999" />
 					</LinkChange>

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

@@ -79,12 +79,18 @@
 	const keyboardNav = event => {
 		const keyCode = event.keyCode
 
-		// Previous
+		switch (event.keyCode) {
-		if ([37,80].includes(keyCode)) document.getElementById('photo_prev').click()
+			case 37: case 80: case 74:
-		// Next
+				document.querySelector('.carousel__controls--area.prev').click()
-		else if ([39,78,32].includes(keyCode)) document.getElementById('photo_next').click()
+				break
-		// Close
+			case 39: case 78: case 75:
-		else if ([27,67].includes(keyCode)) document.getElementById('photo_close').click()
+				document.querySelector('.carousel__controls--area.next').click()
+				break
+			case 27: case 67:
+				document.getElementById('photo_close').click()
+				break
+			default: break
+		}
 	}
 
 

src/style/_base.scss

@@ -2,6 +2,7 @@ html {
     font: #{$base-font-size} $font-sans;
     color: $color-text;
     scroll-behavior: smooth;
+    min-width: 320px;
 
     @media screen and (prefers-reduced-motion: reduce) {
 		scroll-behavior: auto;

src/style/molecules/_footer.scss

@@ -23,7 +23,7 @@
     &__left {
         display: flex;
         justify-content: center;
-        margin-bottom: 32px;
+        margin-bottom: 40px;
 
         @include breakpoint (sm) {
             margin: 0;
@@ -41,7 +41,7 @@
 
         // Instagram
         .instagram {
-            margin-bottom: 20px;
+            margin-bottom: 32px;
 
             @include breakpoint (sm) {
                 margin: 0 40px 0 0;
@@ -72,7 +72,7 @@
 
             img {
                 display: inline-block;
-                margin: 12px 0 0 12px;
+                margin: 8px 0 0 12px;
 
                 @include breakpoint (sm) {
                     margin-left: 16px;

src/style/organisms/_carousel.scss

@@ -33,10 +33,11 @@
 
             // Photo
             &--photo {
-                position: absolute;
-                background-color: $color-primary;
                 overflow: hidden;
-                box-shadow: 0 16px 56px rgba(#2E025C, 0.7);
+                position: absolute;
+                display: block;
+                background-color: $color-primary;
+                box-shadow: 0 15px 60px rgba(#000, 0.3);
                 transition: transform 600ms $ease-quart;
 
                 @include breakpoint (sm) {
@@ -47,7 +48,7 @@
                     display: block;
                     height: auto;
                     width: 100%;
-                    opacity: 0.55;
+                    opacity: 0.6;
                     transition: opacity 600ms $ease-quart;
                 }
 

src/style/organisms/_photos.scss

@@ -143,8 +143,11 @@
         .photo {
             display: flex;
             flex-direction: column-reverse;
-            margin-bottom: 72px;
+            margin-bottom: 40px;
 
+            @include breakpoint (m) {
+                margin-bottom: pxVW(176);
+            }
             @include breakpoint (md) {
                 margin-bottom: 0;
             }

src/style/pages/_homepage.scss

@@ -50,9 +50,10 @@
 
         // Gallery
         .gallery {
-            &__images--photo {
+            &__images {
-                background-color: $color-secondary;
+                &--photo {
-                box-shadow: 0 15px 60px rgba(#000, 0.3);
+                    background-color: $color-secondary;
+                }
             }
         }
     }

src/style/pages/_viewer.scss

@@ -79,6 +79,13 @@
         .gallery {
             left: 0;
             right: 0;
+
+            // Specific box shadow for images
+            &__images {
+                &--photo {
+                    box-shadow: 0 16px pxVW(40) rgba(#2E025C, 0.4);
+                }
+            }
         }
 
         // Information

src/style/tools/_helpers.scss

@@ -24,17 +24,17 @@
 .wrap {
     max-width: 1648px;
     margin: 0 auto;
-    padding: 0 24px;
+    padding: 0 16px;
 
+    @include breakpoint (m) {
+        padding: 0 24px;
+    }
     @include breakpoint (sm) {
         padding: 0 60px;
     }
     @include breakpoint (md) {
         padding: 0 128px;
     }
-    @include breakpoint (xxl) {
-        // padding: 0 48px;
-    }
 }
 
 // Wrapper (inside and more spaced)