183 lines
4.2 KiB
SCSS
183 lines
4.2 KiB
SCSS
// stylelint-disable indentation, declaration-colon-newline-after, no-duplicate-selectors
|
|
|
|
// Initial layout setup.
|
|
.layout {
|
|
&__page {
|
|
max-width: var(--max-page-width);
|
|
|
|
@include respond-to(s) {
|
|
margin-inline: auto;
|
|
min-height: 100vh;
|
|
min-height: 100svh;
|
|
}
|
|
}
|
|
|
|
&__header,
|
|
&__footer,
|
|
&__main,
|
|
&__navigation,
|
|
&__first-sidebar,
|
|
&__second-sidebar,
|
|
&__page-top,
|
|
&__page-bottom,
|
|
&__cookieconsent {
|
|
padding-inline: var(--gutters);
|
|
min-width: 0; // With display grid defaults to auto, making <pre> overflow.
|
|
}
|
|
}
|
|
|
|
// If page width is bigger then content with,
|
|
// setup grid with breakout and stretch for main section.
|
|
@if $max-page-width > $max-content-width {
|
|
.layout {
|
|
&__navigation > * {
|
|
max-width: var(--max-content-width);
|
|
|
|
@include respond-to(s) {
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
|
|
&__main,
|
|
&__grid {
|
|
display: grid;
|
|
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
|
// stylelint-disable function-name-case
|
|
grid-template-columns:
|
|
[stretch-start] minmax(var(--gutters), 1fr)
|
|
[breakout-start] minmax(0, var(--breakout))
|
|
[content-start] Min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
|
|
minmax(0, var(--breakout)) [breakout-end]
|
|
minmax(var(--gutters), 1fr) [stretch-end];
|
|
// stylelint-enable function-name-case
|
|
padding-inline: 0;
|
|
// Stop content in main from streatching.
|
|
height: fit-content;
|
|
|
|
& > :not(.breakout, .stretch) {
|
|
grid-column: content;
|
|
}
|
|
|
|
& > .breakout {
|
|
grid-column: breakout;
|
|
}
|
|
|
|
& > .stretch {
|
|
grid-column: stretch;
|
|
padding-inline: var(--gutters);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Setup template areas/rown/columns for page.
|
|
.layout {
|
|
&__page {
|
|
display: grid;
|
|
grid-template-areas: 'head'
|
|
'nav'
|
|
'top'
|
|
'main'
|
|
'side1'
|
|
'side2'
|
|
'bottom'
|
|
'foot'
|
|
'notice';
|
|
grid-template-rows: auto
|
|
auto
|
|
auto
|
|
1fr
|
|
auto
|
|
auto
|
|
auto
|
|
auto
|
|
auto;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@include respond-to(xl) {
|
|
&__page {
|
|
grid-template-rows: auto
|
|
auto
|
|
auto
|
|
1fr
|
|
auto
|
|
auto
|
|
auto;
|
|
}
|
|
|
|
&__sidebar-first {
|
|
grid-template-areas: 'head head'
|
|
'nav nav'
|
|
'side1 top'
|
|
'side1 main'
|
|
'side1 bottom'
|
|
'foot foot'
|
|
'notice notice';
|
|
grid-template-columns: 1fr
|
|
2fr;
|
|
}
|
|
|
|
&__sidebar-second {
|
|
grid-template-areas: 'head head'
|
|
'nav nav'
|
|
'top side2'
|
|
'main side2'
|
|
'bottom side2'
|
|
'foot foot'
|
|
'notice notice';
|
|
grid-template-columns: 2fr
|
|
1fr;
|
|
}
|
|
|
|
&__sidebar-two {
|
|
grid-template-areas: 'head head head'
|
|
'nav nav nav'
|
|
'side1 top side2'
|
|
'side1 main side2'
|
|
'side1 bottom side2'
|
|
'foot foot foot'
|
|
'notice notice notice';
|
|
grid-template-columns: 1fr
|
|
2fr
|
|
1fr;
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
grid-area: head;
|
|
}
|
|
|
|
&__navigation {
|
|
grid-area: nav;
|
|
}
|
|
|
|
&__page-top {
|
|
grid-area: top;
|
|
}
|
|
|
|
&__main {
|
|
grid-area: main;
|
|
}
|
|
|
|
&__first-sidebar {
|
|
grid-area: side1;
|
|
}
|
|
|
|
&__second-sidebar {
|
|
grid-area: side2;
|
|
}
|
|
|
|
&__page-bottom {
|
|
grid-area: bottom;
|
|
}
|
|
|
|
&__footer {
|
|
grid-area: foot;
|
|
}
|
|
|
|
&__cookieconsent {
|
|
grid-area: notice;
|
|
}
|
|
}
|