94 lines
1.8 KiB
SCSS
94 lines
1.8 KiB
SCSS
.layout {
|
|
&__page {
|
|
max-width: $max-content-width;
|
|
}
|
|
|
|
&__header,
|
|
&__footer,
|
|
&__content,
|
|
&__navigation,
|
|
&__first-sidebar,
|
|
&__second-sidebar,
|
|
&__page-top,
|
|
&__page-bottom {
|
|
padding: 0 $zen-gutters / 2;
|
|
|
|
@include respond-to(s) {
|
|
padding: 0 $zen-gutters;
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports (display: grid) {
|
|
|
|
.layout {
|
|
&__page {
|
|
display: grid;
|
|
grid-template-columns: [first-start] 1fr [last-end];
|
|
}
|
|
|
|
@include respond-to(s) {
|
|
&__page {
|
|
grid-template-rows: [head-start] auto
|
|
[nav-start] auto
|
|
[page-top-start] auto
|
|
[main-start] 1fr
|
|
[page-bottom-start] auto
|
|
[footer-start] auto;
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&__sidebar-first {
|
|
grid-template-columns: [first-start] 1fr
|
|
[last-start] 2fr [last-end];
|
|
}
|
|
|
|
&__sidebar-second {
|
|
grid-template-columns: [first-start] 2fr
|
|
[last-start] 1fr [last-end];
|
|
}
|
|
|
|
&__sidebar-two {
|
|
grid-template-columns: [first-start] 1fr
|
|
[middle-start] 2fr
|
|
[last-start] 1fr [last-end];
|
|
}
|
|
|
|
&__full {
|
|
grid-column: first-start / last-end;
|
|
}
|
|
|
|
&__first-sidebar {
|
|
grid-column: first-start;
|
|
}
|
|
|
|
&__header {
|
|
grid-row: head-start;
|
|
}
|
|
|
|
&__navigation {
|
|
grid-row: nav-start;
|
|
}
|
|
|
|
&__page-top {
|
|
grid-row: page-top-start;
|
|
}
|
|
|
|
&__content,
|
|
&__first-sidebar,
|
|
&__second-sidebar {
|
|
grid-row: main-start;
|
|
}
|
|
|
|
&__page-bottom {
|
|
grid-row: page-bottom-start;
|
|
}
|
|
|
|
&__footer {
|
|
grid-row: footer-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|