mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-01-31 04:46:17 +00:00
148 lines
2.4 KiB
Stylus
148 lines
2.4 KiB
Stylus
headerHeight = 400px
|
|
|
|
.header
|
|
background url('/static/images/jumbo.jpg')
|
|
background-position bottom center
|
|
background-size cover
|
|
height headerHeight
|
|
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
|
|
left 90px
|
|
top 40px
|
|
|
|
@media screen and (max-width: 810px)
|
|
left auto
|
|
right auto
|
|
width: 100%
|
|
|
|
a
|
|
display: block;
|
|
max-width: 180px;
|
|
|
|
@media screen and (max-width: 810px)
|
|
margin-left auto
|
|
margin-right auto
|
|
|
|
img
|
|
width: 100%;
|
|
|
|
.header__headline
|
|
display table-cell
|
|
padding 0 1em
|
|
vertical-align middle
|
|
|
|
.header__title
|
|
color #fff
|
|
display inline-block
|
|
font-size 3em
|
|
letter-spacing -1px
|
|
line-height 1.1
|
|
margin auto
|
|
max-width 780px
|
|
text-align center
|
|
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
|
|
|
|
@keyframes spin
|
|
0%
|
|
top 0
|
|
50%
|
|
top -(headerHeight)
|
|
50.0001%
|
|
top headerHeight
|
|
100%
|
|
top 0
|
|
|
|
@keyframes spin2
|
|
0%
|
|
top (headerHeight)
|
|
50%
|
|
top 0
|
|
99.99999%
|
|
top -(headerHeight)
|
|
100%
|
|
top (headerHeight)
|
|
|
|
.header__members
|
|
width 100%
|
|
height 100%
|
|
z-index -1
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
|
|
.member
|
|
margin 0
|
|
border-radius 0
|
|
width (100/18)%
|
|
|
|
@media screen and (min-width: 2000px)
|
|
width 5%
|
|
@media screen and (max-width: 1200px)
|
|
width (100/15)%
|
|
@media screen and (max-width: 810px)
|
|
width 10%
|
|
@media screen and (max-width: 450px)
|
|
width 20%
|
|
|
|
.members
|
|
position absolute
|
|
overflow hidden
|
|
top 0
|
|
left 0
|
|
right 0
|
|
height headerHeight
|
|
animation spin 40s infinite linear
|
|
&:first-child
|
|
z-index 1
|
|
&:last-child
|
|
animation spin2 40s infinite linear
|
|
|