From 30d83f7517038614d4654115c46e1a7004c9fa68 Mon Sep 17 00:00:00 2001
From: davegandy <dave@davegandy.com>
Date: Sun, 6 Oct 2013 10:46:50 -0400
Subject: [PATCH] getting responsive layout in place

---
 src/_includes/brand-license.html             |  2 +-
 src/_includes/examples/animated-spinner.html |  4 +-
 src/_includes/examples/bordered-pulled.html  |  4 +-
 src/_includes/examples/button-dropdowns.html |  4 +-
 src/_includes/examples/button-groups.html    |  4 +-
 src/_includes/examples/buttons.html          |  4 +-
 src/_includes/examples/custom.html           |  4 +-
 src/_includes/examples/form-inputs.html      |  4 +-
 src/_includes/examples/inline-icons.html     |  4 +-
 src/_includes/examples/larger-icons.html     |  4 +-
 src/_includes/examples/list-bullets.html     |  4 +-
 src/_includes/examples/navigation.html       |  4 +-
 src/_includes/examples/new.html              | 17 ++--
 src/_includes/examples/rotated-flipped.html  |  4 +-
 src/_includes/examples/stacked.html          |  4 +-
 src/_includes/icons/brand.html               |  2 +-
 src/_includes/icons/currency.html            |  2 +-
 src/_includes/icons/directional.html         |  2 +-
 src/_includes/icons/medical.html             |  2 +-
 src/_includes/icons/new.html                 |  2 +-
 src/_includes/icons/text-editor.html         |  2 +-
 src/_includes/icons/video-player.html        |  2 +-
 src/_includes/icons/web-application.html     |  2 +-
 src/_includes/jumbotron-carousel.html        |  4 +-
 src/_includes/stripe-ad.html                 | 10 +--
 src/_includes/tell-me-thanks.html            |  4 +-
 src/_includes/thanks-to.html                 |  6 +-
 src/_includes/why.html                       | 18 ++--
 src/assets/less/site/carbonad.less           |  2 +
 src/assets/less/site/lazy.less               | 88 ++++++++++----------
 src/assets/less/site/stripe-ad.less          |  4 +-
 31 files changed, 113 insertions(+), 110 deletions(-)

diff --git a/src/_includes/brand-license.html b/src/_includes/brand-license.html
index 07dea295a..33001834b 100644
--- a/src/_includes/brand-license.html
+++ b/src/_includes/brand-license.html
@@ -1,4 +1,4 @@
-<ul class="margin-bottom-none">
+<ul class="margin-bottom-none padding-left-lg">
   <li>All brand icons are trademarks of their respective owners.</li>
   <li>The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.</li>
 </ul>
diff --git a/src/_includes/examples/animated-spinner.html b/src/_includes/examples/animated-spinner.html
index c7e06e9a5..cb90d25c4 100644
--- a/src/_includes/examples/animated-spinner.html
+++ b/src/_includes/examples/animated-spinner.html
@@ -1,11 +1,11 @@
 <section id="animated-spinner">
   <h2 class="page-header">Animated Spinner</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
       <code>fa-refresh</code>, and <code>fa-cog</code>.
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent lead">
         <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content...
       </div>
diff --git a/src/_includes/examples/bordered-pulled.html b/src/_includes/examples/bordered-pulled.html
index ce22b5d9e..2439cdb99 100644
--- a/src/_includes/examples/bordered-pulled.html
+++ b/src/_includes/examples/bordered-pulled.html
@@ -1,13 +1,13 @@
 <section id="bordered-pulled">
   <h2 class="page-header">Bordered & Pulled Icons</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <p>
         Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or
         article graphics.
       </p>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent">
         <i class="fa fa-quote-left fa-4x pull-left fa-muted"></i>
         Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image.
diff --git a/src/_includes/examples/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html
index 1e38954e1..644b83f6a 100644
--- a/src/_includes/examples/button-dropdowns.html
+++ b/src/_includes/examples/button-dropdowns.html
@@ -1,7 +1,7 @@
 <section id="button-dropdowns">
   <h2 class="page-header">Button Dropdowns</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <div class="btn-group open">
         <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
         <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
@@ -15,7 +15,7 @@
         </ul>
       </div>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
 {% highlight html %}
 <div class="btn-group open">
   <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a>
