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

[wip] Fix Shop posters layout on larger screens

Browse Source
This commit is contained in:
Félix Péault
2021-12-15 22:32:58 +01:00
parent 9e27dbbabe
commit 9de5aa16c9
2 changed files with 41 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/style/molecules/_poster.scss
View File

@@ -70,6 +70,18 @@
padding: 0 12px;
color: $color-secondary;
border: 1px solid rgba($color-secondary, 0.4);
@include bp (md) {
border: none;
color: #fff;
background: $color-secondary;
}
&:hover {
@include bp (md) {
background-color: darken($color-secondary, 7);
}
}
}
}
}

74
src/style/pages/shop/_posters.scss
View File

@@ -60,25 +60,14 @@
@include bp (mob-lg) {
margin: 0 -12px;
}
// @include bp (sm) {
// grid-column: 2 / span 22;
// }
// @include bp (mob-lg) {
// --gap: 32px;
// display: grid;
// grid-template-columns: repeat(2, 1fr);
// gap: var(--gap);
// }
@include bp (md) {
--gap: 32px;
--gap: clamp(32px, 2.5vw, 48px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
margin: 0;
}
@include bp (sd) {
--gap: 48px;
grid-template-columns: repeat(4, 1fr);
}
}
@@ -95,43 +84,38 @@
@include bp (sm) {
flex: 0 0 calc(50% - 24px);
}
// margin: 0 auto auto;
// 2 columns
// &:nth-child(2n + 1) {
// @include bp (sm, max) {
// margin-top: calc(var(--gap) * 2);
// }
// }
@include bp (md) {
margin: 0 auto auto;
}
// 3 columns
// &:nth-child(3n + 1) {
// @include bp (sd, max) {
// margin-top: calc(var(--gap) * 2);
// }
// }
// &:nth-child(3n + 2) {
// @include bp (sd, max) {
// margin-top: var(--gap);
// }
// }
&:nth-child(1) {
@include bp (sd, max) {
margin-top: calc(var(--gap) * 2);
}
}
&:nth-child(2) {
@include bp (sd, max) {
margin-top: var(--gap);
}
}
// 4 columns
// &:nth-child(4n + 1) {
// @include bp (sd) {
// margin-top: 64px * 3;
// }
// }
// &:nth-child(4n + 2) {
// @include bp (sd) {
// margin-top: 64px * 2;
// }
// }
// &:nth-child(4n + 3) {
// @include bp (sd) {
// margin-top: 64px;
// }
// }
&:nth-child(4n + 1) {
@include bp (sd) {
margin-top: 64px * 3;
}
}
&:nth-child(4n + 2) {
@include bp (sd) {
margin-top: 64px * 2;
}
}
&:nth-child(4n + 3) {
@include bp (sd) {
margin-top: 64px;
}
}
}
// Pagination