feat(SW-369): show sidebar on loyalty + loyalty & content page layout refactor

This commit is contained in:
Chuma McPhoy
2024-10-16 20:46:02 +02:00
parent 41e31375dd
commit df2203b97f
5 changed files with 21 additions and 29 deletions
@@ -1,21 +1,24 @@
.content {
display: grid;
padding-bottom: var(--Spacing-x9);
padding-left: var(--Spacing-x0);
padding-right: var(--Spacing-x0);
container-name: loyalty-page;
container-type: inline-size;
grid-template-areas: "main";
grid-template-columns: 1fr;
gap: var(--Spacing-x5);
padding: 0 var(--Spacing-x2) var(--Spacing-x9);
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
}
.content:has(> aside) {
grid-template-areas:
"main"
"sidebar";
}
.blocks {
grid-area: main;
display: grid;
gap: var(--Spacing-x7);
padding-left: var(--Spacing-x2);
padding-right: var(--Spacing-x2);
}
.header {
@@ -25,23 +28,16 @@
@media screen and (min-width: 1367px) {
.content {
gap: var(--Spacing-x5);
padding-left: var(--Spacing-x5);
padding-right: var(--Spacing-x5);
padding: 0 var(--Spacing-x5) var(--Spacing-x9);
}
.content:has(> aside) {
grid-template-areas: "sidebar main";
grid-template-columns: 360px 1fr;
}
.content:has(> aside) .blocks {
grid-column: 2 / -1;
}
.blocks {
gap: var(--Spacing-x9);
padding-left: var(--Spacing-x0);
padding-right: var(--Spacing-x0);
}
.blocks > section:first-of-type > header {