Isolate Homepage collage component and add hover effect on other photos
This commit is contained in:
@@ -20,6 +20,7 @@
|
||||
width: calc(100% + 2px);
|
||||
height: calc(100% + 2px);
|
||||
object-fit: cover;
|
||||
transition: opacity 0.7s var(--ease-quart);
|
||||
}
|
||||
|
||||
// Informations
|
||||
@@ -66,7 +67,7 @@
|
||||
& > * {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 8px, 0);
|
||||
transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart);
|
||||
transition: opacity 0.7s var(--ease-quart), transform 0.8s var(--ease-quart);
|
||||
|
||||
@include bp (md) {
|
||||
transform: translate3d(0, 8px, 0);
|
||||
|
||||
200
src/style/organisms/_collage.scss
Normal file
200
src/style/organisms/_collage.scss
Normal file
@@ -0,0 +1,200 @@
|
||||
.collage {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(16, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
margin: 0 -14vw;
|
||||
height: 110vw;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-template-columns: repeat(32, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
margin: 0 -140px;
|
||||
height: clamp(400px, 40vw, 800px);
|
||||
}
|
||||
|
||||
.photo-card {
|
||||
--rotation: 0deg;
|
||||
position: relative;
|
||||
display: block;
|
||||
grid-column-end: span 8;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transform: rotate(var(--rotation)) translateZ(0);
|
||||
|
||||
@include bp (sm) {
|
||||
height: clamp(156px, 18vw, 400px);
|
||||
}
|
||||
|
||||
// First row
|
||||
// Mobile: Top left
|
||||
&:nth-child(1) {
|
||||
--rotation: -10.5deg;
|
||||
z-index: 5;
|
||||
grid-column-start: 2;
|
||||
grid-row: 1;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 10;
|
||||
top: clamp(24px, 8vw, 128px);
|
||||
}
|
||||
}
|
||||
// Mobile: Middle left
|
||||
&:nth-child(2) {
|
||||
--rotation: 3deg;
|
||||
z-index: 3;
|
||||
grid-column-start: 1;
|
||||
grid-row: 2;
|
||||
margin-top: -10vw;
|
||||
left: -20vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 7;
|
||||
grid-column-start: 7;
|
||||
grid-row: 1;
|
||||
top: clamp(16px, 3vw, 48px);
|
||||
margin-top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Middle center
|
||||
&:nth-child(3) {
|
||||
z-index: 4;
|
||||
grid-column-start: 5;
|
||||
grid-row: 2;
|
||||
margin-top: -12vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 6;
|
||||
grid-column-start: 13;
|
||||
grid-row: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Middle right
|
||||
&:nth-child(4) {
|
||||
--rotation: -3deg;
|
||||
z-index: 3;
|
||||
grid-column-start: 8;
|
||||
grid-row: 2;
|
||||
margin-top: -7vw;
|
||||
left: 20vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 2;
|
||||
grid-column-start: 19;
|
||||
grid-row: 1;
|
||||
top: clamp(16px, 3vw, 48px);
|
||||
margin-top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Top right
|
||||
&:nth-child(5) {
|
||||
--rotation: 10.5deg;
|
||||
z-index: 6;
|
||||
grid-column-start: 8;
|
||||
grid-row: 1;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 1;
|
||||
top: clamp(24px, 8vw, 128px);
|
||||
grid-column-start: 24;
|
||||
}
|
||||
}
|
||||
|
||||
// Second row
|
||||
&:nth-child(6) {
|
||||
display: none;
|
||||
--rotation: -5.5deg;
|
||||
|
||||
@include bp (sm) {
|
||||
display: block;
|
||||
z-index: 9;
|
||||
grid-column-start: 1;
|
||||
grid-row: 2;
|
||||
top: clamp(24px, 5.5vw, 88px);
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
display: none;
|
||||
--rotation: -8deg;
|
||||
|
||||
@include bp (sm) {
|
||||
display: block;
|
||||
z-index: 8;
|
||||
grid-column-start: 5;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
// Mobile: Bottom left
|
||||
&:nth-child(8) {
|
||||
--rotation: 8deg;
|
||||
z-index: 2;
|
||||
grid-column-start: 2;
|
||||
grid-row: 3;
|
||||
margin-top: -16vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 5;
|
||||
grid-column-start: 11;
|
||||
grid-row: 2;
|
||||
top: calc(-1 * clamp(20px, 3vw, 48px));
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Bottom right
|
||||
&:nth-child(9) {
|
||||
--rotation: -2deg;
|
||||
z-index: 1;
|
||||
grid-column-start: 8;
|
||||
grid-row: 3;
|
||||
margin-top: -16vw;
|
||||
|
||||
@include bp (sm) {
|
||||
--rotation: 2deg;
|
||||
z-index: 4;
|
||||
grid-column-start: 15;
|
||||
grid-row: 2;
|
||||
top: calc(-1 * clamp(20px, 3vw, 48px));
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(10) {
|
||||
--rotation: 8deg;
|
||||
display: none;
|
||||
|
||||
@include bp (sm) {
|
||||
display: block;
|
||||
z-index: 3;
|
||||
grid-column-start: 21;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
&:nth-child(11) {
|
||||
--rotation: 5.5deg;
|
||||
display: none;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 2;
|
||||
grid-column-start: 25;
|
||||
grid-row: 2;
|
||||
top: clamp(24px, 5.5vw, 88px);
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Put card in front when hovering
|
||||
&:hover {
|
||||
z-index: 13;
|
||||
}
|
||||
|
||||
// Not hovered
|
||||
&.is-inactive {
|
||||
img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -104,199 +104,6 @@
|
||||
margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);
|
||||
}
|
||||
}
|
||||
&__collage {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(16, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
margin: 0 -14vw;
|
||||
height: 110vw;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-template-columns: repeat(32, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
margin: 0 -140px;
|
||||
height: clamp(400px, 40vw, 800px);
|
||||
}
|
||||
|
||||
.photo-card {
|
||||
--rotation: 0deg;
|
||||
position: relative;
|
||||
display: block;
|
||||
grid-column-end: span 8;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
transform: rotate(var(--rotation)) translateZ(0);
|
||||
|
||||
@include bp (sm) {
|
||||
height: clamp(156px, 18vw, 400px);
|
||||
}
|
||||
|
||||
// First row
|
||||
// Mobile: Top left
|
||||
&:nth-child(1) {
|
||||
--rotation: -10.5deg;
|
||||
z-index: 5;
|
||||
grid-column-start: 2;
|
||||
grid-row: 1;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 10;
|
||||
top: clamp(24px, 8vw, 128px);
|
||||
}
|
||||
}
|
||||
// Mobile: Middle left
|
||||
&:nth-child(2) {
|
||||
--rotation: 3deg;
|
||||
z-index: 3;
|
||||
grid-column-start: 1;
|
||||
grid-row: 2;
|
||||
margin-top: -10vw;
|
||||
left: -20vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 7;
|
||||
grid-column-start: 7;
|
||||
grid-row: 1;
|
||||
top: clamp(16px, 3vw, 48px);
|
||||
margin-top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Middle center
|
||||
&:nth-child(3) {
|
||||
z-index: 4;
|
||||
grid-column-start: 5;
|
||||
grid-row: 2;
|
||||
margin-top: -12vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 6;
|
||||
grid-column-start: 13;
|
||||
grid-row: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Middle right
|
||||
&:nth-child(4) {
|
||||
--rotation: -3deg;
|
||||
z-index: 3;
|
||||
grid-column-start: 8;
|
||||
grid-row: 2;
|
||||
margin-top: -7vw;
|
||||
left: 20vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 2;
|
||||
grid-column-start: 19;
|
||||
grid-row: 1;
|
||||
top: clamp(16px, 3vw, 48px);
|
||||
margin-top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Top right
|
||||
&:nth-child(5) {
|
||||
--rotation: 10.5deg;
|
||||
z-index: 6;
|
||||
grid-column-start: 8;
|
||||
grid-row: 1;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 1;
|
||||
top: clamp(24px, 8vw, 128px);
|
||||
grid-column-start: 24;
|
||||
}
|
||||
}
|
||||
|
||||
// Second row
|
||||
&:nth-child(6) {
|
||||
display: none;
|
||||
--rotation: -5.5deg;
|
||||
|
||||
@include bp (sm) {
|
||||
display: block;
|
||||
z-index: 9;
|
||||
grid-column-start: 1;
|
||||
grid-row: 2;
|
||||
top: clamp(24px, 5.5vw, 88px);
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
display: none;
|
||||
--rotation: -8deg;
|
||||
|
||||
@include bp (sm) {
|
||||
display: block;
|
||||
z-index: 8;
|
||||
grid-column-start: 5;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
// Mobile: Bottom left
|
||||
&:nth-child(8) {
|
||||
--rotation: 8deg;
|
||||
z-index: 2;
|
||||
grid-column-start: 2;
|
||||
grid-row: 3;
|
||||
margin-top: -16vw;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 5;
|
||||
grid-column-start: 11;
|
||||
grid-row: 2;
|
||||
top: calc(-1 * clamp(20px, 3vw, 48px));
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// Mobile: Bottom right
|
||||
&:nth-child(9) {
|
||||
--rotation: -2deg;
|
||||
z-index: 1;
|
||||
grid-column-start: 8;
|
||||
grid-row: 3;
|
||||
margin-top: -16vw;
|
||||
|
||||
@include bp (sm) {
|
||||
--rotation: 2deg;
|
||||
z-index: 4;
|
||||
grid-column-start: 15;
|
||||
grid-row: 2;
|
||||
top: calc(-1 * clamp(20px, 3vw, 48px));
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(10) {
|
||||
--rotation: 8deg;
|
||||
display: none;
|
||||
|
||||
@include bp (sm) {
|
||||
display: block;
|
||||
z-index: 3;
|
||||
grid-column-start: 21;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
&:nth-child(11) {
|
||||
--rotation: 5.5deg;
|
||||
display: none;
|
||||
|
||||
@include bp (sm) {
|
||||
z-index: 2;
|
||||
grid-column-start: 25;
|
||||
grid-row: 2;
|
||||
top: clamp(24px, 5.5vw, 88px);
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Put card in front when hovering
|
||||
&:hover {
|
||||
z-index: 13;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CTAS
|
||||
&__ctas {
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
@import "molecules/shop-locationswitcher";
|
||||
|
||||
// Organisms
|
||||
@import "organisms/collage";
|
||||
@import "organisms/locations";
|
||||
@import "organisms/house";
|
||||
@import "organisms/newsletter";
|
||||
|
||||
Reference in New Issue
Block a user