rpkoller/index.html

## index.html
<!DOCTYPE html>
<html lang="de" dir="ltr">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Test</title> <!-- 70chars max -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<h1>Headline</h1>
		<p>I suggest you drop it, Mr. Data. Damage report! About four years. I got tired of hearing how young I looked. A lot of things can change in twelve years, Admiral. Ensign Babyface! Your head is not an artifact! You bet I'm agitated! I may be surrounded by insanity, but I am not insane. I'll be sure to note that in my log. Wouldn't that bring about chaos? Travel time to the nearest starbase? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. Congratulations - you just destroyed the Enterprise. The unexpected is our normal routine. When has justice ever been as simple as a rule book? I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them. Captain, why are we out here chasing comets? Now, how the hell do we defeat an enemy that knows us better than we know ourselves? Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Fear is the true enemy, the only enemy. We have a saboteur aboard. For an android with no feelings, he sure managed to evoke them in others. Is it my imagination, or have tempers become a little frayed on the ship lately? Talk about going nowhere fast. Commander William Riker of the Starship Enterprise. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. Some days you get the bear, and some days the bear gets you.</p>
	</body>
</html>

## style.scss
@import 'compass';
@import 'modular-scale';
@import 'breakpoint';

//Breakpoint related variables
$breakpoint-to-ems: true;
$bp-750: min-width 750px;

//https://github.com/chriseppstein/compass/pull/1352
@mixin use-baseline($new-base-size, $new-line-height) {
   // Save the baseline context
   $initial-font-size: $base-font-size;
   $initial-line-height: $base-line-height;
   // Apply the new context
   $base-font-size: $new-base-size;
   $base-line-height: $new-line-height;
   @content;
   // Reapply the initial context
   $base-font-size: $initial-font-size;
   $base-line-height: $initial-line-height;
}

$base-size: 20px 44px;
$ratio: golden();

$mod0: ms(0);
$mod1: ms(1);
$mod2: ms(2);
$mod3: ms(3);
$mod4: ms(4);
$mod5: ms(5);
$mod6: ms(6);
$mod7: ms(7);
$mod8: ms(8);
$mod9: ms(9);
$mod10: ms(10);
$mod11: ms(11);
$mod12: ms(12);

$base-size: 26px 50px;
$ratio: fifth();

$mood0: ms(0);
$mood1: ms(1);
$mood2: ms(2);
$mood3: ms(3);
$mood4: ms(4);
$mood5: ms(5);
$mood6: ms(6);
$mood7: ms(7);
$mood8: ms(8);
$mood9: ms(9);
$mood10: ms(10);
$mood11: ms(11);
$mood12: ms(12);


$vr-base-font-size: 20px;
$vr-base-line-height:28px;

$vr-750-font-size: 26px;
$vr-750-line-height:37px;
$vr-750: $vr-750-font-size $vr-750-line-height;

$base-font-size: $vr-base-font-size;
$base-line-height: $vr-base-line-height;


@include establish-baseline($mod0);
@include breakpoint($bp-750) {
	@include use-baseline($vr-750...) {
		@include establish-baseline($mood0);
	}
}

 span {
 	&:after{
 		content:"#{$mod2}";
 	}
 }

  span {
 	&:after{
 		content:"#{$mood2}";
 	}
 }

h1 {
	@include adjust-font-size-to($mod2);
	@include breakpoint($bp-750) {
		@include use-baseline($vr-750...) {
			@include adjust-font-size-to($mood2);
		}
	}
}

p {
	@include adjust-font-size-to($mod0);
	@include breakpoint($bp-750) {
		@include use-baseline($vr-750...) {
			@include adjust-font-size-to($mood0);
		}
	}
}
	<!DOCTYPE html>
	<html lang="de" dir="ltr">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Test</title> <!-- 70chars max -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
	<h1>Headline</h1>
	<p>I suggest you drop it, Mr. Data. Damage report! About four years. I got tired of hearing how young I looked. A lot of things can change in twelve years, Admiral. Ensign Babyface! Your head is not an artifact! You bet I'm agitated! I may be surrounded by insanity, but I am not insane. I'll be sure to note that in my log. Wouldn't that bring about chaos? Travel time to the nearest starbase? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. Congratulations - you just destroyed the Enterprise. The unexpected is our normal routine. When has justice ever been as simple as a rule book? I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them. Captain, why are we out here chasing comets? Now, how the hell do we defeat an enemy that knows us better than we know ourselves? Some days you get the bear, and some days the bear gets you. Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Fear is the true enemy, the only enemy. We have a saboteur aboard. For an android with no feelings, he sure managed to evoke them in others. Is it my imagination, or have tempers become a little frayed on the ship lately? Talk about going nowhere fast. Commander William Riker of the Starship Enterprise. We know you're dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf. Some days you get the bear, and some days the bear gets you.</p>
	</body>
	</html>
	@import 'compass';
	@import 'modular-scale';
	@import 'breakpoint';

	//Breakpoint related variables
	$breakpoint-to-ems: true;
	$bp-750: min-width 750px;

	//https://github.com/chriseppstein/compass/pull/1352
	@mixin use-baseline($new-base-size, $new-line-height) {
	// Save the baseline context
	$initial-font-size: $base-font-size;
	$initial-line-height: $base-line-height;
	// Apply the new context
	$base-font-size: $new-base-size;
	$base-line-height: $new-line-height;
	@content;
	// Reapply the initial context
	$base-font-size: $initial-font-size;
	$base-line-height: $initial-line-height;
	}

	$base-size: 20px 44px;
	$ratio: golden();

	$mod0: ms(0);
	$mod1: ms(1);
	$mod2: ms(2);
	$mod3: ms(3);
	$mod4: ms(4);
	$mod5: ms(5);
	$mod6: ms(6);
	$mod7: ms(7);
	$mod8: ms(8);
	$mod9: ms(9);
	$mod10: ms(10);
	$mod11: ms(11);
	$mod12: ms(12);

	$base-size: 26px 50px;
	$ratio: fifth();

	$mood0: ms(0);
	$mood1: ms(1);
	$mood2: ms(2);
	$mood3: ms(3);
	$mood4: ms(4);
	$mood5: ms(5);
	$mood6: ms(6);
	$mood7: ms(7);
	$mood8: ms(8);
	$mood9: ms(9);
	$mood10: ms(10);
	$mood11: ms(11);
	$mood12: ms(12);


	$vr-base-font-size: 20px;
	$vr-base-line-height:28px;

	$vr-750-font-size: 26px;
	$vr-750-line-height:37px;
	$vr-750: $vr-750-font-size $vr-750-line-height;

	$base-font-size: $vr-base-font-size;
	$base-line-height: $vr-base-line-height;


	@include establish-baseline($mod0);
	@include breakpoint($bp-750) {
	@include use-baseline($vr-750...) {
	@include establish-baseline($mood0);
	}
	}

	span {
	&:after{
	content:"#{$mod2}";
	}
	}

	span {
	&:after{
	content:"#{$mood2}";
	}
	}

	h1 {
	@include adjust-font-size-to($mod2);
	@include breakpoint($bp-750) {
	@include use-baseline($vr-750...) {
	@include adjust-font-size-to($mood2);
	}
	}
	}

	p {
	@include adjust-font-size-to($mod0);
	@include breakpoint($bp-750) {
	@include use-baseline($vr-750...) {
	@include adjust-font-size-to($mood0);
	}
	}
	}