106 lines
2.1 KiB
SCSS
106 lines
2.1 KiB
SCSS
$l-cols: 12;
|
|
$m-cols: 8;
|
|
$s-cols: 4;
|
|
$xs-cols: 2;
|
|
|
|
$l-grid: "[grid-col-start] repeat(#{$l-cols}, 1fr) [grid-col-end]";
|
|
$m-grid: "[grid-col-start] repeat(#{$m-cols}, 1fr) [grid-col-end]";
|
|
$s-grid: "[grid-col-start] repeat(#{$s-cols}, 1fr) [grid-col-end]";
|
|
$xs-grid: "[grid-col-start] repeat(#{$xs-cols}, 1fr) [grid-col-end]";
|
|
|
|
$l-breakpoint: 1000px;
|
|
$m-breakpoint: 800px;
|
|
$s-breakpoint: 600px;
|
|
$xs-breakpoint: 400px;
|
|
|
|
.grid {
|
|
display: grid;
|
|
height: 100%;
|
|
grid-template-columns: #{$l-grid};
|
|
grid-template-rows: var(--header-height) auto var(--footer-height);
|
|
grid-gap: 20px;
|
|
|
|
> header {
|
|
grid-column: span $l-cols;
|
|
}
|
|
|
|
> .sidebar {
|
|
grid-column: 2 / span 2;
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
> .sidebar-right {
|
|
display: none;
|
|
grid-column: span 2;
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
> section {
|
|
grid-column: 4 / span ($l-cols - 4);
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
> footer {
|
|
grid-column: span $l-cols;
|
|
grid-row-start: 3;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $l-breakpoint) {
|
|
.grid {
|
|
grid-template-columns: #{$m-grid};
|
|
grid-gap: 10px;
|
|
|
|
|
|
> header {
|
|
grid-column: span $m-cols;
|
|
}
|
|
|
|
> .sidebar {
|
|
grid-column: grid-col-start / span 2;
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
> section {
|
|
grid-column: 3 / span 6;
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
> footer {
|
|
grid-column: span $m-cols;
|
|
grid-row-start: 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $m-breakpoint) {
|
|
.grid {
|
|
grid-template-columns: #{$s-grid};
|
|
|
|
> header, > .sidebar, > section, > footer {
|
|
grid-column: span $s-cols;
|
|
}
|
|
|
|
> section {
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
> .sidebar {
|
|
grid-row-start: 3;
|
|
}
|
|
|
|
> footer {
|
|
grid-row-start: 4;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $s-breakpoint) {
|
|
.grid {
|
|
grid-template-columns: #{$xs-grid};
|
|
|
|
> header, > .sidebar, > section, > footer {
|
|
grid-column: span $xs-cols;
|
|
}
|
|
}
|
|
} |