54 lines
888 B
SCSS
54 lines
888 B
SCSS
////////////////////
|
|
// Layout Variables
|
|
////////////////////
|
|
|
|
// Container padding
|
|
$cp-sm: rem-calc(15px);
|
|
$cp-md: 5%;
|
|
$cp-lg: rem-calc(75px);
|
|
|
|
// Max site width
|
|
$max-width: 1440px;
|
|
|
|
// Breakpoints
|
|
$bp-sm: 600px;
|
|
$bp-md: 800px;
|
|
$bp-lg: 1000px;
|
|
$bp-xl: $max-width;
|
|
|
|
////////////////////
|
|
// Container
|
|
////////////////////
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: $max-width;
|
|
margin: auto;
|
|
padding-left: $cp-sm;
|
|
padding-right: $cp-sm;
|
|
|
|
@media (min-width: $bp-md) {
|
|
padding-left: $cp-md;
|
|
padding-right: $cp-md;
|
|
}
|
|
|
|
@media (min-width: $bp-xl) {
|
|
padding-left: $cp-lg;
|
|
padding-right: $cp-lg;
|
|
}
|
|
}
|
|
|
|
////////////////////
|
|
// Container
|
|
////////////////////
|
|
|
|
.container-offset {
|
|
@media (min-width: $bp-md) {
|
|
padding-left: ($cp-md + 7%);
|
|
}
|
|
|
|
@media (min-width: $bp-xl) {
|
|
padding-left: rem-calc(175px);
|
|
}
|
|
}
|