diff --git a/src/_includes/examples/button-groups.html b/src/_includes/examples/button-groups.html
index aef20b7e2..83b8475be 100644
--- a/src/_includes/examples/button-groups.html
+++ b/src/_includes/examples/button-groups.html
@@ -1,7 +1,7 @@
 <section id="button-groups">
   <h2 class="page-header">Button Groups</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <p>
       <div class="btn-group">
         <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
@@ -11,7 +11,7 @@
       </div>
       </p>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
 {% highlight html %}
 <div class="btn-group">
   <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
diff --git a/src/_includes/examples/buttons.html b/src/_includes/examples/buttons.html
index 14a627a79..859683e57 100644
--- a/src/_includes/examples/buttons.html
+++ b/src/_includes/examples/buttons.html
@@ -1,7 +1,7 @@
 <section id="buttons">
   <h2 class="page-header">Buttons</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <p>
         <a class="btn btn-default" href="#">
           <i class="fa fa-repeat"></i> Reload</a>
@@ -29,7 +29,7 @@
           <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a>
       </p>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <p>
         Font Awesome icons work great in buttons. You can even combine them with larger icon styles,
         <code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>.
diff --git a/src/_includes/examples/custom.html b/src/_includes/examples/custom.html
index dc524dcea..2de7ad7ab 100644
--- a/src/_includes/examples/custom.html
+++ b/src/_includes/examples/custom.html
@@ -1,10 +1,10 @@
 <section id="custom">
   <h2 class="page-header">Custom CSS</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <p>Anything you can do with CSS font styles, you can do with Font Awesome.</p>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <p>Star Ratings (inspired by <a href="http://css-tricks.com/star-ratings/" target="_blank">CSS Tricks</a>)</p>
       <div class="well">
         <span class="rating">
diff --git a/src/_includes/examples/form-inputs.html b/src/_includes/examples/form-inputs.html
index b07fea2db..2b0179061 100644
--- a/src/_includes/examples/form-inputs.html
+++ b/src/_includes/examples/form-inputs.html
@@ -1,7 +1,7 @@
 <section id="form-inputs">
   <h2 class="page-header">Prepended & Appended Form Inputs</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
         <input class="form-control" type="text" placeholder="Email address">
@@ -12,7 +12,7 @@
         <input class="form-control" type="password" placeholder="Password">
       </div>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
 {% highlight html %}
 <form>
   <div class="input-prepend">
diff --git a/src/_includes/examples/inline-icons.html b/src/_includes/examples/inline-icons.html
index 246b67c6b..4406f537a 100644
--- a/src/_includes/examples/inline-icons.html
+++ b/src/_includes/examples/inline-icons.html
@@ -1,10 +1,10 @@
 <section id="inline-icons">
   <h2 class="page-header">Inline Icons</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <div class="well well-transparent">
         <div style="font-size: 24px; line-height: 1.5em;">
           <i class="fa fa-camera-retro"></i> icon-camera-retro
diff --git a/src/_includes/examples/larger-icons.html b/src/_includes/examples/larger-icons.html
index f055522fa..24de15988 100644
--- a/src/_includes/examples/larger-icons.html
+++ b/src/_includes/examples/larger-icons.html
@@ -1,13 +1,13 @@
 <section id="larger-icons">
   <h2 class="page-header">Larger Icons</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <p>
         To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>,
         <code>fa-3x</code>, or <code>fa-4x</code>.
       </p>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <p>
         Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>,
         <code>fa-3x</code>, or <code>fa-4x</code> classes.
diff --git a/src/_includes/examples/list-bullets.html b/src/_includes/examples/list-bullets.html
index 57e60840b..0e4b5b475 100644
--- a/src/_includes/examples/list-bullets.html
+++ b/src/_includes/examples/list-bullets.html
@@ -1,7 +1,7 @@
 <section id="list-bullets">
   <h2 class="page-header">List Bullets</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <ul class="fa-ul">
         <li><i class="fa-li fa fa-ok"></i>List bullets (like these)</li>
         <li><i class="fa-li fa fa-ok"></i>Buttons</li>
@@ -11,7 +11,7 @@
         <li><i class="fa-li fa fa-ok"></i>&hellip;and many more with custom CSS</li>
       </ul>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <p>Easily replace individual list bullets.</p>
 {% highlight html %}
 <ul class="fa-ul">
