mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-02-14 09:52:39 +00:00
455 lines
7.1 KiB
Stylus
455 lines
7.1 KiB
Stylus
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Source+Sans+Pro:wght@400;600;700&display=swap');
|
|
|
|
linkColor = #3090de
|
|
textColor = #444
|
|
feedWidth = 500px
|
|
footerHeight = 50px
|
|
|
|
@require '_input'
|
|
@require '_button'
|
|
@require '_header'
|
|
@require '_loader'
|
|
|
|
body, html
|
|
margin 0
|
|
font 18px 'Source Sans Pro', '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.75em
|
|
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
|
|
display flex
|
|
flex-direction column
|
|
.btn
|
|
background linkColor
|
|
color rgba(255, 255, 255, 0.9)
|
|
margin-left 0.5rem
|
|
&.sending
|
|
.invite-form__loader
|
|
display block
|
|
|
|
.controls-wrapper
|
|
display flex
|
|
@media screen and (max-width: 450px)
|
|
flex-direction column
|
|
.btn
|
|
margin 0
|
|
margin-top 0.5rem
|
|
|
|
.input-wrapper
|
|
position relative
|
|
flex-grow 1
|
|
width 400px
|
|
@media screen and (max-width: 650px)
|
|
width auto
|
|
|
|
.invite-form
|
|
margin-top 0.5rem
|
|
position relative
|
|
.input
|
|
width 100%
|
|
.invite-form__input
|
|
padding-right 2em
|
|
|
|
.label
|
|
margin-bottom 0.5rem
|
|
font-size 0.9rem
|
|
opacity 0.6
|
|
display block
|
|
|
|
.btn
|
|
height 45px
|
|
font inherit
|
|
border-radius 15px
|
|
padding 0.5rem 3rem
|
|
color #fff
|
|
&:active
|
|
border-bottom 0
|
|
.invite-form__loader
|
|
display none
|
|
width 10px
|
|
height 10px
|
|
position absolute
|
|
right 1rem
|
|
top 50%
|
|
margin-top -5px
|
|
|
|
.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
|
|
|
|
@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: 1200px)
|
|
.feed
|
|
width 350px
|
|
.content.with-feed
|
|
padding-right 350px
|
|
|
|
@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 15px
|
|
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
|
|
|
|
.channels
|
|
width 100%
|
|
list-style none
|
|
padding 0
|
|
td
|
|
padding 0.2rem 0
|
|
td:first-child
|
|
text-align center
|
|
|
|
|
|
.channel
|
|
align-items center
|
|
background-color #f5f5f5
|
|
border-radius 4px
|
|
color #4a4a4a
|
|
display inline-flex
|
|
font-size .75rem
|
|
height 2em
|
|
justify-content center
|
|
line-height 1.5
|
|
padding-left .75em
|
|
padding-right .75em
|
|
white-space nowrap
|
|
|
|
.channels tr:nth-child(1n) .channel
|
|
background-color #ebfffc
|
|
color #00947e
|
|
|
|
|
|
.channels tr:nth-child(2n) .channel
|
|
background-color #eef3fc
|
|
color #2160c4
|
|
|
|
|
|
.channels tr:nth-child(3n) .channel
|
|
background-color #eef6fc
|
|
color #1d72aa
|
|
|
|
|
|
.channels tr:nth-child(4n) .channel
|
|
background-color #effaf3
|
|
color #257942
|
|
|
|
|
|
.channels tr:nth-child(5n) .channel
|
|
background-color #fffbeb
|
|
color #947600
|
|
|
|
|
|
.channels tr:nth-child(6n) .channel
|
|
background-color #feecf0
|
|
color #cc0f35
|
|
|
|
.channel-members
|
|
font-size 12px
|
|
|
|
.channel-topic p
|
|
font-size 0.8rem
|
|
display -webkit-box
|
|
-webkit-box-orient vertical
|
|
-webkit-line-clamp 2
|
|
overflow hidden
|
|
border-left 1px solid #e6e6e6
|
|
padding-left 1rem
|
|
margin 0
|
|
margin-left 0.5rem |