blog/_src/_assets/styl/typography.styl

//
// kremalicious3
// --------------
// Typography
//


// Base
/////////////////////////////////////

body
    font-family: $font-family-base
    font-weight: $font-weight-base
    font-size: $font-size-base
    line-height: $line-height-base
    color: $font-color-base
    word-wrap: break-word
    text-rendering: optimizeLegibility;
    // Controversial! But prevents text flickering in
    // Safari/Firefox when animations are running
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: 'liga', 'kern';

    @media $breakpoint3
        font-size: $font-size-large
        line-height: $line-height-large

p,
ul,
ol
    margin: 0 0 $line-height-computed


// Headings
/////////////////////////////////////

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6
    font-family: $headings-font-family
    font-weight: $headings-font-weight
    line-height: $headings-line-height
    color: $headings-color

h1, .h1,
h2, .h2
    margin-top: ($line-height-computed*2)
    margin-bottom: ($line-height-computed*2)

h3, .h3
h4, .h4,
h5, .h5,
h6, .h6
    margin-top: $line-height-computed
    margin-bottom: $line-height-computed

h1, .h1
    font-size: $font-size-h1-small
    @media $breakpoint1
        font-size: $font-size-h1
    @media $breakpoint3
        font-size: $font-size-h1-large

h2, .h2
    font-size: $font-size-h2-small
    @media $breakpoint1
        font-size: $font-size-h2
    @media $breakpoint3
        font-size: $font-size-h2-large

h3, .h3
    font-size: $font-size-h3-small
    @media $breakpoint1
        font-size: $font-size-h3
    @media $breakpoint3
        font-size: $font-size-h3-large

h4, .h4
    font-size: $font-size-h4-small
    @media $breakpoint1
        font-size: $font-size-h4
    @media $breakpoint3
        font-size: $font-size-h4-large

h5, .h5
    font-size: $font-size-h5
    @media $breakpoint3
        font-size: $font-size-h5-large

h6, .h6
    font-size: $font-size-h6
    @media $breakpoint3
        font-size: $font-size-h6-large


// Links
/////////////////////////////////////

a
    color: $link-color
    text-decoration: none
    transition: color .2s ease-in-out

    &:hover,
    &:focus
        outline: 0
        color: $link-color-hover

    &:active
        transition: none
        color: darken($link-color, 30%)

    h1 &,
    h2 &,
    h3 &
        color: $headings-color


// Lists
/////////////////////////////////////

ul,
ol
    margin-top: 0
    margin-bottom: $line-height-computed
    padding-left: $line-height-computed*2

    > li
        margin-bottom: ($line-height-computed/2)
        position: relative

ol
    counter-reset: ol-counter
    list-style: none

    li
        &:before
            @extend .textcenter
            position: absolute
            left: -($line-height-computed*2)
            top: -1px
            content: counter(ol-counter)'.'
            counter-increment: ol-counter
            color: $text-color-light
            font-style: italic
            width: $font-size-base
            display: block
            user-select: none

ul,
ol
    ul,
    ol
        margin-bottom: 0

// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
list-unstyled()
    padding-left: 0
    list-style: none
    display: block

.list-unstyled
    list-unstyled()

nav ul,
nav ol
    @extend .list-unstyled

// Inline turns list items into inline-block
.list-inline
    @extend .list-unstyled

    > li
        display: inline-block
        padding-left: 5px
        padding-right: 5px

        &:first-child
            padding-left: 0


// Inline typography
/////////////////////////////////////

p, li
    hyphens: auto

b,
strong,
.bold
    font-weight: 700
    font-style: normal

em,
.italic
    font-style: italic

cite
    font-style: normal

hr
    @extend .divider-bottom
    border: 0
    margin-bottom: ($line-height-computed*2)

.small
    font-size: $font-size-small

.mini
    font-size: $font-size-small

// Quotes
/////////////////////////////////////

blockquote,
blockquote > p
    @extend .italic
    color: lighten($text-color, 15%)

blockquote
    padding-left: 25px
    margin: 0 0 $line-height-computed
    position: relative
    padding-left: 20px

    @media $breakpoint1
        padding-left: 40px

    @media $breakpoint3
        padding-left: 60px

    // quotation marks
    &:before
        content: "“"
        font-size: 300%
        color: lighten($text-color, 40%)
        position: absolute
        left: -10px
        top: -20px

        @media $breakpoint1
            left: 0

        @media $breakpoint3
            top: -30px

    p:last-child
        margin-bottom: 0


// Selection
/////////////////////////////////////

::-moz-selection { background: #2e4f5c; color: #fff; }
::selection { background: #2e4f5c; color: #fff; }