making borders more subtle, making examples appear better on mobile

diff --git a/src/_includes/examples/bootstrap.html b/src/_includes/examples/bootstrap.html
index 246b7426bca2cb7c4037cc834065bb39774a66ba..32b9d85cfe011fa157a070b481cbffb9f55c7544 100644 (file)
--- a/src/_includes/examples/bootstrap.html
+++ b/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>

diff --git a/src/_includes/examples/fixed-width.html b/src/_includes/examples/fixed-width.html
index 9f16ec380b0aac8323f201715c8fa7edc5130d92..f14e7e43b646b1619dcb471a6c9f106e10a98bbc 100644 (file)
--- a/src/_includes/examples/fixed-width.html
+++ b/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>

diff --git a/src/_includes/examples/inline.html b/src/_includes/examples/inline.html
index 794a2ae598cd892d55c4d6c59adfec494706e17d..93f302458697b5ca49c4ed7e55a48587d0cc6379 100644 (file)
--- a/src/_includes/examples/inline.html
+++ b/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>

diff --git a/src/_includes/examples/rotated-flipped.html b/src/_includes/examples/rotated-flipped.html
index 87616b1460e314ec83e59de4ec73dfa6ea590cde..ff55f2c1cda59965c41342843e96f4c30240cca5 100644 (file)
--- a/src/_includes/examples/rotated-flipped.html
+++ b/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>

diff --git a/src/_includes/examples/spinning.html b/src/_includes/examples/spinning.html
index 5c3cff62b2524f1b0713c74641f5fefa093bef6e..4bdb3d0ed678313b9514de753711b68056a032d6 100644 (file)
--- a/src/_includes/examples/spinning.html
+++ b/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>

diff --git a/src/_includes/examples/stacked.html b/src/_includes/examples/stacked.html
index 64294bfab4a436fe68e337768aaea175bfd008ed..0a34c5c262a5660d8ec90c57bc5341696423c22d 100644 (file)
--- a/src/_includes/examples/stacked.html
+++ b/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>

diff --git a/src/assets/less/site/bootstrap/variables.less b/src/assets/less/site/bootstrap/variables.less
index 353c55390d19379778132b730ecbc20feb243de8..e260f0d445991cc52a8672ab5ba223243c52e98b 100644 (file)
--- a/src/assets/less/site/bootstrap/variables.less
+++ b/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;

diff --git a/src/assets/less/site/carbonad.less b/src/assets/less/site/carbonad.less
index 5e6033b5564387c40f7340e151ab54afb34240c6..44644e08d7dd72f34db18e6d5b29a2e84072bf22 100644 (file)
--- a/src/assets/less/site/carbonad.less
+++ b/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;