diff --git a/src/assets/images/octocat.png b/src/assets/images/octocat.png
new file mode 100644
index 0000000..1ff4069
Binary files /dev/null and b/src/assets/images/octocat.png differ
diff --git a/src/jade/index.jade b/src/jade/index.jade
index 37695cb..af3648c 100644
--- a/src/jade/index.jade
+++ b/src/jade/index.jade
@@ -51,16 +51,26 @@ html
section
.row
- .column.column3-5
- p.
- Etsitkö tiimikavereita projektiisi? Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle?
- Onko koodissasi bugi, joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?
- Koodiklinikka on kaikille avoin softakehitykseen keskittynyt yhteisö.
-
- Tarkoituksenamme on yhdistää ja kasvattaa suomalaista ohjelmointiyhteisöä, sekä tarjota apua ja uusia kontakteja ohjelmoinnista innostuneille nuorille.
- .column.column2-5
- #members
+ .bread
+ .column.column4-5
+ h3 Yhteisö ohjelmoinnista kiinnostuneille
+ p.
+ Koodiklinikka on yhteisö, joka kokoaa Suomen ohjelmistoalan työntekijät, harrastajat ja vasta-alkajat yhteen.
+ Tarkoituksenamme on yhdistää ja kasvattaa suomalaista ohjelmointiyhteisöä, sekä tarjota apua ja uusia kontakteja ohjelmoinnista innostuneille nuorille.
+ p.
+ Mukaan liittyminen on ilmaista ja helppoa. Jätä sähköpostiosoitteesi ylläolevaan kenttään ja lähetämme sinulle kutsun Slack-yhteisöömme.
+ .column.column1-5
+ #members
+ .row
+ .bread
+ .column.column2-5.octocat
+ img(src='images/octocat.png')
+ .column.column3-5
+ h3 Avoin lähdekoodi
+ p
+ |Suosimme avointa lähdekoodia ja kaikki käyttämämme koodi on vapaasti saatavilla ja hyödynnettävissä Github-organisaatiomme sivulta.
+ |Organisaation jäseneksi otamme kaikki Slack-yhteisömme jäsenet ja kontribuutio projekteihimme otetaan lämpimästi vastaan.
#feed
@@ -72,9 +82,12 @@ html
a(href='https://github.com/koodiklinikka/koodiklinikka.fi')
i.fa.fa-github
+
a(href='https://twitter.com/koodiklinikka')
i.fa.fa-twitter
+ span#email
+
#fader
script(src='js/bundle.js')
diff --git a/src/js/components/email.jsx b/src/js/components/email.jsx
new file mode 100644
index 0000000..98be36f
--- /dev/null
+++ b/src/js/components/email.jsx
@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+ render() {
+ return info@koodiklinikka.fi;
+ }
+});
diff --git a/src/js/main.js b/src/js/main.js
index 19304a2..741eb23 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -20,3 +20,7 @@ React.render(
React.render(
require('./components/feed')(),
document.getElementById('feed'));
+
+React.render(
+ require('./components/email')(),
+ document.getElementById('email'));
diff --git a/src/js/util.js b/src/js/util.js
index 88f4cff..fa867e5 100644
--- a/src/js/util.js
+++ b/src/js/util.js
@@ -24,10 +24,14 @@ module.exports = {
ref_type: item.payload.ref
});
+ var url = `https://github.com/${item.actor.login}`;
+
return {
+ user: item.actor.login,
+ userLink: url,
image: item.actor.avatar_url,
- imageLink: `//githubEvent.com/${item.actor.login}`,
- body: `${item.actor.login} ${message}`,
+ imageLink: url,
+ body: message,
timestamp: new Date(item.created_at),
url: message.url,
type: 'github'
@@ -39,9 +43,13 @@ module.exports = {
item = item.retweeted_status;
}
+ var url = `https://twitter.com/${item.user.screen_name}`;
+
return {
+ user: `@${item.user.screen_name}`,
+ userLink: url,
image: item.user.profile_image_url,
- imageLink: `//twitter.com/${item.user.screen_name}`,
+ imageLink: url,
body: twitterText.autoLink(item.text),
timestamp: new Date(item.created_at),
type: 'twitter'
diff --git a/src/styles/style.styl b/src/styles/style.styl
index d3ea544..091a2d7 100644
--- a/src/styles/style.styl
+++ b/src/styles/style.styl
@@ -1,6 +1,7 @@
linkColor = #3090de
textColor = #444
feedWidth = 500px
+footerHeight = 50px
@require '_input'
@require '_button'
@@ -38,7 +39,7 @@ a
.container
flex 1
min-height 100vh
- padding-bottom 50px
+ padding-bottom footerHeight
.jumbo
width 100%
@@ -97,7 +98,11 @@ section
padding-right feedWidth
min-height 50vh
box-sizing border-box
-
+ h3
+ margin-top 2em
+ @media screen and (max-width: 700px)
+ h3
+ margin-top 0
section:first-child
box-shadow -1px -1px 1px rgba(0, 0, 0, 0.05)
border-bottom 1px solid #EEEEEE
@@ -107,13 +112,21 @@ section:first-child
max-width 800px
margin auto
overflow auto
- padding 0 1em
+ 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
.column3-5
width (100/5*3)%
@@ -129,6 +142,7 @@ section:first-child
width 100%
float none
margin-top 1em
+ padding 0
&:first-child
margin-top 0
.invite-form
@@ -174,26 +188,34 @@ section:first-child
background rgb(226, 33, 112)
.members
- margin-top 1em
- margin-bottom 1em
+ width 200px
+ display inline-block
+ a
+ display inline-block
.member
- width 57px
+ width 40px
vertical-align middle
margin 3px
border-radius 3px
footer
- font-size 1.5em
- margin-top -50px
+ height footerHeight
+ line-height footerHeight
+ margin-top footerHeight * -1
padding 0.5em
- background textColor
+ padding-right 1em
z-index 2
position relative
+ border-top 1px solid #ECECEC
+ font-size 1.5em
i
margin 0 0.30em
font-size 1.5em
- color #fff
+
+#email
+ font-size 1rem
+ float right
.feed
width feedWidth
@@ -268,3 +290,23 @@ footer
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
+
+.octocat
+ text-align center
+ img
+ width 100%
+ max-width 300px
+.bread
+ display table
+ width 100%
+ .column
+ float none
+ display table-cell
+ vertical-align middle
+
+@media screen and (max-width: 700px)
+ .bread
+ display block
+ .column
+ display block
+