mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 00:55:16 +01:00
75 lines
1.5 KiB
Stylus
75 lines
1.5 KiB
Stylus
|
//
|
||
|
|
// kremalicious3
|
||
|
|
// --------------
|
||
|
|
// Header
|
||
|
|
//
|
||
|
|
|
||
|
|
// Topbar
|
||
|
|
/////////////////////////////////////
|
||
|
|
|
||
|
|
.topbar
|
||
|
|
@extend .clearfix
|
||
|
|
background: $body-bg
|
||
|
|
border-bottom: 1px solid rgba(255,255,255,.7)
|
||
|
|
box-shadow: inset 0 1px 4px rgba($brand-dark, .2), inset 0 -1px 4px rgba($brand-dark, .2)
|
||
|
|
|
||
|
|
.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
|