// Media query
// 'mobile first' design (as opposed to 'desktop first'): css-tricks.com/logic-in-media-queries/ // Media query mixin // Usage: // @include mq(md) { // ..medium and up styles // } @mixin mq($name) {
// Retrieves the value from the key $value: map-get($media-queries, $name); // If the key exists in the map @if $value != null { // Prints a media query based on the value @media (min-width: rem($value)) { @content; } } @else { @warn "No value could be retrieved from `#{$media-query}`. " + "Please make sure it is defined in `$media-queries` map."; }
}
// Responsive container
@mixin container {
padding-right: $gutter-spacing-sm; padding-left: $gutter-spacing-sm; @include mq(md) { padding-right: $gutter-spacing; padding-left: $gutter-spacing; } @include mq(lg) { padding-right: $gutter-spacing; padding-left: $gutter-spacing; }
}
@mixin sidenote-container {
padding-right: $gutter-spacing-sm; padding-left: $gutter-spacing-sm; // @include mq(md) { // // padding-right: $gutter-spacing; // // margin-right: $content-width / 3; // margin-right: -$content-width / 2; // width: $content-width / 4; // } @include mq(lg) { padding-left: $gutter-spacing; padding-right: $gutter-spacing; }
}