tweaking for responsive

source/_includes/examples/new.html

@@ -14,7 +14,7 @@
     </div>
     <div class="span4">
       <h4><a href="#stacked">Stacked Icons</a></h4>
-      <div class="well well-transparent">
+      <div class="well well-transparent stacked">
         <span class="icon-stack">
           <i class="icon-check-empty icon-stack-base"></i>
           <i class="icon-twitter"></i>

source/_includes/examples/stacked.html

@@ -21,7 +21,12 @@
           <i class="icon-sign-blank icon-stack-base"></i>
           <i class="icon-terminal icon-light"></i>
         </span>
-        icon-terminal on icon-sign-blank
+        icon-terminal on icon-sign-blank<br>
+        <span class="icon-stack">
+          <i class="icon-camera"></i>
+          <i class="icon-ban-circle icon-stack-base text-error"></i>
+        </span>
+        icon-camera on icon-ban-circle
       </div>
 {% highlight html %}
 <span class="icon-stack">
@@ -38,7 +43,12 @@ icon-flag on icon-circle<br>
   <i class="icon-sign-blank icon-stack-base"></i>
   <i class="icon-terminal icon-light"></i>
 </span>
-icon-terminal on icon-sign-blank
+icon-terminal on icon-sign-blank<br>
+<span class="icon-stack">
+  <i class="icon-camera"></i>
+  <i class="icon-ban-circle icon-stack-base text-error"></i>
+</span>
+icon-camera on icon-ban-circle
 {% endhighlight %}
     </div>
   </div>

source/_includes/license.html

@@ -8,8 +8,12 @@
 
 <div>
   <div class="alert alert-info">
-    <i class="icon-info-sign icon-2x pull-left margin-top-small padding-right-small"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:<br>
+    <ul class="icons-ul margin-bottom-none">
+      <li>
+        <i class="icon-li icon-info-sign icon-large"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated:
         <code>Font Awesome by Dave Gandy - http://fontawesome.io</code>.
+      </li>
+    </ul>
   </div>
 </div>
 

source/_layouts/icon.html

@@ -7,10 +7,12 @@ relative_path: ../../
   <div class="container">
     <div class="info-icons">
       <i class="icon-{{ page.icon.id }} icon-6"></i>&nbsp;&nbsp;
+      <span class="hidden-phone">
         <i class="icon-{{ page.icon.id }} icon-5"></i>&nbsp;&nbsp;
-      <i class="icon-{{ page.icon.id }} icon-4"></i>&nbsp;&nbsp;
+        <span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i>&nbsp;&nbsp;</span>
         <i class="icon-{{ page.icon.id }} icon-3"></i>&nbsp;&nbsp;
         <i class="icon-{{ page.icon.id }} icon-2"></i>&nbsp;
+      </span>
       <i class="icon-{{ page.icon.id }} icon-1"></i>
     </div>
     <h1 class="info-class">
@@ -23,7 +25,7 @@ relative_path: ../../
         {% for category in page.icon.categories %}
           {{ category }}{% unless forloop.last %},{% endunless %}
         {% endfor %}
-        {% if page.icon.aliases %}
+        {% if page.icon.aliases | size == 0 %}
           &middot; Aliases:
           {% for alias in page.icon.aliases %}
             icon-{{ alias }}{% unless forloop.last %},{% endunless %}

source/assets/less/responsive-767px-max.less

@@ -43,6 +43,16 @@
     }
   }
 
+  .jumbotron-icon {
+    .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 0; }
+    h1 small {
+      display: block;
+      margin-top: 15px;
+      margin-left: 0;
+      line-height: 20px;
+    }
+  }
+
   .stripe-ad .lead {
     margin: 0 0 30px;
   }

source/assets/less/responsive-768px-979px.less

@@ -32,6 +32,15 @@
     p { font-size: 28px; }
   }
 
+  .jumbotron-icon {
+    h1 small {
+      display: block;
+      margin-top: 15px;
+      margin-left: 0;
+      line-height: 20px;
+    }
+  }
+
   .stripe-ad {
     .lead {
       margin: 0;
@@ -42,7 +51,7 @@
     .span4 { width: @ad-width; }
   }
 
-  #why, #whats-new {
+  #why, #whats-new, #new-styles {
     .span4 { width: 352px; }
   }
 

source/assets/less/site.less

@@ -192,6 +192,11 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
 
 section { margin-top: 40px; }
 
+.stacked {
+  padding-top: 35px;
+  height: 105px;
+}
+
 #social-buttons {
   ul.unstyled { margin: 0; }