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 @@
-
\ 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);
+ }
+ }
}
}
}