mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
Matthias Kretschmann
384b364a63
- switch to rem based typography - switch to rem based spacing - responsive typography through root font size change
68 lines
1.2 KiB
Stylus
68 lines
1.2 KiB
Stylus
//
|
|
// kremalicious3
|
|
// --------------
|
|
// Header
|
|
//
|
|
|
|
.site__header
|
|
width: 100%
|
|
background: $body-bg
|
|
margin-top: ($spacer/2)
|
|
margin-bottom: ($spacer/2)
|
|
|
|
@media $breakpoint2
|
|
margin-top: $spacer
|
|
margin-bottom: $spacer
|
|
|
|
.grid
|
|
position: relative
|
|
|
|
> .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 $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
|
|
|
|
.header__title
|
|
margin: 0
|
|
// display toned down logo
|
|
// by default
|
|
@extend .logo
|
|
|
|
.header__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
|