mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-01-26 03:14:08 +00:00
137 lines
2.3 KiB
Stylus
137 lines
2.3 KiB
Stylus
@require '_input'
|
|
@require '_button'
|
|
linkColor = #3090de
|
|
textColor = #444
|
|
|
|
body, html
|
|
margin 0
|
|
font 16px 'proxima-nova', 'Helvetica Neue', helvetica, arial, sans-serif
|
|
height 100%
|
|
width 100%
|
|
font-weight 400
|
|
color textColor
|
|
font-smoothing antialiased
|
|
|
|
h1, h2, h3
|
|
margin 0
|
|
margin-bottom 0.5em
|
|
text-shadow 1px 1px 0 rgba(255, 255, 255, 0.15)
|
|
|
|
a
|
|
color linkColor
|
|
text-decoration none
|
|
&:hover
|
|
text-decoration underline
|
|
|
|
.jumbo
|
|
width 100%
|
|
height 100%
|
|
padding-bottom 200px
|
|
background url('../images/jumbo.jpg')
|
|
background-size cover
|
|
display table
|
|
|
|
.jumbo__container
|
|
display table-cell
|
|
vertical-align middle
|
|
text-align center
|
|
padding 0 1em
|
|
h1
|
|
max-width 800px
|
|
margin auto
|
|
@media screen and (max-width: 600px)
|
|
font-size 1.5em
|
|
margin-top 1em
|
|
#logo
|
|
width 80px
|
|
height 80px
|
|
position absolute
|
|
top 1em
|
|
left 1em
|
|
background url('../images/logo.png')
|
|
background-size 100% 100%
|
|
@media screen and (max-width: 600px)
|
|
width 60px
|
|
height 60px
|
|
section
|
|
background #fff
|
|
|
|
.jumbo + section
|
|
margin-top -200px
|
|
|
|
.row
|
|
max-width 800px
|
|
padding 2em 0
|
|
margin auto
|
|
|
|
.invite-form
|
|
position relative
|
|
.btn
|
|
width 40px
|
|
height 32px
|
|
background linkColor
|
|
padding 0
|
|
position absolute
|
|
right 8px
|
|
top 7px
|
|
|
|
border-bottom 2px solid #117280
|
|
color rgba(255, 255, 255, 0.5)
|
|
&:active
|
|
border-bottom 0
|
|
|
|
@keyframes drop
|
|
0%
|
|
transform rotateX(90deg)
|
|
30%
|
|
transform rotateX(45deg)
|
|
45%
|
|
transform rotateX(0deg)
|
|
60%
|
|
transform rotateX(45deg)
|
|
100%
|
|
transform rotateX(0deg)
|
|
|
|
.invite-form--message
|
|
background linkColor
|
|
color #fff
|
|
height 40px
|
|
line-height 40px
|
|
padding 0 0.5em
|
|
margin-top 4px
|
|
transform rotateX(0deg)
|
|
transform-origin 100% 0
|
|
animation drop 0.6s linear
|
|
|
|
.invite-form.has-error
|
|
.invite-form--message
|
|
background rgb(226, 33, 112)
|
|
|
|
.form-container
|
|
margin auto
|
|
margin-top 1em
|
|
padding 0 2em
|
|
box-sizing border-box
|
|
p
|
|
text-align center
|
|
line-height 1.7em
|
|
|
|
footer
|
|
font-size 1.5em
|
|
padding 0.5em
|
|
background textColor
|
|
|
|
i
|
|
margin 0 0.30em
|
|
font-size 1.5em
|
|
color #fff
|
|
|
|
.fader
|
|
position fixed
|
|
bottom 0
|
|
left 0
|
|
width 100%
|
|
height 50px
|
|
background linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 99%,rgba(0,0,0,0.2) 100%)
|
|
pointer-events none
|