From 889e2e155a5b0bf2b0bf01d3ac30ce993caa4b15 Mon Sep 17 00:00:00 2001
From: Ashton Kemerling <ashtonkemerling@gmail.com>
Date: Thu, 22 Jan 2015 20:26:58 -0700
Subject: [PATCH] Start lining up the technology icons.

---
 source/css/main.css.scss | 13 +++++++++++++
 source/index.html.erb    | 33 ++++++++++++++++++---------------
 source/js/index.js       |  8 --------
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/source/css/main.css.scss b/source/css/main.css.scss
index 5182e81..44a886e 100644
--- a/source/css/main.css.scss
+++ b/source/css/main.css.scss
@@ -488,6 +488,19 @@ div#our_experience {
         }
     }
 
+    $boxsize: 70px;
+    #tools {
+        .box {
+            width: $boxsize;
+            height: $boxsize;
+            margin-right: $boxsize/2;
+            img {
+                width: $boxsize;
+                height: $boxsize;
+            }
+        }
+    }
+
     #masonry {
         float: left;
         clear: both;
diff --git a/source/index.html.erb b/source/index.html.erb
index 81ef676..47fff18 100644
--- a/source/index.html.erb
+++ b/source/index.html.erb
@@ -42,34 +42,37 @@ javascript: index
 
     <p class="text-center">Our team has had dozens of years of experience with the technologies that make the Internet run at scale. Whether it's a web application or a mobile application, whatever software stack you seek to employ, chances are we've not only used it &mdash; we've used it to help a multi-million dollar company increase their uptime, reduce their operating costs, and most importantly, delight their customers. Here's a very small selection of the software we love using over and over again.</p>
 
-    <div id='masonry'>
-      <div class='box'>
+    <h4 class="uppercase">We believe in choosing the right tools for the job</h4>
+    <h5>That's why we know many tools</h5>
+
+    <div id='tools'>
+      <span class='box'>
         <%= link_to tag(:img, src: 'img/rails.png', width: '87', height: '111', alt: 'Ruby on Rails'), 'http://rubyonrails.org', target: '_blank' %>
-      </div>
+      </span>
 
-      <div class='box'>
+      <span class='box'>
         <%= link_to tag(:img, src: 'img/rubymotion.png', width: '120', height: '120', alt: 'RubyMotion'), 'http://www.rubymotion.com/', target: '_blank' %>
-      </div>
+      </span>
 
-      <div class='box'>
+      <span class='box'>
         <%= link_to tag(:img, src: 'img/postgresql.png', width: '120', height: '120', alt: 'PostgreSQL'), 'http://www.postgresql.org/', target: '_blank' %>
-      </div>
+      </span>
 
-      <div class='box'>
+      <span class='box'>
         <%= link_to tag(:img, src: 'img/elasticsearch.png', width: '120', height: '85', alt: 'elasticsearch'), 'http://www.elasticsearch.org/', target: '_blank' %>
-      </div>
+      </span>
 
-      <div class='box'>
+      <span class='box'>
         <%= link_to tag(:img, src: 'img/mysql.png', width: '170', height: '115', alt: 'MySQL'), 'http://www.mysql.com/', target: '_blank' %>
-      </div>
+      </span>
 
-      <div class='box'>
+      <span class='box'>
         <%= link_to tag(:img, src: 'img/logstash.png', width: '75', height: '120', alt: 'logstash'), 'http://www.logstash.net/', target: '_blank' %>
-      </div>
+      </span>
 
-      <div class='box'>
+      <span class='box'>
         <%= link_to tag(:img, src: 'img/centos.png', width: '96', height: '96', alt: 'CentOS'), 'http://www.centos.org/', target: '_blank' %>
-      </div>
+      </span>
     </div>
   </div>
 </div>
diff --git a/source/js/index.js b/source/js/index.js
index 63b916a..c0a5f9f 100644
--- a/source/js/index.js
+++ b/source/js/index.js
@@ -15,12 +15,4 @@ $(function() {
   $('#tailored').tipsy({gravity: 'sw', fade: true});
   $('#tradition').tipsy({gravity: 's', fade: true});
   $('#technologies').tipsy({gravity: 'se', fade: true});
-
-  $('#masonry').imagesLoaded(function() {
-    $('#masonry').masonry({
-      gutter: 20,
-      columWidth: 280,
-      itemSelector: '.box'
-    });
-  });
 });