mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 09:05:17 +01:00
Matthias Kretschmann
384b364a63
- switch to rem based typography - switch to rem based spacing - responsive typography through root font size change
86 lines
1.6 KiB
Stylus
86 lines
1.6 KiB
Stylus
//
|
|
// 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: ($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),0)
|
|
|
|
@media $breakpoint2
|
|
transform: translate3d(0,-($spacer*5),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 $breakpoint2 and (min-height: 650px)
|
|
.site
|
|
position: relative
|
|
|
|
.site__document
|
|
@extend .transition
|
|
position: relative
|
|
z-index: 2
|
|
margin-bottom: 420px
|
|
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()
|