Responsive modular scale typesetting

modular_scale_type.scss

@import "../bower_components/sassquatch/sass/utils.scss"; // just the mixins
@import "../bower_components/modular-scale/stylesheets/modular-scale.scss";

/* {{{ ~~~~~~~~~~~~~~~~~~~ MODULAR SCALE */
$scale-small: $major-third;
$scale-big: $fourth;

$ms-base: 1rem;
$ms-ratio: $scale-small;
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ }}} */

$smallFontSize: 	ms(-1);
$bigFontSize: 		ms(1);

$lineheight: 1.6;

%blockcontent {
	display: block;
	margin: 0 auto 1rem auto;
}

%container {
	padding: 1rem 1rem 0 1rem;
	border-bottom: 1px solid transparent;
}

%largetype {
	line-height: 1.3;
}

%smalltype {
	line-height: 1.8;
}

%heading {
	@extend %blockcontent;
	@extend %largetype;
	color: #000;
	font-weight: $W_normal;
}


html {
	font-size: 14px;
	font-family: $F_sans;
	font-weight: $W_normal;
	line-height: $lineheight;
	color: rgba(0,0,0,0.67);
	margin: 0;
	padding: 0;
}
body {
	background: $C_backgroundCollection;
	border-top: 3rem solid $C_red;
	margin: 0;
	padding: 2rem;
	&:after {
		color: #fff;
		position: absolute;
		top: 0.75rem;
		left: 1rem;
		content: "Major Third";
		font-size: 16px;
	}
}

p, big, small {
	@extend %blockcontent;
}


h1 {
	@extend %heading;
	font-size: ms(3);
}
h2 {
	@extend %heading;
	font-size: ms(2);
}
h3 {
	@extend %heading;
	font-size: ms(1);
}
h4 {
	@extend %heading;
	font-size: ms(1);
}
h5 {
	@extend %heading;
	font-size: ms(1);
}
h6 {
	@extend %heading;
	font-size: ms(1);
}

@include atMediaUp(medium) {

	html {
		font-size: 16px;
	}

	body:after {
		content: "Perfect Fourth";
	}

	h1 {
		font-size: ms(4, 1rem, $scale-big);
	}
	h2 {
		font-size: ms(3, 1rem, $scale-big);
	}
	h3 {
		font-size: ms(2, 1rem, $scale-big);
	}
	h4 {
		font-size: ms(1, 1rem, $scale-big);
	}
	h5 {
		font-size: ms(1, 1rem, $scale-big);
	}
	h6 {
		font-size: ms(1, 1rem, $scale-big);
	}
}

.big, big {
	@extend %largetype;
	font-size: $bigFontSize;
}

.small, small {
	@extend %smalltype;
	font-size: $smallFontSize;
}

.paper {
	@extend %blockcontent;
	@extend %container;
	margin-bottom: 2rem;
	background: #fff;
	box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.25);
	max-width: 48rem;
}

.stripe {
	@extend %blockcontent;
	@extend %container;
	margin: -1rem -1rem 1rem -1rem;
	background: rgba(226, 55, 60, 0.25);
}