//** Vertical Rhythm **//
// By Chris Eppstein, living here on a temporary basis


// The IE font ratio is a fact of life. Deal with it.
!ie_font_ratio = 16px / 100%
 
// The base line height is the basic unit of line hightness.
!base_line_height ||= 18px
 
// The base font size
!base_font_size ||= 12px
 
// The basic unit of font rhythm
!base_rhythm_unit= !base_line_height / !base_font_size * 1em
 
// The leader is the amount of whitespace in a line.
// It might be useful in your calculations
!base_leader = (!base_line_height - !base_font_size) * 1em / !base_font_size
 
// The half-leader is the amount of whitespace above and below a line.
// It might be useful in your calculations
!base_half_leader = !base_leader / 2
 
// Establishes a font baseline for the given font-size in pixels
=establish-baseline(!font_size = !base_font_size)
  body
    font-size= !font_size / !ie_font_ratio
    +adjust-leading-to(1, !font_size)
  html>body
    font-size= !font_size
 
// Show a background image that can be used to debug your alignments.
=debug-vertical-alignment
  background: url(underline.png)
 
// Adjust a block to have a different font size and leading to maintain the rhythm.
// !lines is a number that is how many times the baseline rhythm this
// font size should use up. Does not have to be an integer, but it defaults
// to the smallest integer that is large enough to fit the font.
=adjust-font-size-to(!font_size, !lines = ceil(!font_size / !base_line_height))
  font-size= 1em * !font_size / !base_font_size
  +adjust-leading-to(!lines, !font_size)
 
=adjust-leading-to(!lines, !font_size = !base_font_size)
  line-height= 1em * !lines * !base_line_height / !font_size
 
// Apply leading whitespace
=leader(!lines = 1, !font_size = !base_font_size)
  margin-top= 1em * !lines * !base_line_height / !font_size
 
// Apply trailing whitespace
=trailer(!lines = 1, !font_size = !base_font_size)
  margin-bottom= 1em * !lines * !base_line_height / !font_size
 
// Apply a border width without messing up the rhythm
=border(!side, !width = 1px, !lines = 1, !font_size = !base_font_size)
  border-#{!side}-width= 1em * !width / !font_size
  padding-#{!side}= (1em / !font_size) * ((!lines * !base_line_height) - !width)
 
=top-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +border("top", !width, !lines, !font_size)
 
=bottom-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +border("bottom", !width, !lines, !font_size)