Use relative size for fonts and line-height

[DirtyF]

Fix #102

[ashmaroli]

@DirtyF I think it would be better if we create a mixin for relative font sizes.. and related parameters ..
whatsay?

[DirtyF]

@ashmaroli I implemented your suggestion, we could also abstract values and use a typographic modular scale and make it easier for users to change typography for instance, but I don't feel like it's the intent of this theme.

[ashmaroli]

I think you misunderstood my intent.
The reason I wanted this to be handled by a mixin was to avoid having to calculate and supply ratios...

I was thinking more along the lines of:
e.g.:

$base-font-size: 16; /* no units */

@mixin font-size($size) {
  font-size: 0px + $size; /* fallback for older-browsers */
  font-size: 0rem + $size / $base-font-size;
}

body {
  font-size: 0px + $base-font-size;
}

/* use mixin on all other elements. */
h1 {
  @include font-size(32) /* just the size in px. no units */
}

will yield:

h1 {
  font-size: 32px; /* fallback for older-browsers */
  font-size: 2rem;
}

[DirtyF]

yes I saw that codepen tutorial, we can go with rem unit, but my intent here was to gently move to a modular scale.

[ashmaroli]

I was not aware of the modular scale even though it seems to have been around for years. Thank you for the links.
While I feel having to come up with the appropriate ratio is an added complexity for the user planning to customize the stylesheets, I'll leave it to your judgement.

[benbalter]

@DirtyF which approach is better? This approach or the approach taken in #78? Not strongly opinionated. If you think this is the better approach, please resolve the merge conflicts.

[DirtyF]

@benbalter #78 was a good start, this PR applies the same principle to other font-size declarations. The mixin is just the way to keep it DRY.

[benbalter]

@jekyllbot: merge +minor.

Thanks @DirtyF!