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

Photos styling fixes

Browse Source
This commit is contained in:
Félix Péault
2020-02-20 19:02:40 +01:00
parent 1e1b2fc1fb
commit 52e65ed8df
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/style/molecules/_photo.scss
View File

@@ -6,12 +6,12 @@
&__location {
margin-bottom: 32px;
@media (max-width: $screen-md) {
padding: 0;
}
@include breakpoint (sm) {
margin-bottom: 56px;
}
@include breakpoint (xs) {
padding: 0;
}
h2 {
text-align: left;
@@ -57,6 +57,7 @@
display: block;
width: 100%;
border-radius: 0;
background-color: #fff;
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
user-select: none;
@@ -95,7 +96,7 @@
// Hover
&:hover {
cursor: url(#{$dir-img}/icons/zoom.svg) 0 0, pointer;
cursor: url(#{$dir-img}/icons/zoom.svg) 6 8, pointer;
.photo__image--img:after {
opacity: 0.6;

21
src/style/organisms/_photos.scss
View File

@@ -31,11 +31,8 @@
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 16px;
height: 100%;
}
@include breakpoint (xl) {
top: 32px;
height: 100%;
}
}
@@ -56,7 +53,9 @@
.photo {
position: relative;
z-index: 4;
margin-bottom: 104px;
margin-bottom: 88px;
// transition: transform 1000ms $ease-quart, opacity 1000ms $ease-quart;
// will-change: transform, opacity;
@include breakpoint (sm) {
margin-bottom: 120px;
@@ -66,6 +65,12 @@
&:last-child {
margin-bottom: 0;
}
// Hidden photo
// &.hidden {
// opacity: 0;
// translate: translate(0, 10%) scale(0.92);
// }
}
@@ -108,8 +113,10 @@
// Number
&__image--number {
transform: translate(-50%, var(--translate));
will-change: transform;
@include breakpoint (sm) {
transform: translate(-50%, var(--translate));
will-change: transform;
}
}
}