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

👀 Rework how House index is displayed

Browse Source 
Use grids to place the index instead of position absolute
Add a condition if the index starts with 1 as it has a quite smaller width
This commit is contained in:
Félix Péault
2022-06-27 13:28:58 +02:00
parent 465e673715
commit c9053f9757
3 changed files with 51 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/style/molecules/_house.scss
View File

@@ -1,19 +1,6 @@
.house {
position: relative;
@include bp (sm) {
--columns: 20;
grid-column-start: 3;
}
& > a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
cursor: zoom-in;
}
// Information
&__info {
--delay: 0.2s;
@@ -26,7 +13,7 @@
max-width: min(540px, 85vw);
}
@include bp (sm) {
grid-column: 4 / span 14;
grid-column: 6 / span 14;
margin-bottom: 56px;
padding: 0;
max-width: 800px;
@@ -81,11 +68,23 @@
// Photo
&__photo {
position: relative;
display: block;
grid-column: 1 / span 17;
grid-column: span var(--columns);
opacity: 0;
transition: opacity 2s var(--ease-quart);
& > a {
grid-column: span var(--columns);
width: 100%;
height: 100%;
text-decoration: none;
cursor: zoom-in;
@include bp (sm) {
grid-column: 3 / span 17;
grid-row: 1;
}
}
:global(figure) {
position: relative;
z-index: 5;
@@ -143,7 +142,7 @@
a:hover {
:global(img) {
opacity: 0.7;
transform: scale3d(1.03, 1.03, 1.03) !important;
transform: scale3d(1.03, 1.03, 1.03);
transition-duration: 1.2s;
}
}
@@ -156,28 +155,44 @@
z-index: 1;
bottom: -64px;
right: 20px;
display: block;
text-align: right;
pointer-events: none;
user-select: none;
@include bp (sm) {
left: 112.5%;
width: 400px;
top: 50%;
position: relative;
grid-column: 19 / span 6;
grid-row: 1;
white-space: nowrap;
bottom: auto;
right: auto;
align-self: center;
background: none;
text-align: left;
transform: translate3d(-50%, -50%, 0);
}
// Specific cases
&.has-one-start {
@include bp (sm) {
transform: translate3d(15%, 0, 0);
}
}
}
// Even photos
&:nth-child(even) {
.house {
// Photo
&__photo {
@include bp (sm) {
grid-column-start: 4;
& > a {
@include bp (sm) {
grid-column: 6 / span 17;
grid-row: 1;
}
}
}
// Info
&__info {
@include bp (sm) {
margin-left: auto;
@@ -185,14 +200,17 @@
}
}
&__index {
left: auto;
right: 20px;
@include bp (sm) {
right: auto;
left: -12%;
grid-column-start: 1;
text-align: right;
}
// Specific cases
&.has-one-start {
@include bp (sm) {
transform: translate3d(-8%, 0, 0);
}
}
}
}
}