m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00
Code

font size & line-height cleanup, responsive typography, fixes #16

Browse Source
This commit is contained in:
Matthias Kretschmann 2014-07-21 21:03:34 +02:00
parent 88381fc19d
commit 3b10d94617
4 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_src/assets/styl/footer.styl
View File

@ -6,7 +6,6 @@
.footer .footer
@extend .textcenter @extend .textcenter
background: rgba($brand-dark, .05)
border-top: 1px solid rgba(255,255,255,.7) border-top: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px rgba($brand-dark, .2) box-shadow: inset 0 1px 4px rgba($brand-dark, .2)
@ -42,9 +41,7 @@
.btn .btn
@extend .textcenter @extend .textcenter
width: 48px width: 48px
height: 40px padding: $padding-small-vertical
line-height: 34px
padding: 0
margin: 0 margin: 0
display: inline-block display: inline-block
color: $text-color-light color: $text-color-light

6
_src/assets/styl/page-about.styl
View File

@ -30,15 +30,15 @@
.intro-2 .intro-2
@extend .divider-bottom @extend .divider-bottom
@media $breakpoint2 @media $breakpoint2
max-width: 50% max-width: 60%
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
.intro-1 .intro-1
font-size: 2em @extend .h3
color: $text-color-light color: $text-color-light
.intro-2 .intro-2
font-size: 1.2em font-size: $font-size-large
letter-spacing: .01em letter-spacing: .01em
color: $text-color-dimmed color: $text-color-dimmed

19
_src/assets/styl/typography.styl
View File

@ -16,12 +16,9 @@ body
color: $font-color-base color: $font-color-base
word-wrap: break-word word-wrap: break-word
@media $breakpoint1
line-height: $line-height-computed
@media $breakpoint3 @media $breakpoint3
font-size: 125% font-size: $font-size-large
line-height: 1.6em line-height: $line-height-large
p, p,
ul, ul,
@ -53,21 +50,33 @@ h6, .h6
h1, .h1 h1, .h1
font-size: $font-size-h1 font-size: $font-size-h1
@media $breakpoint3
font-size: $font-size-h1-large
h2, .h2 h2, .h2
font-size: $font-size-h2 font-size: $font-size-h2
@media $breakpoint3
font-size: $font-size-h2-large
h3, .h3 h3, .h3
font-size: $font-size-h3 font-size: $font-size-h3
@media $breakpoint3
font-size: $font-size-h3-large
h4, .h4 h4, .h4
font-size: $font-size-h4 font-size: $font-size-h4
@media $breakpoint3
font-size: $font-size-h4-large
h5, .h5 h5, .h5
font-size: $font-size-h5 font-size: $font-size-h5
@media $breakpoint3
font-size: $font-size-h5-large
h6, .h6 h6, .h6
font-size: $font-size-h6 font-size: $font-size-h6
@media $breakpoint3
font-size: $font-size-h6-large
// Links // Links

17
_src/assets/styl/variables.styl
View File

@ -34,9 +34,9 @@ $brand-grey-light = #96a6ad
///////////////////////////////////// /////////////////////////////////////
$font-size-base = 18px $font-size-base = 18px
$font-size-large = ceil($font-size-base * 1.35) $font-size-large = ceil($font-size-base * 1.35) // ~24px
$font-size-small = ceil($font-size-base * 0.8) $font-size-small = ceil($font-size-base * 0.8) // ~14px
$font-size-mini = ceil($font-size-base * 0.7) $font-size-mini = ceil($font-size-base * 0.7) // ~12px
$font-size-h1 = floor(($font-size-base * 2.75)) $font-size-h1 = floor(($font-size-base * 2.75))
$font-size-h2 = floor(($font-size-base * 2)) $font-size-h2 = floor(($font-size-base * 2))
@ -45,9 +45,16 @@ $font-size-h4 = $font-size-large
$font-size-h5 = $font-size-base $font-size-h5 = $font-size-base
$font-size-h6 = $font-size-small $font-size-h6 = $font-size-small
$line-height-base = 1.5 $font-size-h1-large = floor(($font-size-large * 2.75))
$font-size-h2-large = floor(($font-size-large * 2))
$font-size-h3-large = ceil(($font-size-large * 1.75))
$font-size-h4-large = ceil(($font-size-large * 1.25))
$font-size-h5-large = $font-size-large
$font-size-h6-large = $font-size-base
$line-height-base = 1.4444444444 // 26px/18px
$line-height-computed = floor($font-size-base * $line-height-base) $line-height-computed = floor($font-size-base * $line-height-base)
$line-height-large = 1.7142857143 $line-height-large = 1.5 // 36px/24px
$line-height-small = 1.1428571429 $line-height-small = 1.1428571429
$font-family-base = 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif $font-family-base = 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif