mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-11 23:55:16 +01:00
74 lines
1.3 KiB
Stylus
74 lines
1.3 KiB
Stylus
//
|
|
// 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
|
|
top: 0
|