zoxon
3/13/2015 - 4:34 AM

typography_px.styl

base-font-size: 16px;
base-line-height: 29px;
measure: 718px;

h1-font-size: 68px;
h1-line: 29px;
h1-lines: 3;
h1-line-height: h1-line * h1-lines;
h1-margin-top: 2 * h1-line;
h1-margin-bottom: 1 * h1-line;

h2-font-size: 42px;
h2-line: 29px;
h2-lines: 2;
h2-line-height: h2-line * h2-lines;
h2-margin-top: 2 * h2-line;
h2-margin-bottom: 1 * h2-line;

h3-font-size: 26px;
h3-line: 29px;
h3-lines: 1;
h3-line-height: h3-line * h3-lines;
h3-margin-top: 1 * h3-line;
h3-margin-bottom: 1 * h3-line;

h4-font-size: 16px;
h4-line: 29px;
h4-lines: 1;
h4-line-height: h4-line * h4-lines;
h4-margin-top: 1 * h4-line;
h4-margin-bottom: 1 * h4-line;

// Variables are rounded to pixels
// It's safe to multiply with integers
// eg. h1 {margin: 2*h1-line 0;}
// The grid will stay aligned