mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-02-24 14:56:48 +00:00
123 lines
2.2 KiB
Stylus
123 lines
2.2 KiB
Stylus
.header
|
|
background url('../images/jumbo.jpg')
|
|
background-position bottom center
|
|
background-size cover
|
|
height 400px
|
|
overflow hidden
|
|
position relative
|
|
width 100%
|
|
transform translateZ(0)
|
|
|
|
@media screen and (max-width: 1030px)
|
|
height 300px
|
|
|
|
video
|
|
display none
|
|
|
|
.header__container
|
|
background #3E7394
|
|
background linear-gradient(120deg, rgba(#085078, 0.8) 10%, rgba(#85D8CE, 0.7) 90%)
|
|
display table
|
|
height 100%
|
|
text-align center
|
|
vertical-align middle
|
|
width 100%
|
|
|
|
.header__nav
|
|
position absolute
|
|
right 60px
|
|
top 32px
|
|
|
|
@media screen and (max-width: 1030px)
|
|
right 40px
|
|
top 20px
|
|
a
|
|
color white
|
|
font-size 18px
|
|
margin-left 16px
|
|
text-shadow 0 2px 0 rgba(0,0,0,0.1)
|
|
@media screen and (max-width: 1030px)
|
|
display block
|
|
margin-top 5px
|
|
|
|
.header__headline
|
|
display table-cell
|
|
padding 0 1em
|
|
vertical-align middle
|
|
|
|
.header__logo
|
|
background url('../images/logo.png')
|
|
background-size contain
|
|
display inline-block
|
|
height 180px
|
|
margin-right 2em
|
|
vertical-align middle
|
|
width 180px
|
|
|
|
@media screen and (max-width: 1030px)
|
|
height 120px
|
|
margin-right 1.5em
|
|
width 120px
|
|
|
|
@media screen and (max-width: 810px)
|
|
height 80px
|
|
margin 0 0 1.5em
|
|
width 80px
|
|
|
|
.header__title
|
|
color #fff
|
|
display inline-block
|
|
font-size 3em
|
|
letter-spacing -1px
|
|
line-height 1.1
|
|
margin auto
|
|
max-width 780px
|
|
text-align left
|
|
text-shadow 0 2px 0 rgba(#000, 0.1)
|
|
vertical-align middle
|
|
|
|
@media screen and (max-width: 1030px)
|
|
font-size 2em
|
|
max-width 640px
|
|
|
|
@media screen and (max-width: 810px)
|
|
display block
|
|
font-size 1.6em
|
|
max-width 440px
|
|
text-align center
|
|
|
|
@media screen and (max-width: 410px)
|
|
font-size 1.4em
|
|
|
|
a
|
|
color inherit
|
|
text-decoration underline
|
|
|
|
.header__video-bg
|
|
height 100%
|
|
position absolute
|
|
bottom 0
|
|
z-index -2
|
|
|
|
@media (min-aspect-ratio: 1/2)
|
|
width 100%
|
|
height auto
|
|
|
|
.header__members
|
|
z-index -1
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
height 100%
|
|
.member
|
|
margin 0
|
|
border-radius 0
|
|
width (100/18)%
|
|
|
|
@media screen and (max-width: 1200px)
|
|
width (100/15)%
|
|
@media screen and (max-width: 810px)
|
|
width 10%
|
|
@media screen and (min-width: 2000px)
|
|
width 5%
|