adding responsive screen-sm and screen-xs

src/_includes/whats-new.html

@@ -7,32 +7,32 @@
 {% endcapture %}
 {% include stripe-ad.html %}
 
-<div id="whats-new" class="feature-list">
+<section id="whats-new" class="feature-list">
   <div class="row">
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4>
       Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-terminal"></i> SCSS Support</h4>
       A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4>
       SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
     </div>
-    <div class="col-md-4 margin-bottom-large">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-magic"></i> Pixel Perfection at 14px</h4>
       Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
       Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
     </div>
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-6">
       <h4><i class="fa fa-question-sign"></i> Want More Details?</h4>
       Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see
       what's new and changed.
     </div>
   </div>
-</div>
+</section>

src/_layouts/icon.html

@@ -7,9 +7,9 @@ relative_path: ../../
   <div class="container">
     <div class="info-icons">
       <i class="fa fa-{{ page.icon.id }} fa-6"></i>&nbsp;&nbsp;
-      <span class="hidden-phone">
+      <span class="hide-xs">
         <i class="fa fa-{{ page.icon.id }} fa-5"></i>&nbsp;&nbsp;
-        <span class="hidden-tablet"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
+        <span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i>&nbsp;&nbsp;</span>
         <i class="fa fa-{{ page.icon.id }} fa-3"></i>&nbsp;&nbsp;
         <i class="fa fa-{{ page.icon.id }} fa-2"></i>&nbsp;
       </span>
@@ -41,7 +41,7 @@ relative_path: ../../
 <div class="container">
   <section>
     <div class="row">
-      <div class="col-md-9">
+      <div class="col-md-9 col-sm-9">
         <p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag:</p>
         <div class="well well-transparent">
           <div style="font-size: 24px; line-height: 1.5em;">
@@ -54,7 +54,7 @@ relative_path: ../../
         <br>
         <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-3 col-sm-3">
         <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div>
       </div>
     </div>

src/assets/less/site-2.3.2/responsive-768px-979px.less

@@ -46,9 +46,6 @@
       margin: 0;
       font-size: 19px;
     }
-    @ad-width: 302px;
-    .span8 { width: 476px + 228px - @ad-width; }
-    .span4 { width: @ad-width; }
   }
 
   #why, #whats-new, #new-styles {

src/assets/less/site-3.0.0.less

@@ -20,3 +20,5 @@
 @import "site/carbonad";
 
 @import "site/responsive/screen-lg";
+@import "site/responsive/screen-sm";
+@import "site/responsive/screen-xs";

src/assets/less/site/carbonad.less

@@ -3,7 +3,10 @@
     background: @table-bg-accent;
     border-color: @table-border-color;
     border-radius: (@border-radius-base);
+    border-width: 1px;
     float: right;
     margin-left: @buffer-lg;
   }
 }
+
+.info-ad #carbonads-container .carbonad { float: none; }

src/assets/less/site/responsive/screen-sm.less

@@ -0,0 +1,47 @@
+@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
+  #icon-carousel {
+    @size: 200px;
+    font-size: @size;
+    line-height: @size + 5;
+    .carousel-control {
+      top: @size + 30px;
+      .square(30px);
+      font-size: 40px;
+      line-height: 40px;
+      left: 228/2 - 40px;
+      &.right {
+        right: 228/2 - 40px;
+      }
+    }
+  }
+
+  .jumbotron-carousel {
+    padding: 50px 0;
+    h1 { font-size: 65px; }
+    p { font-size: 25px; }
+    .shameless-self-promotion { font-size: 12px; }
+  }
+
+  .jumbotron-ad {
+    p { font-size: 28px; }
+  }
+
+  .jumbotron-icon {
+    h1 small {
+      display: block;
+      margin-top: 15px;
+      margin-left: 0;
+      line-height: 20px;
+    }
+  }
+
+  .stripe-ad {
+    .lead {
+      margin: 0;
+      padding-top: 5px;
+      font-size: 19px;
+    }
+  }
+
+  .hide-sm { display: none; }
+}

src/assets/less/site/responsive/screen-xs.less

@@ -0,0 +1,68 @@
+@media (max-width: @screen-xs-max) {
+  #icon-carousel {
+    @size: 180px;
+    font-size: @size;
+    line-height: @size;
+    width: 280px;
+    margin: 30px auto 0;
+    .carousel-control {
+      top: @size / 2;
+      .square(44px);
+      font-size: 44px;
+      line-height: 44px;
+      left: -7px;
+      &.right { right: -7px; }
+    }
+  }
+
+  .jumbotron-carousel {
+    h1 { font-size: 58px; }
+    p { font-size: 24px; }
+    .btn-large {
+      font-size: 20px;
+      padding: 14px 26px;
+    }
+    .shameless-self-promotion { font-size: 12px; }
+  }
+
+  .jumbotron-ad {
+    h1 { font-size: 39px; }
+    p {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+  }
+
+  .jumbotron-icon {
+    .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 0; }
+    .fa-6 { font-size: 16em; }
+    h1 small {
+      display: block;
+      margin-top: 15px;
+      margin-left: 0;
+      line-height: 20px;
+    }
+  }
+
+  .stripe-ad .lead {
+    margin-top: @buffer-lg;
+    padding: 0;
+  }
+
+  #carbonads-container {
+    .carbonad {
+      margin-left: 0;
+      margin-top: -20px;
+      float: none;
+      width: 100%;
+      height: 120px;
+    }
+  }
+  #azcarbon {
+    width: 300px;
+    margin: 0 auto;
+  }
+  .info-ad #carbonads-container .carbonad { margin-top: @buffer-lg; }
+
+  .hide-xs { display: none; }
+}