70 lines
1.8 KiB
SCSS
70 lines
1.8 KiB
SCSS
/**
|
||
* Sectioning
|
||
* Container and responsive spacings for header, main, footer
|
||
*/
|
||
|
||
// Reboot based on :
|
||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||
// ––––––––––––––––––––
|
||
|
||
// Render the `main` element consistently in IE
|
||
main {
|
||
display: block;
|
||
}
|
||
|
||
// Pico
|
||
// ––––––––––––––––––––
|
||
|
||
// 1. Remove the margin in all browsers (opinionated)
|
||
#{$semantic-root-element} {
|
||
width: 100%;
|
||
margin: 0; // 1
|
||
|
||
> header,
|
||
> main,
|
||
> footer {
|
||
width: 100%;
|
||
margin-right: auto;
|
||
margin-left: auto;
|
||
|
||
// Semantic container
|
||
@if $enable-semantic-container {
|
||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||
|
||
// Centered viewport
|
||
@if $enable-viewport {
|
||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||
@media (min-width: map-get($breakpoints, "sm")) {
|
||
max-width: map-get($viewports, "sm");
|
||
padding-right: 0;
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||
@media (min-width: map-get($breakpoints, "md")) {
|
||
max-width: map-get($viewports, "md");
|
||
}
|
||
}
|
||
|
||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||
@media (min-width: map-get($breakpoints, "lg")) {
|
||
max-width: map-get($viewports, "lg");
|
||
}
|
||
}
|
||
|
||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||
@media (min-width: map-get($breakpoints, "xl")) {
|
||
max-width: map-get($viewports, "xl");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Semantic container
|
||
@else {
|
||
padding: var(--block-spacing-vertical) 0;
|
||
}
|
||
}
|
||
}
|