1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-12 08:05:18 +01:00
blog/_src/_assets/styl/layout.styl

81 lines
1.6 KiB
Stylus
Raw Normal View History

2015-08-10 00:48:31 +02:00
//
// 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
2015-08-20 20:06:14 +02:00
.site__document
padding-top: ($line-height-computed*2)
@media $breakpoint2
padding-top: ($line-height-computed*4)
2015-08-10 00:48:31 +02:00
// 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)
2015-08-20 20:06:14 +02:00
@media $breakpoint1
2015-11-20 22:35:41 +01:00
transform: translate3d(0,-200px,0)
@media $breakpoint2
2015-08-20 20:06:14 +02:00
transform: translate3d(0,-160px,0)
2015-11-28 01:19:31 +01:00
.has-menu-open &
transform: translate3d(0,0,0)
2015-08-10 00:48:31 +02:00
@media only screen and (min-width: 40.625em) and (min-height: 650px)
2015-08-18 20:55:30 +02:00
.site
2015-08-10 00:48:31 +02:00
position: relative
.site__document
@extend .transition
position: relative
z-index: 2
margin-top: 80px
2015-08-18 22:45:30 +02:00
margin-bottom: 420px
transform: translate3d(0,0,0)
2015-08-10 00:48:31 +02:00
2015-11-28 01:19:31 +01:00
.has-menu-open &
transform: translate3d(0,140px,0)
2015-08-10 00:48:31 +02:00
2015-08-18 20:55:30 +02:00
.site__header,
.site__footer
2015-08-10 00:48:31 +02:00
position: fixed
border: none
2015-08-18 22:45:30 +02:00
width: 100%
2015-08-10 00:48:31 +02:00
2015-08-18 20:55:30 +02:00
.site__header
2015-08-10 00:48:31 +02:00
z-index: 1
top: 0
border: none
2015-08-18 20:55:30 +02:00
.site__footer
2015-08-10 00:48:31 +02:00
z-index: 0
bottom: 0
box-shadow: none
2015-11-28 01:19:31 +01:00
.has-menu-open &
2015-08-10 00:48:31 +02:00
hide()