Change header sizes

+ Remove header size adjustment on mobile
+ Header sizes follow the traditional typographic scale, making larger heading sizes easier to differentiate visually.
This commit is contained in:
Nate Berkopec 2016-12-14 14:16:09 -07:00 committed by GitHub
parent 7830ade726
commit 4bdd426775

View File

@ -21,29 +21,23 @@ h6
margin-top: 0 margin-top: 0
h1 h1
font-size: 4.0rem
line-height: 1.2 line-height: 1.2
h2 h2
font-size: 3.6rem
line-height: 1.25 line-height: 1.25
h3 h3
font-size: 3.0rem
line-height: 1.3 line-height: 1.3
h4 h4
font-size: 2.4rem
letter-spacing: -.08rem letter-spacing: -.08rem
line-height: 1.35 line-height: 1.35
h5 h5
font-size: 1.8rem
letter-spacing: -.05rem letter-spacing: -.05rem
line-height: 1.5 line-height: 1.5
h6 h6
font-size: 1.6rem
letter-spacing: 0 letter-spacing: 0
line-height: 1.4 line-height: 1.4
@ -51,19 +45,19 @@ h6
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works @media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
h1 h1
font-size: 5.0rem font-size: 4.8rem
h2 h2
font-size: 4.2rem
h3
font-size: 3.6rem font-size: 3.6rem
h4 h3
font-size: 3.0rem
h5
font-size: 2.4rem font-size: 2.4rem
h4
font-size: 2.1rem
h5
font-size: 1.8rem
h6 h6
font-size: 1.5rem font-size: 1.4rem