75 lines
1.3 KiB
SCSS
75 lines
1.3 KiB
SCSS
////////////////////
|
|
// Layout Variables
|
|
////////////////////
|
|
|
|
// Container padding
|
|
$cp-sm: rem-calc(15px);
|
|
$cp-md: 5vw;
|
|
$cp-lg: rem-calc(75px);
|
|
$cp-offset-lg: 12%;
|
|
$cp-offset-xl: rem-calc(175px);
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
////////////////////
|
|
// Modifiers
|
|
////////////////////
|
|
|
|
// Padding left offset
|
|
.container-offset {
|
|
@media (min-width: $bp-lg) {
|
|
padding-left: $cp-offset-lg;
|
|
}
|
|
|
|
@media (min-width: $bp-xl) {
|
|
padding-left: $cp-offset-xl;
|
|
}
|
|
}
|
|
|
|
// Container with top and bottom padding
|
|
// Useful for sections of content
|
|
.section-container {
|
|
@extend .container;
|
|
padding-top: rem-calc(40px);
|
|
padding-bottom: rem-calc(40px);
|
|
|
|
@media (min-width: $bp-md) {
|
|
padding-top: $cp-md;
|
|
padding-bottom: $cp-md;
|
|
}
|
|
|
|
@media (min-width: $bp-xl) {
|
|
padding-top: $cp-lg;
|
|
padding-bottom: $cp-lg;
|
|
}
|
|
}
|