Modular Scale Demo for Rebecca

ms-scale

@charset "utf-8";
@import "compass";
@import "compass/reset";
@import "modular-scale";

$ratio: golden();
$base-size: 1rem;
$text-color:rgb(50,60,50);

html {
  font-family: "lemonde-journal", "Georgia", "Times New Roman", serif;
  font-size:16px;
  text-rendering: optimizeLegibility;
}

body {
  color:$text-color; 
  text-rendering: optimizeLegibility;
  width: ms(8);
  margin:0 auto;
}

h1 { 
  font-size: ms(1);
  line-height:ms(3);
  text-transform: capitalize;
  font-weight:bold;
}

h2 { 
  text-transform: uppercase;
  font-size: ms(0);
  line-height: ms(1);
  margin-bottom: ms(0);
  color: #ff4245;
}

h3 { 
  font-size: ms(0);
  line-height: ms(1);
  font-weight:bold;
  margin:ms(1) 0;
}

h4 { 
  font-size: ms(0);
  line-height: ms(1);
  font-style:italic;
}

 
 p {
   font-size: ms(0);
   line-height: ms(1);
   margin-bottom: ms(0);
 }
 
 blockquote {
   margin: ms(1);
   font-style:italic;
   color:lighten($text-color, 30%);
 }
 
 ol {
   list-style-type: decimal;
 }
 
 ol, ul {
   font-size: ms(0);
   line-height: ms(1);
 }
 
 ul {
   list-style-type: square;
 }
 
 
 strong {
   font-weight:bold;
 }
 
 em {
   font-style:italic;
 }

Nice, I recently did a ton of this by hand, didn't realize there was a sass module for it. -__-