Replaced <small>'s css with adjust-font-size-to() based solution

JohnAlbin / normalize-scss

This is the Sass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.

https://github.com/JohnAlbin/normalize-scss#latest-versions

MIT License

1.44k stars 254 forks source link

Replaced <small>'s css with adjust-font-size-to() based solution #9

Closed LimeBlast closed 11 years ago

LimeBlast commented 11 years ago

I'm quite new to both compass and vertical rhythm, so I apologise if this isn't the right way to fix this issue, but but I noticed that large amounts of text within the small tag tended to break the vertical rhythm of a page.

After a little bit of research (by reading this article) I came across the adjust-font-size-to mixin. It seemed that this, combined with a little bit of math, based around the $base-font-size variable, and I came up with the attached.

I hope you find it useful.

JohnAlbin commented 11 years ago

Sorry for the delay! I'll take a look at this shortly. Based on your description, this sounds reasonable.

JohnAlbin commented 11 years ago

Actually, the way the small styling is currently set (font-size: 80%;), it will inherit the line-height of the parent element. That means it won't affect the vertical rhythm. I even tested this out and couldn't reproduce the vertical rhythm problems you were describing.

JohnAlbin commented 11 years ago

Feel free to re-open if you can provide steps on how to reproduce this problem. :-)