SCSS: typography.scss

_typography.scss

//----------------------------------------------------------------------------
// typography.scss
// Headings, body text, lists, code, and more 
//----------------------------------------------------------------------------

// ---------------------------------------------------------------------------
// @BODY

p 
{
  margin: 0 0 $baseLineHeight / 2;
  font-family: $baseFontFamily;
  font-size: $baseFontSize;
  line-height: $baseLineHeight;
	  
	  small 
	  {
	    font-size: $baseFontSize - 2;
	    color: $grayLight;
	  }
}

.lead 
{
  margin-bottom: $baseLineHeight;
  font-size: 20px;
  font-weight: 200;
  line-height: $baseLineHeight * 1.5;
}


// ---------------------------------------------------------------------------
// @LINKS

a 
{
  color: $linkColor;
  text-decoration: none;
}
a:hover 
{
  color: $linkColorHover;
  text-decoration: underline;
}

// ---------------------------------------------------------------------------
// @HEADINGS

h1, h2, h3, h4, h5, h6 
{
  margin: 0;
  font-family: $headingsFontFamily;
  font-weight: $headingsFontWeight;
  color: $headingsColor;
  text-rendering: optimizelegibility; // Fix the character spacing for headings
	  
	  small 
	  {
	    font-weight: normal;
	    color: $grayLight;
	  }
}

h1 
{
  font-size: 30 ÷ $baseFontSize; 
  line-height: $baseLineHeight * 2;

	  small 
	  {
	    font-size: 18px;
	  }
}