blog/_src/_assets/styl/layout.styl

//
// kremalicious3
// --------------
// Layout
//

.site__content,
.header__content
.footer__content
    padding: 0 7%
    width: 100%

    @media $breakpoint2
        padding: 0 15%

.container
    max-width: 35em
    margin: 0 auto

.site__document
    padding-top: ($line-height-computed*2)

    @media $breakpoint2
        padding-top: ($line-height-computed*4)


// topbar and footer as fixed
// site background
/////////////////////////////////////

.site__document
    background-color: $page-bg
    border-top: 1px solid rgba(255,255,255,.7)
    border-bottom: 1px solid rgba(255,255,255,.7)
    box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)

    transform: translate3d(0,-200px,0)

    @media $breakpoint1
        transform: translate3d(0,-200px,0)

    @media $breakpoint2
        transform: translate3d(0,-160px,0)

    .has-menu-open &
        transform: translate3d(0,0,0)

.site__footer
    margin-top: -200px;

    @media $breakpoint2
        margin-top: -160px;

    .has-menu-open &
        margin-top: 0

@media only screen and (min-width: 40.625em) and (min-height: 650px)
    .site
        position: relative

    .site__document
        @extend .transition
        position: relative
        z-index: 2
        margin-top: 80px
        margin-bottom: 420px
        transform: translate3d(0,0,0)

        .has-menu-open &
            transform: translate3d(0,140px,0)

    .site__header,
    .site__footer
        position: fixed
        border: none
        width: 100%

    .site__header
        z-index: 1
        top: 0
        border: none

    .site__footer
        z-index: 0
        bottom: 0
        box-shadow: none

        .has-menu-open &
            hide()