diff --git a/src/components/molecules/House.svelte b/src/components/molecules/House.svelte index 25d0102..7843c69 100644 --- a/src/components/molecules/House.svelte +++ b/src/components/molecules/House.svelte @@ -39,9 +39,7 @@

-
+
{photoAlt}
- - {index} -
+ + {index} +
\ No newline at end of file diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte index 6a9d58b..185e0b5 100644 --- a/src/routes/[country]/[location]/index.svelte +++ b/src/routes/[country]/[location]/index.svelte @@ -267,7 +267,7 @@ {#if photos.length} -
+
{#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index} a { - display: block; - width: 100%; - height: 100%; - text-decoration: none; - cursor: zoom-in; - } - // Information &__info { --delay: 0.2s; @@ -26,7 +13,7 @@ max-width: min(540px, 85vw); } @include bp (sm) { - grid-column: 4 / span 14; + grid-column: 6 / span 14; margin-bottom: 56px; padding: 0; max-width: 800px; @@ -81,11 +68,23 @@ // Photo &__photo { position: relative; - display: block; - grid-column: 1 / span 17; + grid-column: span var(--columns); opacity: 0; transition: opacity 2s var(--ease-quart); + & > a { + grid-column: span var(--columns); + width: 100%; + height: 100%; + text-decoration: none; + cursor: zoom-in; + + @include bp (sm) { + grid-column: 3 / span 17; + grid-row: 1; + } + } + :global(figure) { position: relative; z-index: 5; @@ -143,7 +142,7 @@ a:hover { :global(img) { opacity: 0.7; - transform: scale3d(1.03, 1.03, 1.03) !important; + transform: scale3d(1.03, 1.03, 1.03); transition-duration: 1.2s; } } @@ -156,28 +155,44 @@ z-index: 1; bottom: -64px; right: 20px; + display: block; text-align: right; pointer-events: none; user-select: none; @include bp (sm) { - left: 112.5%; - width: 400px; - top: 50%; + position: relative; + grid-column: 19 / span 6; + grid-row: 1; + white-space: nowrap; bottom: auto; + right: auto; + align-self: center; + background: none; text-align: left; - transform: translate3d(-50%, -50%, 0); + } + + // Specific cases + &.has-one-start { + @include bp (sm) { + transform: translate3d(15%, 0, 0); + } } } // Even photos &:nth-child(even) { .house { + // Photo &__photo { - @include bp (sm) { - grid-column-start: 4; + & > a { + @include bp (sm) { + grid-column: 6 / span 17; + grid-row: 1; + } } } + // Info &__info { @include bp (sm) { margin-left: auto; @@ -185,14 +200,17 @@ } } &__index { - left: auto; - right: 20px; - @include bp (sm) { - right: auto; - left: -12%; + grid-column-start: 1; text-align: right; } + + // Specific cases + &.has-one-start { + @include bp (sm) { + transform: translate3d(-8%, 0, 0); + } + } } } }