June
4c84dabb23
Also define the necessary variables for these breakpoints and viewports. This way they can be used in other contexts as well.
39 lines
965 B
SCSS
39 lines
965 B
SCSS
// Provide a container class, which limits the viewport depending on the screen
|
|
// width.
|
|
// Taken from PicoCSS, see here:
|
|
// https://github.com/picocss/pico/blob/v1.5.11/scss/layout/_container.scss
|
|
|
|
.container {
|
|
width: 100%;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding-right: var(--spacing);
|
|
padding-left: var(--spacing);
|
|
|
|
@if map-get($breakpoints, "sm") {
|
|
@media (min-width: map-get($breakpoints, "sm")) {
|
|
max-width: map-get($viewports, "sm");
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
@if map-get($breakpoints, "md") {
|
|
@media (min-width: map-get($breakpoints, "md")) {
|
|
max-width: map-get($viewports, "md");
|
|
}
|
|
}
|
|
|
|
@if map-get($breakpoints, "lg") {
|
|
@media (min-width: map-get($breakpoints, "lg")) {
|
|
max-width: map-get($viewports, "lg");
|
|
}
|
|
}
|
|
|
|
@if map-get($breakpoints, "xl") {
|
|
@media (min-width: map-get($breakpoints, "xl")) {
|
|
max-width: map-get($viewports, "xl");
|
|
}
|
|
}
|
|
}
|