blog/_src/_assets/styl/_kremalicious/header.styl

//
// kremalicious3
// --------------
// Header
//

.site__header
    background: $body-bg
    margin-top: ($spacer/2)
    margin-bottom: ($spacer/2)

    @media $screen-sm
        margin-top: $spacer
        margin-bottom: $spacer

    .grid
        @extend .breakoutviewport
        padding-left: $spacer
        padding-right: $spacer
        position: relative

        @media $screen-md
            padding-left: 0
            padding-right: 0

        > .banner,
        > .nav-main
            padding-top: 0



// Logo
/////////////////////////////////////

.logo
    display: block
    background-image: url('../img/logo.png')
    background-repeat: no-repeat
    background-position: left top
    width: 47px
    height: 31px

    @media $screen-sm
        width: 183px

    @media $highDPI
        background-image: url('../img/logo@2x.png')
        background-size: 183px 62px

    @media $highDPI_3x
        background-image: url('../img/logo@3x.png')
        background-size: 183px 62px

.header__title
    margin: 0
    // display toned down logo
    // by default
    @extend .logo

.header__logo
    @extend .ir
    // repeat logo
    // but display hover version
    @extend .logo
    background-position: left bottom

    // hide by default
    opacity: 0
    // show smooooothly on hover
    &:hover
        opacity: 1

    &:active
        top: 0