diff --git a/src/_includes/examples/navigation.html b/src/_includes/examples/navigation.html
index fa28f8770..360da1f54 100644
--- a/src/_includes/examples/navigation.html
+++ b/src/_includes/examples/navigation.html
@@ -1,7 +1,7 @@
 <section id="navigation">
   <h2 class="page-header">Navigation</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li>
         <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li>
@@ -9,7 +9,7 @@
         <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li>
       </ul>
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
 {% highlight html %}
 <ul class="nav nav-pills nav-stacked">
diff --git a/src/_includes/examples/new.html b/src/_includes/examples/new.html
index a7d615405..eb5242b0e 100644
--- a/src/_includes/examples/new.html
+++ b/src/_includes/examples/new.html
@@ -1,7 +1,7 @@
 <{% if page.navbar_active == "examples" %}div{% else %}section{% endif %} id="new-styles">
   <h2 class="page-header">New Styles in {{ site.fontawesome.minor_version }}</h2>
   <div class="row">
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
       <div class="well well-transparent">
         <i class="fa fa-shield"></i>&nbsp; normal<br>
@@ -12,10 +12,10 @@
         <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
       </div>
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><a href="#stacked">Stacked Icons</a></h4>
       <div class="well well-transparent">
-        <div class="margin-top margin-bottom">
+        <div class="margin-top-sm margin-bottom-sm">
           <span class="fa-stack">
             <i class="fa fa-unchecked fa-stack-base"></i>
             <i class="fa fa-twitter"></i>
@@ -30,11 +30,16 @@
             <i class="fa fa-sign-blank fa-stack-base"></i>
             <i class="fa fa-terminal fa-light"></i>
           </span>
-          fa-terminal on fa-sign-blank
-        </div>
+          fa-terminal on fa-sign-blank<br>
+          <span class="fa-stack">
+            <i class="fa fa-camera"></i>
+            <i class="fa fa-ban-circle fa-stack-base text-danger"></i>
+          </span>
+          fa-camera on fa-ban-circle
+      </div>
       </div>
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6 col-sm-offset-3">
       <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
       <div class="well well-transparent">
         <ul class="fa-ul">
diff --git a/src/_includes/examples/rotated-flipped.html b/src/_includes/examples/rotated-flipped.html
index 30d8d257a..7321a0657 100644
--- a/src/_includes/examples/rotated-flipped.html
+++ b/src/_includes/examples/rotated-flipped.html
@@ -1,10 +1,10 @@
 <section id="rotated-flipped">
   <h2 class="page-header">Rotated &amp; Flipped</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       A set of classes that can be used to arbitrarily rotate and flip icons.
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent lead">
         <i class="fa fa-shield"></i>&nbsp; normal<br>
         <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
diff --git a/src/_includes/examples/stacked.html b/src/_includes/examples/stacked.html
index c788e5049..662449394 100644
--- a/src/_includes/examples/stacked.html
+++ b/src/_includes/examples/stacked.html
@@ -1,11 +1,11 @@
 <section id="stacked">
   <h2 class="page-header">Stacked Icons</h2>
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3 col-sm-4">
       A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and
       <code>fa-stack-base</code> for the bottom icon.
     </div>
-    <div class="col-md-9">
+    <div class="col-md-9 col-sm-8">
       <div class="well well-large well-transparent lead">
         <span class="fa-stack">
           <i class="fa fa-check-empty fa-stack-base"></i>
