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; padding: 0 12px;
color: $color-secondary; color: $color-secondary;
border: 1px solid rgba($color-secondary, 0.4); 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) { @include bp (mob-lg) {
margin: 0 -12px; 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) { @include bp (md) {
--gap: 32px; --gap: clamp(32px, 2.5vw, 48px);
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: var(--gap); gap: var(--gap);
margin: 0; margin: 0;
} }
@include bp (sd) { @include bp (sd) {
--gap: 48px;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
@@ -95,43 +84,38 @@
@include bp (sm) { @include bp (sm) {
flex: 0 0 calc(50% - 24px); flex: 0 0 calc(50% - 24px);
} }
// margin: 0 auto auto; @include bp (md) {
margin: 0 auto auto;
// 2 columns }
// &:nth-child(2n + 1) {
// @include bp (sm, max) {
// margin-top: calc(var(--gap) * 2);
// }
// }
// 3 columns // 3 columns
// &:nth-child(3n + 1) { &:nth-child(1) {
// @include bp (sd, max) { @include bp (sd, max) {
// margin-top: calc(var(--gap) * 2); margin-top: calc(var(--gap) * 2);
// } }
// } }
// &:nth-child(3n + 2) { &:nth-child(2) {
// @include bp (sd, max) { @include bp (sd, max) {
// margin-top: var(--gap); margin-top: var(--gap);
// } }
// } }
// 4 columns // 4 columns
// &:nth-child(4n + 1) { &:nth-child(4n + 1) {
// @include bp (sd) { @include bp (sd) {
// margin-top: 64px * 3; margin-top: 64px * 3;
// } }
// } }
// &:nth-child(4n + 2) { &:nth-child(4n + 2) {
// @include bp (sd) { @include bp (sd) {
// margin-top: 64px * 2; margin-top: 64px * 2;
// } }
// } }
// &:nth-child(4n + 3) { &:nth-child(4n + 3) {
// @include bp (sd) { @include bp (sd) {
// margin-top: 64px; margin-top: 64px;
// } }
// } }
} }
// Pagination // Pagination