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);