ccchh-website/themes/ccchh/assets/scss/container.scss
June 4c84dabb23
Provide container class to limit viewport depending on screen width
Also define the necessary variables for these breakpoints and viewports.
This way they can be used in other contexts as well.
2024-01-28 20:15:12 +01:00

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");
}
}
}