88 lines
1.7 KiB
SCSS
88 lines
1.7 KiB
SCSS
$grid_max: $grid_max_width + $grid_max_unit;
|
|
$grid_main_main: $grid_main_main_width + $grid_main_main_unit;
|
|
$grid_main_side: $grid_main_side_width + $grid_main_side_unit;
|
|
$grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
|
|
|
|
.wrapper {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
max-width: $grid_max;
|
|
grid-template-columns: minmax(350px, $grid_main_main) minmax(250px, $grid_main_side);
|
|
grid-template-rows: $grid_navbar_height auto 1fr auto;
|
|
grid-column-gap: $grid_column_gap;
|
|
grid-row-gap: $grid_row_gap;
|
|
}
|
|
|
|
.header-main {
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
.header-side {
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
}
|
|
|
|
.header {
|
|
grid-area: 2 / 1 / 3 / 3;
|
|
}
|
|
|
|
.main-main {
|
|
grid-area: 3 / 1 / 4 / 2;
|
|
}
|
|
|
|
.main-side {
|
|
grid-area: 3 / 2 / 4 / 3;
|
|
}
|
|
|
|
.main {
|
|
grid-area: 3 / 1 / 4 / 3;
|
|
}
|
|
|
|
.footer-main {
|
|
grid-area: 4 / 1 / 5 / 2;
|
|
}
|
|
|
|
.footer-side {
|
|
grid-area: 4 / 2 / 5 / 3;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: 4 / 1 / 5 / 3;
|
|
}
|
|
|
|
.navbar-main {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
.navbar-side {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
|
|
.navbar {
|
|
grid-area: 1 / 1 / 2 / 3;
|
|
}
|
|
|
|
|
|
|
|
.inner {
|
|
display: grid;
|
|
grid-template-columns: 266px 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-column-gap: 16px;
|
|
grid-row-gap: 0px;
|
|
|
|
&[data-sidebar-position="left"] {
|
|
grid-template-columns: 266px 1fr 1fr;
|
|
}
|
|
|
|
&[data-sidebar-position="right"] {
|
|
grid-template-columns: 1fr 1fr 266px;
|
|
}
|
|
}
|
|
|
|
.l { grid-area: 1 / 1 / 2 / 2; } // left
|
|
.m { grid-area: 1 / 2 / 2 / 3; } // middle
|
|
.r { grid-area: 1 / 3 / 2 / 4; } // right
|
|
.lm { grid-area: 1 / 1 / 2 / 3; } // left + middle
|
|
.mr { grid-area: 1 / 2 / 2 / 4; } // middle + right
|
|
.lmr { grid-area: 1 / 1 / 2 / 4; } // left + middle + right |