flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adapt a little bit Location's page houses styling

Browse Source
This commit is contained in:
Félix Péault
2021-11-21 16:51:03 +01:00
parent 8d487e0ef7
commit 77bd85b408
2 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/style/organisms/_house.scss
View File

@@ -37,7 +37,7 @@
} }
.info { .info {
display: block; display: block;
margin-top: 16px; margin-top: 12px;
color: $color-lightgray; color: $color-lightgray;
line-height: 1.5; line-height: 1.5;
opacity: 0; opacity: 0;
@@ -45,6 +45,9 @@
transition-delay: var(--delay); transition-delay: var(--delay);
@include bp (sm) { @include bp (sm) {
margin-top: 16px;
}
@include bp (md) {
margin-top: 24px; margin-top: 24px;
} }
@@ -71,18 +74,19 @@
opacity: 0; opacity: 0;
transition: opacity 2s var(--ease-quart); transition: opacity 2s var(--ease-quart);
@include bp (sm) {
border-radius: 8px;
}
picture { picture {
position: relative; position: relative;
z-index: 3; z-index: 3;
border-radius: 0;
@include bp (md) {
border-radius: 8px;
}
} }
img { img {
display: block; display: block;
width: calc(100% + 1px); width: calc(100% + 2px);
height: calc(100% + 1px); height: calc(100% + 2px);
object-fit: cover; object-fit: cover;
transform: scale3d(1.125, 1.125, 1.125); transform: scale3d(1.125, 1.125, 1.125);
transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart); transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart);
@@ -90,6 +94,7 @@
} }
// Scale down image on hover // Scale down image on hover
@media (hover: hover) {
a:hover { a:hover {
img { img {
opacity: 0.6; opacity: 0.6;
@@ -98,6 +103,7 @@
} }
} }
} }
}
// Visible state // Visible state
&.is-visible { &.is-visible {

12
src/style/pages/_location.scss
View File

@@ -3,7 +3,7 @@
background: #fff; background: #fff;
// Intro // Intro
.location-page__intro { &__intro {
position: relative; position: relative;
background: $color-primary; background: $color-primary;
@@ -71,6 +71,11 @@
.city { .city {
text-align: center; text-align: center;
margin-left: auto; margin-left: auto;
@include bp (md) {
margin-right: auto;
padding-left: min(400px, 16vw);
}
} }
} }
} }
@@ -187,9 +192,12 @@
// House // House
.house { .house {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 86px; margin-bottom: 72px;
@include bp (sm) { @include bp (sm) {
margin-bottom: 88px;
}
@include bp (md) {
margin-bottom: 120px; margin-bottom: 120px;
} }
} }