Add slack & use bootstrap rows over image-height formatting.

Author: teh

contact.html

@@ -2,36 +2,51 @@
 layout: marketing
 title: Contact
 ---
-    <div class="container">
-      <ul class="breadcrumb">
-        <li><a href="/">Home</a> <span class="divider">/</span></li>
-        <li class="active">Contact</li>
-      </ul>
-    </div>
-
-    <div class="container marketing">
-      <div class="row">
 
-        <div class="span4">
-          <img class="img-circle" style="width:300px; height: 300px" src="/img/icon_irc_400x400.png">
-          <h2>IRC</h2>
-          <p>You'll probably find us lurking in the #haskell-distributed channel on freenode, where you can get help with your questions. There is also the general purpose #haskell channel.</p>
-          <p><a class="btn btn-primary" href="http://webchat.freenode.net/?channels=haskell-distributed&uio=d4">Visit us on IRC</a></p>
-        </div>
+<div class="container">
+  <ul class="breadcrumb">
+    <li><a href="/">Home</a> <span class="divider">/</span></li>
+    <li class="active">Contact</li>
+  </ul>
+</div>
 
-        <div class="span4">
-          <img class="img" style="width:400px; height: 300px" src="/img/logoJIRAPNG.png">
-          <h2>Issues Tracker</h2>
-          <p>Notice a problem that you don't know how to fix? Or want to request a new feature?
-          (in order to create new issues you will need to create a login)</p>
-          <p><a class="btn btn-primary" href="https://cloud-haskell.atlassian.net/secure/BrowseProjects.jspa#all">Browse Issues</a></p>
-        </div>
+<div class="container marketing">
+  <div class="row">
+    <div class="span3">
+      <img class="img-circle" src="/img/icon_slack.png">
+    </div>
+    <div class="span3">
+      <img class="img-circle" src="/img/icon_irc.png">
+    </div>
+    <div class="span3">
+      <img class="img" src="/img/logoJIRAPNG.png">
+    </div>
+    <div class="span3">
+      <img class="img-circle" src="/img/email_128x128.png">
+    </div>
+  </div>
 
-        <div class="span4">
-          <img class="img-circle" style="width:300px; height: 300px" src="/img/email_128x128.png">
-          <h2>Email</h2>
-          <p>If you have any questions or concerns, please email the parallel-haskell mailing list in the first instace.</p>
-          <p><a class="btn btn-primary" href="mailto:parallel-haskell@googlegroups.com">Send Email</a></p>
-        </div>
-      </div>
+  <div class="row">
+    <div class="span3">
+      <h2>Slack</h2>
+      <p>People have been active on Slack recently. Get an invite and drop in.</p>
+      <p><a class="btn btn-primary" href="https://rauchg-slackin-dxinpkuzrg.now.sh/">Get a Slack invite</a></p>
+    </div>
+    <div class="span3">
+      <h2>IRC</h2>
+      <p>You'll probably find us lurking in the #haskell-distributed channel on freenode, where you can get help with your questions. There is also the general purpose #haskell channel.</p>
+      <p><a class="btn btn-primary" href="http://webchat.freenode.net/?channels=haskell-distributed&uio=d4">Visit us on IRC</a></p>
+    </div>
+    <div class="span3">
+      <h2>Issues Tracker</h2>
+      <p>Notice a problem that you don't know how to fix? Or want to request a new feature?
+        (in order to create new issues you will need to create a login)</p>
+      <p><a class="btn btn-primary" href="https://cloud-haskell.atlassian.net/secure/BrowseProjects.jspa#all">Browse Issues</a></p>
+    </div>
+    <div class="span3">
+      <h2>Email</h2>
+      <p>If you have any questions or concerns, please email the parallel-haskell mailing list in the first instace.</p>
+      <p><a class="btn btn-primary" href="mailto:parallel-haskell@googlegroups.com">Send Email</a></p>
     </div>
+  </div>
+</div>