making borders more subtle, making examples appear better on mobile

src/_includes/examples/bootstrap.html

@@ -2,9 +2,6 @@
   <h2 class="page-header">Bootstrap 3 Examples</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <p>
-        Font Awesome works great with the full range of Bootstrap components.
-      </p>
       <p>
         <a class="btn btn-danger" href="#">
           <i class="fa fa-trash-o fa-lg"></i> Delete</a>
@@ -50,6 +47,9 @@
 
     </div>
     <div class="col-md-9 col-sm-8">
+      <p>
+        Font Awesome works great with the full range of Bootstrap components.
+      </p>
 {% highlight html %}
 <a class="btn btn-danger" href="#">
   <i class="fa fa-trash-o fa-lg"></i> Delete</a>

src/_includes/examples/fixed-width.html

@@ -2,7 +2,7 @@
   <h2 class="page-header">Fixed Width Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <ul class="nav nav-pills nav-stacked">
+      <ul class="nav nav-pills nav-stacked margin-bottom">
         <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a></li>
         <li><a href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a></li>
         <li><a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a></li>

src/_includes/examples/inline.html

@@ -2,7 +2,9 @@
   <h2 class="page-header">Inline Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <i class="fa fa-camera-retro"></i> fa-camera-retro
+      <p>
+        <i class="fa fa-camera-retro"></i> fa-camera-retro
+      </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>Place Font Awesome icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>

src/_includes/examples/rotated-flipped.html

@@ -2,14 +2,14 @@
   <h2 class="page-header">Rotated &amp; Flipped</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <div style="font-size: 18px;">
+      <p style="font-size: 18px;">
         <i class="fa fa-shield"></i>&nbsp; normal<br>
         <i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
         <i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
         <i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
         <i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
         <i class="fa fa-shield fa-flip-vertical"></i>&nbsp; fa-flip-vertical
-      </div>
+      </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>

src/_includes/examples/spinning.html

@@ -2,9 +2,11 @@
   <h2 class="page-header">Spinning Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
-      <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
-      <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
+      <p>
+        <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
+        <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
+        <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
+      </p>
     </div>
     <div class="col-md-9 col-sm-8">
       <p>

src/_includes/examples/stacked.html

@@ -2,7 +2,7 @@
   <h2 class="page-header">Stacked Icons</h2>
   <div class="row">
     <div class="col-md-3 col-sm-4">
-      <div>
+      <div class="margin-bottom">
         <span class="fa-stack fa-lg">
           <i class="fa fa-square-o fa-stack-2x"></i>
           <i class="fa fa-twitter fa-stack-1x"></i>

src/assets/less/site/bootstrap/variables.less

@@ -102,7 +102,7 @@
 // Form states and alerts
 @state-success-text:            @fa-green;
 @state-success-bg:              mix(@fa-green, #fff, 6%);
-@state-success-border:          darken(spin(@state-success-bg, -10), 13%);
+@state-success-border:          darken(spin(@state-success-bg, -10), 5%);
 
 @state-info-text:               mix(@blue-dark, @blue, 50%);
 @state-info-bg:                 @blue-lighter;
@@ -117,4 +117,4 @@
 
 
 // Code
-@pre-border-color:              #e5e5e5;
+@pre-border-color:              #eee;

src/assets/less/site/carbonad.less

@@ -1,7 +1,7 @@
 #carbonads-container {
   .carbonad {
-    background: @table-bg-accent;
-    border-color: @table-border-color;
+    background: @pre-bg;
+    border-color: @pre-border-color;
     border-radius: (@border-radius-base);
     border-width: 1px;
     float: right;