blog/assets/pico/scss/layout/_landmarks.scss

63 lines
1.6 KiB
SCSS
Raw Permalink Normal View History

2024-06-18 09:46:06 +02:00
@use "sass:map";
@use "../settings" as *;
@if map.get($modules, "layout/landmarks") {
/**
* Landmarks
*/
// 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
//
// 1. Remove the margin in all browsers (opinionated)
body {
width: 100%;
margin: 0; // 1
}
// Render the `main` element consistently in IE
main {
display: block;
}
// Pico
//
#{$parent-selector} #{$semantic-root-element} {
> header,
> main,
> footer {
// <header>, <main>, <footer> as containers
@if $enable-semantic-container {
$first-breakpoint: true;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(#{$css-var-prefix}block-spacing-vertical)
var(#{$css-var-prefix}block-spacing-horizontal);
@if $enable-viewport {
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}
}
// Regular vertical spacings for <header>, <main>, <footer>
@else {
padding-block: var(#{$css-var-prefix}block-spacing-vertical);
}
}
}
}