new content & styles

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ö.<br />
-                  <br />
-                  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ä <a href="https://github.com/koodiklinikka">Github-organisaatiomme sivulta</a>.
+                    |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')

src/js/components/email.jsx

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+  render() {
+    return <a href="mailto:info@koodiklinikka.fi">info@koodiklinikka.fi</a>;
+  }
+});

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'));

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'

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
+