71 lines
1.8 KiB
SCSS
71 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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|