KNACSS/sass/base/_layout.scss

40 lines
No EOL
669 B
SCSS
Executable file

/* ---------------------------- */
/* ==Layout classes */
/* ----------------------------- */
/* Global container */
.layout-maxed {
display: grid;
@each $key,
$value in $breakpoints {
@media (min-width: #{$value}) {
grid-template-columns:
minmax($spacer-small, 1fr)
minmax(auto, $value)
minmax($spacer-small, 1fr);
}
}
}
/* Center all children */
.layout-maxed > * {
grid-column: 2;
}
/* Hero box */
.layout-hero {
grid-column: 1 / -1;
display: grid;
}
.layout-hero > * {
grid-column: 2;
}
/* Hero image */
.layout-hero-img {
grid-column: 1 / -1;
justify-self: center;
max-width: 100%;
}