Start lining up the technology icons.

symondsandson · Jan 23, 2015 · 889e2e1 · 889e2e1
1 parent 014b53a
commit 889e2e1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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'
-    });
-  });
 });