blog/_src/_assets/styl/typography.styl

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


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

// Body reset
html
    font-size: $font-size-root

    @media $breakpoint3
        font-size: $font-size-root-lg

body
    font-family: $font-family-base
    font-weight: $font-weight-base
    font-size: $font-size-base
    line-height: $line-height
    color: $font-color-base
    background: $body-bg

    // handling long text, like URLs
    overflow-wrap: break-word
    word-wrap: break-word
    word-break: 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'

    letter-spacing: -0.01em

    .wf-active &
        letter-spacing: normal

p,
ul,
ol
    margin: 0 0 $spacer


// Reset fonts for relevant elements
/////////////////////////////////////

input,
button,
select,
textarea
    font-family: inherit
    font-size: inherit
    line-height: inherit


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

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6
    font-family: $headings-font-family
    line-height: $headings-line-height
    color: $headings-color
    font-weight: 500
    letter-spacing: -.09em

    .wf-active &
        font-weight: $headings-font-weight
        letter-spacing: normal

h1, .h1,
h2, .h2
    margin-top: ($spacer*2)
    margin-bottom: ($spacer*2)

h3, .h3
h4, .h4,
h5, .h5,
h6, .h6
    margin-top: $spacer
    margin-bottom: $spacer

h1, .h1
    font-size: $font-size-h2
    @media $breakpoint1
        font-size: $font-size-h1

h2, .h2
    font-size: $font-size-h3
    @media $breakpoint1
        font-size: $font-size-h2

h3, .h3
    font-size: $font-size-h4
    @media $breakpoint1
        font-size: $font-size-h3

h4, .h4
    font-size: $font-size-h5
    @media $breakpoint1
        font-size: $font-size-h4

h5, .h5
    font-size: $font-size-h6
    @media $breakpoint1
        font-size: $font-size-h5

h6, .h6
    font-size: $font-size-h6


// 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: $spacer
    padding-left: ($spacer * 1.5)
    list-style: none

    li
        position: relative
        &:before
            position: absolute
            left: -($spacer * 1.5)
            top: -1px
            color: $text-color-light
            user-select: none

ul
    li
        &:before
            content: " \2015" // horizontal bar: ― ―

ol
    counter-reset: ol-counter

    li
        &:before
            content: counter(ol-counter)'.'
            counter-increment: ol-counter

    ul li:before
        display: 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

    li:before
        display: none

.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: ($spacer*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 $spacer
    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; }