Rework Location page photos ratio and hover

Defines if the photo is under 3/2 by calculating ratio from width and height

src/components/molecules/House.svelte

@@ -9,7 +9,7 @@
     export let photoAlt: string
     export let title: string
     export let index: string
-    export let orientation: string = undefined
+    export let ratio: number
     export let date: string = undefined
     export let city: string = undefined
 </script>
@@ -31,25 +31,27 @@
         </p>
     </div>
 
-    <figure class="house__photo"
-        class:not-landscape={orientation && orientation !== 'landscape'}
+    <div class="house__photo"
+        class:not-landscape={ratio < 1.475}
     >
         <a href={url} sveltekit:noscroll tabindex="0">
-            <Image
-                id={photoId}
-                sizeKey="photo-list"
-                sizes={{
-                    small: { width: 500 },
-                    medium: { width: 850 },
-                    large: { width: 1280 },
-                }}
-                ratio={1.5}
-                alt={photoAlt}
-                class="photo shadow-photo"
-            />
+            <figure class="house__image shadow-photo">
+                <Image
+                    id={photoId}
+                    sizeKey="photo-list"
+                    sizes={{
+                        small: { width: 500 },
+                        medium: { width: 850 },
+                        large: { width: 1280 },
+                    }}
+                    ratio={1.5}
+                    alt={photoAlt}
+                    class="photo"
+                />
+            </figure>
             <span class="house__index title-index">
                 {index}
             </span>
         </a>
-    </figure>
+    </div>
 </div>

src/routes/[country]/[location]/[photo].ts

@@ -54,7 +54,6 @@ export async function get({ params }: RequestEvent): Promise<RequestHandlerOutpu
                         id
                         title
                     }
-                    orientation
                     city
                 }
 

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

@@ -264,14 +264,14 @@
 
     {#if photos.length}
         <section class="location-page__houses grid" bind:this={photosListEl}>
-            {#each photos as { title, image: { id, title: alt }, orientation, slug, city, date_taken }, index}
+            {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index}
                 <House
                     {title}
                     photoId={id}
                     photoAlt={alt}
-                    {orientation}
                     url="/{params.country}/{params.location}/{slug}"
                     {city}
+                    ratio={width / height}
                     date={date_taken}
                     index={(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
                 />

src/routes/[country]/[location]/index.ts

@@ -8,8 +8,8 @@ export const photoFields = `
     image {
         id
         title
+        width, height
     }
-    orientation
     date_taken
     date_created
 `

src/style/molecules/_house.scss

@@ -77,14 +77,30 @@
         opacity: 0;
         transition: opacity 2s var(--ease-quart);
 
-        picture {
+        figure {
             position: relative;
-            z-index: 3;
+            z-index: 5;
+            display: flex;
+            justify-content: center;
+            height: 100%;
+            aspect-ratio: 3 / 2;
+            overflow: hidden;
             border-radius: 0;
 
             @include bp (sm) {
                 border-radius: 8px;
             }
+
+            @supports not (aspect-ratio: auto) {
+                position: relative;
+                overflow: hidden;
+                padding-top: 66.66%;
+                height: 0;
+            }
+        }
+        picture {
+            height: 100%;
+            border-radius: 0;
         }
         img {
             display: block;
@@ -94,45 +110,30 @@
             transform: scale3d(1.125, 1.125, 1.125);
             transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart);
             will-change: transform;
+
+            @supports not (aspect-ratio: auto) {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                width: auto;
+                max-width: 100%;
+                height: auto;
+                transform: translate(-50%, -50%);
+            }
         }
 
         // Variant: Not landscape
         &.not-landscape {
-            aspect-ratio: 3 / 2;
-
-            @supports not (aspect-ratio: auto) {
-                position: relative;
-                overflow: hidden;
-                padding-top: 66.66%;
-                height: 0;
-            }
-
-            picture {
-                height: 100%;
+            figure {
                 background: $color-cream;
             }
-            img {
-                height: 100%;
-                width: 100%;
-                object-fit: contain;
-
-                @supports not (aspect-ratio: auto) {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    width: auto;
-                    max-width: 100%;
-                    height: auto;
-                    transform: translate(-50%, -50%);
-                }
-            }
         }
 
         // Scale down image on hover
         @media (hover: hover) {
             a:hover {
                 img {
-                    opacity: 0.8;
+                    opacity: 0.7;
                     transform: scale3d(1.03, 1.03, 1.03) !important;
                     transition-duration: 1.2s;
                 }
@@ -140,26 +141,6 @@
         }
     }
 
-    // Visible state
-    &.is-visible {
-        .house__info {
-            h2 {
-                opacity: 1;
-                transform: translate3d(0,0,0);
-            }
-            .info {
-                opacity: 1;
-            }
-        }
-        .house__photo {
-            opacity: 1;
-
-            img {
-                transform: scale3d(1,1,1);
-            }
-        }
-    }
-
     // Photo number
     &__index {
         position: absolute;
@@ -206,4 +187,24 @@
             }
         }
     }
+
+    // Visible state
+    &.is-visible {
+        .house__info {
+            h2 {
+                opacity: 1;
+                transform: translate3d(0,0,0);
+            }
+            .info {
+                opacity: 1;
+            }
+        }
+        .house__photo {
+            opacity: 1;
+
+            img {
+                transform: scale3d(1,1,1);
+            }
+        }
+    }
 }