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

75 lines
1.4 KiB
Stylus

//
// 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, .link--nounderline
// 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