mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-16 01:55:18 +01:00
75 lines
1.4 KiB
Stylus
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
|