homepage/styles/lib/_layout.scss

54 lines
927 B
SCSS

$small-gap: 0.5rem;
$normal-gap: 1.5rem;
$large-gap: 2.5rem;
$larger-gap: 4rem;
$huge-gap: 6rem;
$breakpoint: 80rem;
$narrow-content-width: 50rem;
$content-width: 60rem;
$wide-content-width: 80rem;
%narrow-content {
margin-left: auto;
margin-right: auto;
max-width: $narrow-content-width;
}
%narrow-content-gutter {
margin: $normal-gap $normal-gap;
@media screen and (min-width: $breakpoint) {
margin-left: auto;
margin-right: auto;
max-width: $narrow-content-width;
}
}
%content {
margin-left: auto;
margin-right: auto;
max-width: $content-width;
}
%content-gutter {
margin: $normal-gap $normal-gap;
@media screen and (min-width: $breakpoint) {
margin-left: auto;
margin-right: auto;
max-width: $content-width;
}
}
%wide-content {
margin-left: auto;
margin-right: auto;
max-width: $wide-content-width;
}
%wide-content-gutter {
margin: $normal-gap auto;
max-width: $wide-content-width;
}