Responsive heading sizes

Created by: bjorn-ali-goransson

Okay, this one's seriously useful: Pleasant heading sizes in all devices (the H1 is a little too H1 on a mobile)

(10% smaller headings in each mode, except for xs, which is 20% smaller than sm)

.responsive-headings(@tag-name){
  @selector: ~"@{tag-name}, .@{tag-name}";
  @size-variable: ~"font-size-@{tag-name}";

  @{selector} {
    font-size: @@size-variable * 0.6;
  }

  @media (min-width: @screen-sm-min) {
    @{selector} {
      font-size: @@size-variable * 0.8;
    }
  }
  @media (min-width: @screen-md-min) {
    @{selector} {
      font-size: @@size-variable * 0.9;
    }
  }
  @media (min-width: @screen-lg-min) {
    @{selector} {
      font-size: @@size-variable;
    }
  }
}

.responsive-headings(h1);
.responsive-headings(h2);
.responsive-headings(h3);
.responsive-headings(h4);
.responsive-headings(h5);
.responsive-headings(h6);