Skip to content

Instantly share code, notes, and snippets.

@Rarst
Created July 14, 2017 16:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Rarst/b4651b4f3116837853897ccff9f52c26 to your computer and use it in GitHub Desktop.
Save Rarst/b4651b4f3116837853897ccff9f52c26 to your computer and use it in GitHub Desktop.
Less mixin to calculate vertical rhythm styling for headings [in Bootstrap]. Don’t ask me how this works because I don’t remember and this made my brain hurt enough.
.heading-line-height( @line-height ) when ( @line-height < 1 ) {
line-height: unit(@line-height * 2, em);
}
.heading-line-height( @line-height ) when ( @line-height >= 1 ) {
line-height: unit(@line-height, em);
}
.heading-rhythm ( @font-size-base, @font-size-increase ) {
@heading-font-size: @font-size-base * @font-size-increase;
@paragraph-line-height: @font-size-base * @line-height-base;
@em-ratio: @paragraph-line-height / @heading-font-size;
font-size: unit( @font-size-increase, em );
.heading-line-height( @em-ratio );
margin-top: unit( @em-ratio, em ) / 2;
margin-bottom: unit( @em-ratio, em ) / 2;
}
.headings-rhythm( @font-size-base ) {
h1, .h1, header a.brand {
.heading-rhythm( @font-size-base, unit( @font-size-h1 ) )
}
h2, .h2 {
.heading-rhythm( @font-size-base, unit( @font-size-h2 ) )
}
h3, .h3 {
.heading-rhythm( @font-size-base, unit( @font-size-h3 ) )
}
h4, .h4 {
.heading-rhythm( @font-size-base, unit( @font-size-h4 ) )
}
h5, .h5 {
.heading-rhythm( @font-size-base, unit( @font-size-h5 ) )
}
h6, .h6 {
.heading-rhythm( @font-size-base, unit( @font-size-h6 ) )
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment