add members next to description text

src/jade/index.jade

@@ -40,16 +40,19 @@ html
 
     section
       .row
-        .form-container
-          #invite-form
-            h3 Tule mukaan
+        h3 Tule mukaan
+        #invite-form
+
+      .row
+        .column.column1-2
+          #members
+        .column.column1-2
           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?<br />
             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.
-
     footer
       a(href='https://koodiklinikka.slack.com')
         i.fa.fa-slack

src/js/components/inviteForm.jsx

@@ -2,7 +2,7 @@
 
 var request = require('axios');
 var React = require('React/addons');
-var classSet = React.addons.classSet
+var classSet = React.addons.classSet;
 
 module.exports = React.createClass({
   getInitialState() {

src/js/components/members.jsx

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('React');
+var request = require('axios');
+
+var API_URL = 'https://api.github.com/orgs/koodiklinikka/public_members';
+
+module.exports = React.createClass({
+  getInitialState() {
+    return {
+      members: []
+    };
+  },
+  componentDidMount() {
+    request.get(API_URL).then(function(res) {
+      this.setState({
+        members: res.data
+      });
+    }.bind(this));
+  },
+  render() {
+
+    var members = this.state.members.map(function(member) {
+      var src = `${member.avatar_url}&s=120`;
+      return (
+        <a href={member.html_url} target="_blank">
+          <img className="member" src={src} />
+        </a>
+      );
+    });
+
+    return (
+      <div className="members">{members}</div>
+    )
+  }
+});

src/js/main.js

@@ -10,3 +10,8 @@ React.render(
 React.render(
   require('./components/fader')(),
   document.getElementById('fader'));
+
+
+React.render(
+  require('./components/members')(),
+  document.getElementById('members'));

src/styles/style.styl

@@ -16,7 +16,8 @@ h1, h2, h3
   margin 0
   margin-bottom 0.5em
   text-shadow 1px 1px 0 rgba(255, 255, 255, 0.15)
-
+p
+  margin 0
 a
   color linkColor
   text-decoration none
@@ -39,7 +40,7 @@ a
     h1
       max-width 800px
       margin auto
-      @media screen and (max-width: 600px)
+      @media screen and (max-width: 600px), screen and (max-height: 580px)
         font-size 1.5em
         margin-top 1em
 #logo
@@ -50,19 +51,36 @@ a
   left 1em
   background url('../images/logo.png')
   background-size 100% 100%
-  @media screen and (max-width: 600px)
+  @media screen and (max-width: 600px), screen and (max-height: 580px)
     width 60px
     height 60px
+
 section
   background #fff
+  padding 2em 0
 
 .jumbo + section
   margin-top -200px
   box-shadow -1px -1px 1px rgba(0, 0, 0, 0.05)
+
 .row
-  max-width 800px
-  padding 2em 0
+  max-width 700px
   margin auto
+  overflow auto
+  padding 0 1em
+
+.column
+  float left
+  @media screen and (max-width: 700px)
+    float none
+
+.column1-2
+  width 50%
+  @media screen and (max-width: 700px)
+    width 100%
+
+#invite-form
+  margin-bottom 1em
 
 .invite-form
   position relative
@@ -107,14 +125,11 @@ section
   .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
+.member
+  width 60px
+  vertical-align middle
+  margin 3px
+  border-radius 3px
 
 footer
   font-size 1.5em