milligram/src/_Typography.sass
Nate Berkopec 4bdd426775 Change header sizes
+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
2016-12-14 14:16:09 -07:00

64 lines
797 B
Sass
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Typography
//
b,
strong
font-weight: bold
p
margin-top: 0
h1,
h2,
h3,
h4,
h5,
h6
font-weight: 300
letter-spacing: -.1rem
margin-bottom: 2.0rem
margin-top: 0
h1
line-height: 1.2
h2
line-height: 1.25
h3
line-height: 1.3
h4
letter-spacing: -.08rem
line-height: 1.35
h5
letter-spacing: -.05rem
line-height: 1.5
h6
letter-spacing: 0
line-height: 1.4
// Larger than mobile screen
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
h1
font-size: 4.8rem
h2
font-size: 3.6rem
h3
font-size: 2.4rem
h4
font-size: 2.1rem
h5
font-size: 1.8rem
h6
font-size: 1.4rem