// Responsive blocks @mixin on-mobile {
@media only screen and (max-width: $mobile-width) { @content; }
} @mixin on-vert-tablet {
@media only screen and (max-width: $vert-tablet-width) { @content; }
} @mixin on-tablet {
@media only screen and (max-width: $tablet-width) { @content; }
}
// Back bois @mixin cutout {
background-color: $back-color; color: $white-color; box-shadow: inset 0px 0pt 8pt darken($back-color, 33%); padding: $spacing-unit;
} @mixin block-cutout {
@include cutout; display: block; margin: 0; margin-top: $spacing-unit; margin-bottom: $spacing-unit; padding: 2*$spacing-unit;
} @mixin raised {
background-color: $white-color; color: $back-color; box-shadow: 0px 0pt 8pt darken($back-color, 33%); padding: $spacing-unit;
}