1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-25 02:36:16 +01:00
blog/_src/_assets/styl/_kremalicious/layout.styl

86 lines
1.6 KiB
Stylus

//
// kremalicious3
// --------------
// Layout
//
.site__content,
.header__content
.footer__content
padding: 0 $spacer
width: 100%
@media $breakpoint2
padding: 0 ($spacer * 2)
.container
max-width: 35em
margin: 0 auto
.site__document
padding-top: ($spacer*2)
@media $breakpoint2
padding-top: ($spacer*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,-($spacer*6.5),0)
@media $breakpoint2
transform: translate3d(0,-($spacer*5),0)
.has-menu-open &
transform: translate3d(0,0,0)
.site__footer
margin-top: -($spacer*6.5)
@media $breakpoint2
margin-top: 0
.has-menu-open &
margin-top: 0
@media $breakpoint2 and (min-height: 650px)
.site
position: relative
.site__document
@extend .transition
position: relative
z-index: 2
margin-bottom: 30rem
transform: translate3d(0,($spacer*3),0)
.has-menu-open &
transform: translate3d(0,($spacer*8),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()