1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 10:08:50 +02:00
blog/_src/_assets/styl/header.styl

74 lines
1.3 KiB
Stylus
Raw Normal View History

2014-07-12 21:22:47 +02:00
//
// kremalicious3
// --------------
// Header
//
// Topbar
/////////////////////////////////////
.topbar
@extend .clearfix
background: $body-bg
.row
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
position: relative
// Logo
/////////////////////////////////////
.logo
display: block
background-image: url('../img/logo.png')
background-repeat: no-repeat
background-position: left top
width: 47px
height: 31px
@media $breakpoint2
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
// Banner
/////////////////////////////////////
.banner
@extend .alignleft
@media $breakpoint2
margin-left: -54px
.banner-title
margin-top: .1em
margin-bottom: 0
// display toned down logo
// by default
@extend .logo
.banner-logo
@extend .ir
// 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
2015-06-15 01:41:53 +02:00
top: 0