Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
lukasss CreditAttribution: lukasss commentedI also want to understand it
Comment #2
JohnAlbin1.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.