diff --git a/src/_includes/icons/brand.html b/src/_includes/icons/brand.html
index b37be5228..bf64d8598 100644
--- a/src/_includes/icons/brand.html
+++ b/src/_includes/icons/brand.html
@@ -9,7 +9,7 @@
     {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %}
 
     {% for icon in icons_brand %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 </section>
diff --git a/src/_includes/icons/currency.html b/src/_includes/icons/currency.html
index 4748c9f81..1a19b7381 100644
--- a/src/_includes/icons/currency.html
+++ b/src/_includes/icons/currency.html
@@ -5,7 +5,7 @@
     {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %}
 
     {% for icon in icons_currency %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/directional.html b/src/_includes/icons/directional.html
index 3b632391a..be27daa64 100644
--- a/src/_includes/icons/directional.html
+++ b/src/_includes/icons/directional.html
@@ -5,7 +5,7 @@
     {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %}
 
     {% for icon in icons_directional %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/medical.html b/src/_includes/icons/medical.html
index 5cce5974c..ebe533894 100644
--- a/src/_includes/icons/medical.html
+++ b/src/_includes/icons/medical.html
@@ -5,7 +5,7 @@
     {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %}
 
     {% for icon in icons_medical %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/new.html b/src/_includes/icons/new.html
index 0b82e2bfa..966698a60 100644
--- a/src/_includes/icons/new.html
+++ b/src/_includes/icons/new.html
@@ -11,7 +11,7 @@
     {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %}
 
     {% for icon in icons_new %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/text-editor.html b/src/_includes/icons/text-editor.html
index ab42e178e..5d6bea351 100644
--- a/src/_includes/icons/text-editor.html
+++ b/src/_includes/icons/text-editor.html
@@ -5,7 +5,7 @@
     {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %}
 
     {% for icon in icons_text_editor %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/video-player.html b/src/_includes/icons/video-player.html
index c2b2ad517..f8762dcd8 100644
--- a/src/_includes/icons/video-player.html
+++ b/src/_includes/icons/video-player.html
@@ -5,7 +5,7 @@
     {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %}
 
     {% for icon in icons_video_player %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/icons/web-application.html b/src/_includes/icons/web-application.html
index 55a230559..9c6fa1b8c 100644
--- a/src/_includes/icons/web-application.html
+++ b/src/_includes/icons/web-application.html
@@ -5,7 +5,7 @@
     {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %}
 
     {% for icon in icons_web_application %}
-      <div class="col-md-3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
+      <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ site.fontawesome.css_prefix }}-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 
diff --git a/src/_includes/jumbotron-carousel.html b/src/_includes/jumbotron-carousel.html
index 4e6e351b3..277124573 100644
--- a/src/_includes/jumbotron-carousel.html
+++ b/src/_includes/jumbotron-carousel.html
@@ -1,7 +1,7 @@
 <div class="jumbotron jumbotron-carousel hidden-print">
   <div class="container">
     <div class="row">
-      <div class="col-md-8 text-center">
+      <div class="col-md-8 col-sm-8 text-center">
         <h1>Font Awesome</h1>
         <p>The iconic font designed for Bootstrap</p>
         <div class="actions">
@@ -19,7 +19,7 @@
           Created &amp; Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a>
         </div>
       </div>
-      <div class="col-md-4">
+      <div class="col-md-4 col-sm-4">
         <div id="icon-carousel" class="carousel slide">
           <!-- Carousel items -->
           <div class="carousel-inner">
diff --git a/src/_includes/stripe-ad.html b/src/_includes/stripe-ad.html
index 975defcf7..8ff6bbf2f 100644
--- a/src/_includes/stripe-ad.html
+++ b/src/_includes/stripe-ad.html
@@ -1,10 +1,6 @@
 <section class="hidden-print">
-  <div class="row stripe-ad">
-    <div class="col-md-8">
-      {{ stripe_ad_content }}
-    </div>
-    <div class="col-md-4">
-      {% include ads/carbon-light-horizontal.html %}
-    </div>
+  <div class="stripe-ad">
+    {% include ads/carbon-light-horizontal.html %}
+    {{ stripe_ad_content }}
   </div>
 </section>
diff --git a/src/_includes/tell-me-thanks.html b/src/_includes/tell-me-thanks.html
index 94200f406..5c919158b 100644
--- a/src/_includes/tell-me-thanks.html
+++ b/src/_includes/tell-me-thanks.html
@@ -5,13 +5,13 @@
     open source community. If you'd like, here are a couple of ways you can tell me thanks for all my hard work.
   </p>
   <div class="row">
-    <div class="col-md-6">
+    <div class="col-md-6 col-sm-6">
       <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip"></i> Tip me on Gittip</a></h3>
       <p>
         Gittip is a great way to let developers know you appreciate their work.
       </p>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-6 col-sm-6">
       <h3><a href="http://amzn.com/w/G64X58AY416W" target="_blank">My Amazon Wish List</a></h3>
       <p>
         Or pick something straight
diff --git a/src/_includes/thanks-to.html b/src/_includes/thanks-to.html
index 79023375b..77047e635 100644
--- a/src/_includes/thanks-to.html
+++ b/src/_includes/thanks-to.html
@@ -1,21 +1,21 @@
 <section id="thanks-to">
   <h2 class="page-header">Thanks To</h2>
   <div class="row">
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-4">
       <p>
         Thanks to <a href="https://twitter.com/robmadole/">@robmadole</a> and
         <a href="https://twitter.com/supercodepoet/">@supercodepoet</a> for icon design
         review, advice, some Jekyll help, and being all around badass coders.
       </p>
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-4">
       <p>
         Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and
         <a href="https://twitter.com/johnsmclay">@johnsmclay</a> for developing and hosting
         <a href="http://icnfnt.com/">icnfnt</a>, the best way to subset Font Awesome.
       </p>
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-4">
       <p>
         Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent
         <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to
diff --git a/src/_includes/why.html b/src/_includes/why.html
index 72dda8576..2cc68bf82 100644
--- a/src/_includes/why.html
+++ b/src/_includes/why.html
@@ -1,39 +1,39 @@
 <div id="why" class="feature-list">
   <div class="row">
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4>
       In a single collection, Font Awesome is a pictographic language of web-related actions.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-pencil"></i> CSS Control</h4>
       Easily style icon color, size, shadow, and anything that's possible with CSS.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-fullscreen"></i> Infinite Scalability</h4>
       Scalable vector graphics means every icon looks awesome at any size.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4>
       Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-ok"></i> IE7 Support</h4>
       Font Awesome supports IE7. If you need it, you have my condolences.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-eye-open"></i> Perfect on Retina Displays</h4>
       Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-thumbs-up-alt"></i> Made for Bootstrap</h4>
       Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-desktop"></i> Desktop Friendly</h4>
       To use on the desktop or for a complete set of vectors,
       check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-search"></i> Screen Reader Compatible</h4>
       Font Awesome won't trip up screen readers, unlike other icon fonts.
     </div>
diff --git a/src/assets/less/site/carbonad.less b/src/assets/less/site/carbonad.less
index 2ee710ff7..d32120fb0 100644
--- a/src/assets/less/site/carbonad.less
+++ b/src/assets/less/site/carbonad.less
@@ -3,5 +3,7 @@
     background: @table-bg-accent;
     border-color: @table-border-color;
     border-radius: (@border-radius-base);
+    float: right;
+    margin-left: @buffer-lg;
   }
 }
diff --git a/src/assets/less/site/lazy.less b/src/assets/less/site/lazy.less
index 71af4a1fe..fb5a9745a 100644
--- a/src/assets/less/site/lazy.less
+++ b/src/assets/less/site/lazy.less
@@ -1,57 +1,57 @@
-@size-none: 0px;
-@size-sm:   5px;
-@size-md:   10px;
-@size-lg:   22px;
+@buffer-none: 0px;
+@buffer-sm:   5px;
+@buffer-md:   10px;
+@buffer-lg:   22px;
 
-.padding-none         { padding: @size-none !important; }
-.padding              { padding: @size-md !important; }
-.padding-sm           { padding: @size-sm !important; }
-.padding-lg           { padding: @size-lg !important; }
+.padding-none         { padding: @buffer-none !important; }
+.padding              { padding: @buffer-md !important; }
+.padding-sm           { padding: @buffer-sm !important; }
+.padding-lg           { padding: @buffer-lg !important; }
 
-.padding-top-none     { padding-top: @size-none !important; }
-.padding-top          { padding-top: @size-md !important; }
-.padding-top-sm       { padding-top: @size-sm !important; }
-.padding-top-lg       { padding-top: @size-lg !important; }
+.padding-top-none     { padding-top: @buffer-none !important; }
+.padding-top          { padding-top: @buffer-md !important; }
+.padding-top-sm       { padding-top: @buffer-sm !important; }
+.padding-top-lg       { padding-top: @buffer-lg !important; }
 
-.padding-right-none   { padding-right: @size-none !important; }
-.padding-right        { padding-right: @size-md !important; }
-.padding-right-sm     { padding-right: @size-sm !important; }
-.padding-right-lg     { padding-right: @size-lg !important; }
+.padding-right-none   { padding-right: @buffer-none !important; }
+.padding-right        { padding-right: @buffer-md !important; }
+.padding-right-sm     { padding-right: @buffer-sm !important; }
+.padding-right-lg     { padding-right: @buffer-lg !important; }
 
-.padding-bottom-none  { padding-bottom: @size-none !important; }
-.padding-bottom       { padding-bottom: @size-md !important; }
-.padding-bottom-sm    { padding-bottom: @size-sm !important; }
-.padding-bottom-lg    { padding-bottom: @size-lg !important; }
+.padding-bottom-none  { padding-bottom: @buffer-none !important; }
+.padding-bottom       { padding-bottom: @buffer-md !important; }
+.padding-bottom-sm    { padding-bottom: @buffer-sm !important; }
+.padding-bottom-lg    { padding-bottom: @buffer-lg !important; }
 
-.padding-left-none    { padding-left: @size-none !important; }
-.padding-left         { padding-left: @size-md !important; }
-.padding-left-sm      { padding-left: @size-sm !important; }
-.padding-left-lg      { padding-left: @size-lg !important; }
+.padding-left-none    { padding-left: @buffer-none !important; }
+.padding-left         { padding-left: @buffer-md !important; }
+.padding-left-sm      { padding-left: @buffer-sm !important; }
+.padding-left-lg      { padding-left: @buffer-lg !important; }
 
-.margin-none          { margin: @size-none !important; }
-.margin               { margin: @size-md !important; }
-.margin-sm            { margin: @size-sm !important; }
-.margin-lg            { margin: @size-lg !important; }
+.margin-none          { margin: @buffer-none !important; }
+.margin               { margin: @buffer-md !important; }
+.margin-sm            { margin: @buffer-sm !important; }
+.margin-lg            { margin: @buffer-lg !important; }
 
-.margin-top-none      { margin-top: @size-none !important; }
-.margin-top           { margin-top: @size-md !important; }
-.margin-top-lg        { margin-top: @size-lg !important; }
-.margin-top-sm        { margin-top: @size-sm !important; }
+.margin-top-none      { margin-top: @buffer-none !important; }
+.margin-top           { margin-top: @buffer-md !important; }
+.margin-top-lg        { margin-top: @buffer-lg !important; }
+.margin-top-sm        { margin-top: @buffer-sm !important; }
 
-.margin-right-none    { margin-right: @size-none !important; }
-.margin-right         { margin-right: @size-md !important; }
-.margin-right-lg      { margin-right: @size-lg !important; }
-.margin-right-sm      { margin-right: @size-sm !important; }
+.margin-right-none    { margin-right: @buffer-none !important; }
+.margin-right         { margin-right: @buffer-md !important; }
+.margin-right-lg      { margin-right: @buffer-lg !important; }
+.margin-right-sm      { margin-right: @buffer-sm !important; }
 
-.margin-bottom-none   { margin-bottom: @size-none !important; }
-.margin-bottom        { margin-bottom: @size-md !important; }
-.margin-bottom-lg     { margin-bottom: @size-lg !important; }
-.margin-bottom-sm     { margin-bottom: @size-sm !important; }
+.margin-bottom-none   { margin-bottom: @buffer-none !important; }
+.margin-bottom        { margin-bottom: @buffer-md !important; }
+.margin-bottom-lg     { margin-bottom: @buffer-lg !important; }
+.margin-bottom-sm     { margin-bottom: @buffer-sm !important; }
 
-.margin-left-none     { margin-left: @size-none !important; }
-.margin-left          { margin-left: @size-md !important; }
-.margin-left-lg       { margin-left: @size-lg !important; }
-.margin-left-sm       { margin-left: @size-sm !important; }
+.margin-left-none     { margin-left: @buffer-none !important; }
+.margin-left          { margin-left: @buffer-md !important; }
+.margin-left-lg       { margin-left: @buffer-lg !important; }
+.margin-left-sm       { margin-left: @buffer-sm !important; }
 
 .border-left-none     { border-left: none !important; }
 .border-right-none    { border-right: none !important; }
diff --git a/src/assets/less/site/stripe-ad.less b/src/assets/less/site/stripe-ad.less
index 001899ca6..07fdc15e6 100644
--- a/src/assets/less/site/stripe-ad.less
+++ b/src/assets/less/site/stripe-ad.less
@@ -1,7 +1,7 @@
 .stripe-ad {
   margin-bottom: 22px;
   .lead {
-    margin-top: 10px;
-    margin-right: 30px;
+    padding-top: 10px;
+    padding-right: 30px;
   }
 }