Hi,

Just trying to use 7.x-5.4 and there is one mixin that I don't understand where is the value coming from.

So under .scss there is lines

// _init.scss
$h1-font-size: 2    * $base-font-size;
$h2-font-size: 1.5  * $base-font-size;
$h3-font-size: 1.17 * $base-font-size;

...
//_normalize.scss
h1 {
  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
  @include adjust-font-size-to( $h1-font-size );

  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
  @include leader(1, $h1-font-size);
  @include trailer(1, $h1-font-size);
}
h2 {
  @include adjust-font-size-to( $h2-font-size );
  @include leader(1, $h2-font-size);
  @include trailer(1, $h2-font-size);
}
h3 {
  @include adjust-font-size-to( $h3-font-size );
  @include leader(1, $h3-font-size);
  @include trailer(1, $h3-font-size);
}
...

Then the generated css is as

h1 {
  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
  font-size: 2em;
  line-height: 1.5em; /* 3rem / 2em = 1.5em */
  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
  margin-top: 0.75em; /* 1.5rem / 2em = .75em */
  margin-bottom: 0.75em;
}
h2 {
  font-size: 1.5em;
  line-height: 2em; /* 3rem / 1.5em = 2em */
  margin-top: 1em; /* 1.5rem / 1.5em = 1em */
  margin-bottom: 1em;
}
h3 {
  font-size: 1.17em;
  line-height: 1.28205em; /* 1.5rem / 1.17em = 1.28205em */
  margin-top: 1.28205em;
  margin-bottom: 1.28205em;
}

My question is under h1 and h2 line-height, the calculation is 3rem / 2em and 3rem / 1.5em but then for the h3 the calculation is 1.5rem / 1.17em. Where is the 3rem for h1 and h2 coming from? The same question where is 1.5rem for h3 coming from?

Can't figure it out.

Thanks

Comments

lukasss’s picture

I also want to understand it

JohnAlbin’s picture

Status: Active » Fixed

1.5rem is the vertical rhythm unit. We want 2 lines of vertical rhythm, so its 3rem. The comments aren't very good in the CSS.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.