AverageMarcus/milligram
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improvement in headings size

Browse Source
This commit is contained in:
CJ Patoilo 2017-01-25 05:58:14 -03:00
parent eeee3da483
commit ad1ab12354
No known key found for this signature in database
GPG Key ID: BB04A2FB1C21BF9D
2 changed files with 12 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/_Typography.sass
View File

@ -21,43 +21,28 @@ h6
margin-top: 0 margin-top: 0
h1 h1
font-size: 4.6rem
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: 2.8rem
line-height: 1.3 line-height: 1.3
h4 h4
font-size: 2.2rem
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.5rem
letter-spacing: 0 letter-spacing: 0
line-height: 1.4 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

12
test/index.html
View File

@ -26,12 +26,12 @@
<div class="example"> <div class="example">
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 5.0rem (50px)</span></h1> <h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 4.6rem (46px)</span></h1>
<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 4.2rem (42px)</span></h2> <h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 3.6rem (36px)</span></h2>
<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 3.6rem (36px)</span></h3> <h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 2.8rem (28px)</span></h3>
<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 3.0rem (30px)</span></h4> <h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 2.2rem (22px)</span></h4>
<h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 2.4rem (24px)</span></h5> <h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 1.8rem (18px)</span></h5>
<h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.5rem (15px)</span></h6> <h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.6rem (16px)</span></h6>
</div> </div>
<div class="column"> <div class="column">
<p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p> <p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.</p>