Photos styling fixes
This commit is contained in:
@@ -6,12 +6,12 @@
|
|||||||
&__location {
|
&__location {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
@media (max-width: $screen-md) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
@include breakpoint (sm) {
|
@include breakpoint (sm) {
|
||||||
margin-bottom: 56px;
|
margin-bottom: 56px;
|
||||||
}
|
}
|
||||||
@include breakpoint (xs) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@@ -57,6 +57,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
background-color: #fff;
|
||||||
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
|
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
@@ -95,7 +96,7 @@
|
|||||||
|
|
||||||
// Hover
|
// Hover
|
||||||
&: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 {
|
.photo__image--img:after {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
|||||||
@@ -31,11 +31,8 @@
|
|||||||
@include breakpoint (md) {
|
@include breakpoint (md) {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
top: 16px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
@include breakpoint (xl) {
|
|
||||||
top: 32px;
|
top: 32px;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -56,7 +53,9 @@
|
|||||||
.photo {
|
.photo {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 4;
|
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) {
|
@include breakpoint (sm) {
|
||||||
margin-bottom: 120px;
|
margin-bottom: 120px;
|
||||||
@@ -66,6 +65,12 @@
|
|||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Hidden photo
|
||||||
|
// &.hidden {
|
||||||
|
// opacity: 0;
|
||||||
|
// translate: translate(0, 10%) scale(0.92);
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -108,10 +113,12 @@
|
|||||||
|
|
||||||
// Number
|
// Number
|
||||||
&__image--number {
|
&__image--number {
|
||||||
|
@include breakpoint (sm) {
|
||||||
transform: translate(-50%, var(--translate));
|
transform: translate(-50%, var(--translate));
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Pagination
|
// Pagination
|
||||||
.pagination {
|
.pagination {
|
||||||
|
|||||||
Reference in New Issue
Block a user