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

Photo: Fix number positioning and parallax effect
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-03-25 12:28:47 +01:00
parent 8f73e3d56e
commit 7d8285ac6d
4 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -140,15 +140,31 @@
pointer-events: none;
user-select: none;
span {
display: block;
}
@include breakpoint (sm) {
font-size: pxVW(300);
left: 92%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
top: 0;
right: 8%;
transform: translate(0, -25%);
font-size: pxVW(300);
}
@include breakpoint (md) {
top: 50%;
right: 0;
bottom: auto;
transform: translate(26.5vw, -50%);
width: 50%;
text-align: center;
}
@include breakpoint (lg) {
transform: translate(28vw, -50%);
}
@include breakpoint (xxl) {
font-size: rem(300px);
transform: translate(70%, -50%);
}
}
}

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

@@ -54,7 +54,6 @@
position: relative;
z-index: 4;
margin-bottom: 88px;
overflow-x: hidden;
@include breakpoint (sm) {
margin-bottom: 120px;
@@ -67,6 +66,7 @@
}
/*
** List view
*/
@@ -79,9 +79,9 @@
// Photo
.photo {
@include breakpoint (sm) {
// Even photos
&:nth-child(even) {
// Even photos
&:nth-child(even) {
@include breakpoint (sm) {
// Location
.photo__location, h2 {
text-align: right;
@@ -96,11 +96,25 @@
right: 100%;
left: -30px;
}
&__number {
right: 77%;
left: auto;
text-align: right;
}
}
}
// Number
.photo__number {
@include breakpoint (sm) {
right: auto;
left: 8%;
}
@include breakpoint (md) {
right: auto;
left: 0;
transform: translate(-23vw, -50%);
}
@include breakpoint (lg) {
transform: translate(-26vw, -50%);
}
@include breakpoint (xl) {
transform: translate(-66%, -50%);
}
}
}
@@ -131,6 +145,7 @@
}
/*
** Grid view
*/
@@ -205,6 +220,7 @@
transform: none;
top: auto;
left: auto;
text-align: right;
}
&__date {
display: none;