mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-02-03 03:47:49 +00:00
390 lines
6.1 KiB
Stylus
390 lines
6.1 KiB
Stylus
linkColor = #3090de
|
|
textColor = #444
|
|
feedWidth = 500px
|
|
footerHeight = 50px
|
|
|
|
@require '_input'
|
|
@require '_button'
|
|
@require '_header'
|
|
@require '_loader'
|
|
|
|
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
|
|
box-sizing border-box
|
|
|
|
h1, h2, h3
|
|
margin 0
|
|
margin-bottom 0.5em
|
|
text-shadow 1px 1px 10px rgba(255,255,255,0.5)
|
|
|
|
h2
|
|
margin-bottom 1em
|
|
|
|
h3
|
|
font-size 1.25em
|
|
|
|
p
|
|
margin-top 1em
|
|
line-height 1.5em
|
|
font-size 16px
|
|
|
|
a
|
|
color linkColor
|
|
text-decoration none
|
|
&:hover
|
|
text-decoration underline
|
|
|
|
.site
|
|
display flex
|
|
min-height 100vh
|
|
flex-direction column
|
|
|
|
.container
|
|
flex 1
|
|
|
|
section
|
|
background #fff
|
|
padding 2em 0
|
|
|
|
.content
|
|
z-index 2
|
|
position relative
|
|
min-height 50vh
|
|
box-sizing border-box
|
|
|
|
@media screen and (max-width: 700px)
|
|
h3
|
|
margin-top 0
|
|
|
|
&.with-feed
|
|
padding-right feedWidth
|
|
|
|
|
|
section:first-child
|
|
box-shadow -1px -1px 1px rgba(0, 0, 0, 0.05)
|
|
border-bottom 1px solid #EEEEEE
|
|
background #FCFCFC
|
|
|
|
.row
|
|
max-width 850px
|
|
margin auto
|
|
overflow auto
|
|
padding 0 2em
|
|
margin-top 2em
|
|
|
|
&:first-child
|
|
margin-top 0
|
|
|
|
.column
|
|
float left
|
|
overflow auto
|
|
padding 0 1em
|
|
box-sizing border-box
|
|
&:first-child
|
|
padding-left 0
|
|
&:last-child
|
|
padding-right 0
|
|
|
|
img:first-child
|
|
max-width 100%
|
|
|
|
.column3-5
|
|
width (100/5*3)%
|
|
|
|
.column2-5
|
|
width (100/5*2)%
|
|
|
|
.column1-2
|
|
width 50%
|
|
|
|
.column
|
|
@media screen and (max-width: 700px)
|
|
width 100%
|
|
float none
|
|
margin-top 1em
|
|
padding 0
|
|
&:first-child
|
|
margin-top 0
|
|
|
|
.form
|
|
.btn
|
|
background linkColor
|
|
border-bottom 2px solid #117280
|
|
color rgba(255, 255, 255, 0.9)
|
|
&.sending
|
|
.btn
|
|
display none
|
|
.invite-form__loader
|
|
display block
|
|
.invite-form
|
|
position relative
|
|
.form__field
|
|
display flex
|
|
flex-flow column-reverse
|
|
margin-bottom 1em
|
|
.invite-form__input
|
|
padding-right 5em
|
|
.input,
|
|
.label
|
|
transition all 0.2s
|
|
.input:placeholder-shown + .label
|
|
max-width 66.66%
|
|
white-space nowrap
|
|
overflow hidden
|
|
text-overflow ellipsis
|
|
transform-origin left bottom
|
|
transform translate(18px, 36px) scale(1.2)
|
|
cursor text
|
|
font-weight 400
|
|
opacity 0.6
|
|
.input:not(:placeholder-shown) + .label,
|
|
.input:focus + .label
|
|
transform translate(0, 0) scale(1)
|
|
cursor pointer
|
|
font-weight 600
|
|
opacity 1
|
|
.input::-webkit-input-placeholder
|
|
opacity 0
|
|
.input:focus::-webkit-input-placeholder
|
|
opacity 1
|
|
.btn
|
|
height 32px
|
|
padding 0 10px
|
|
position absolute
|
|
right 8px
|
|
bottom 7px
|
|
color #fff
|
|
&:active
|
|
border-bottom 0
|
|
.invite-form__loader
|
|
display none
|
|
width 20px
|
|
height 20px
|
|
position absolute
|
|
right 14px
|
|
top 14px
|
|
|
|
.code-of-conduct
|
|
margin-bottom 0
|
|
|
|
.membership-form
|
|
.input
|
|
margin 8px 0px
|
|
.btn
|
|
margin-top 12px
|
|
|
|
.membership-form__loader
|
|
width 70px
|
|
height 70px
|
|
margin auto
|
|
|
|
.stripe-form
|
|
margin 20px 0px
|
|
.name
|
|
margin-top 20px
|
|
text-align left
|
|
display block
|
|
color rgba(0, 0, 0, 0.4)
|
|
|
|
@keyframes drop
|
|
0%
|
|
transform rotateX(90deg)
|
|
30%
|
|
transform rotateX(45deg)
|
|
45%
|
|
transform rotateX(0deg)
|
|
60%
|
|
transform rotateX(45deg)
|
|
100%
|
|
transform rotateX(0deg)
|
|
|
|
.form--message
|
|
background linkColor
|
|
color #fff
|
|
line-height 40px
|
|
padding 0 0.5em
|
|
margin-top 4px
|
|
transform rotateX(0deg)
|
|
transform-origin 100% 0
|
|
animation drop 0.6s linear
|
|
a
|
|
color #fff
|
|
font-weight bold
|
|
.form.has-error
|
|
.form--message
|
|
background rgb(226, 33, 112)
|
|
|
|
.members
|
|
a
|
|
display inline-block
|
|
|
|
.member
|
|
width 30px
|
|
vertical-align middle
|
|
margin 3px
|
|
border-radius 3px
|
|
|
|
.project-image__codestats
|
|
width 143px
|
|
|
|
footer
|
|
padding 0.5em 1em
|
|
z-index 2
|
|
border-top 1px solid #ECECEC
|
|
font-size 1.5em
|
|
display flex
|
|
justify-content space-between
|
|
flex-wrap wrap
|
|
text-align center
|
|
@media screen and (max-width: 940px)
|
|
display block
|
|
i
|
|
margin 0 0.30em
|
|
font-size 1.5em
|
|
|
|
.contacts
|
|
line-height normal
|
|
text-align center
|
|
display flex
|
|
flex-direction column
|
|
justify-content center
|
|
@media screen and (max-width: 940px)
|
|
margin-top 1em
|
|
|
|
.sponsors
|
|
text-align center
|
|
display inline-block
|
|
|
|
.sponsors__label
|
|
color #ccc
|
|
font-size 12px
|
|
text-align left
|
|
|
|
#email
|
|
font-size .85rem
|
|
@media screen and (min-width: 400px)
|
|
font-size 1rem
|
|
|
|
.sponsor
|
|
height 60px
|
|
margin-right 1em
|
|
vertical-align middle
|
|
@media screen and (max-width: 940px)
|
|
margin-top 1em
|
|
|
|
.feed
|
|
width feedWidth
|
|
height 100%
|
|
overflow auto
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
z-index 5
|
|
background #fff
|
|
border-left 1px solid #E5E5E5
|
|
&::-webkit-scrollbar
|
|
display none
|
|
|
|
@media screen and (max-width: 980px)
|
|
.feed
|
|
width 0
|
|
.content.with-feed
|
|
padding-right 0
|
|
|
|
.message
|
|
padding 1em
|
|
padding-right 2em
|
|
border-top 1px solid #E5E5E5
|
|
position relative
|
|
display flex
|
|
|
|
.message__content
|
|
flex 1
|
|
|
|
.message__body
|
|
font-weight 400
|
|
font-size 14px
|
|
line-height 1.4em
|
|
|
|
.message__image
|
|
width 50px
|
|
margin-right 1em
|
|
margin-top 0.5em
|
|
text-align center
|
|
a
|
|
outline 0
|
|
img
|
|
width 50px
|
|
|
|
.message__icon
|
|
margin 6px
|
|
font-size 20px
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
.fa-twitter
|
|
color #55ACEE
|
|
.fa-github
|
|
color #333333
|
|
.fa-slack
|
|
color #DC005D
|
|
|
|
.message__details
|
|
font-size 0.7em
|
|
margin-top 0.5em
|
|
|
|
.message__meta
|
|
margin-left 0.5em
|
|
|
|
.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.15) 99%,rgba(0,0,0,0.15) 100%)
|
|
pointer-events none
|
|
z-index 2
|
|
|
|
.bread
|
|
display table
|
|
table-layout fixed
|
|
width 100%
|
|
.column
|
|
float none
|
|
display table-cell
|
|
vertical-align middle
|
|
|
|
@media screen and (max-width: 700px)
|
|
.bread
|
|
display block
|
|
.column
|
|
display block
|
|
|
|
.bread-img
|
|
background url('/static/images/hp3_bw.jpg')
|
|
background-size cover
|
|
border-radius 160px
|
|
opacity 0.85
|
|
width 320px
|
|
height 320px
|
|
margin auto
|
|
|
|
@media screen and (max-width: 700px)
|
|
.bread-img
|
|
display none
|
|
|
|
.organization
|
|
padding-top 3em
|
|
|
|
.membership-information.column
|
|
vertical-align initial
|
|
p:first-child
|
|
margin-top 37px
|