playing around with styles

src/_includes/examples/buttons.html

@@ -25,7 +25,7 @@
           <i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
       </p>
       <p>
-        <a class="btn btn-primary" href="#">
+        <a class="btn btn-warning" href="#">
           <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a>
       </p>
     </div>
@@ -49,7 +49,7 @@
   <i class="fa-icon fa-icon-cog"></i> Settings</a>
 <a class="btn btn-lg btn-danger" href="#">
   <i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
-<a class="btn btn-primary" href="#">
+<a class="btn btn-warning" href="#">
   <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a>
 {% endhighlight %}
     </div>

src/assets/img/houndstooth.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+<g>
+	<polygon fill="#FFFFFF" points="0,0 24,0 16,8 16,16 0,32 0,24 8,16 0,16 	"/>
+	<polygon fill="#FFFFFF" points="32,0 16,16 24,16 32,8 	"/>
+	<polygon fill="#FFFFFF" points="8,32 16,24 16,32 	"/>
+</g>
+</svg>

src/assets/less/site-3.0.0.less

@@ -4,6 +4,7 @@
 
 @import "site/bootstrap/variables";
 @import "site/bootstrap/navbar";
+@import "site/bootstrap/buttons";
 @import "site/bootstrap/jumbotron";
 @import "site/bootstrap/code";
 @import "site/bootstrap/wells";

src/assets/less/site/bootstrap/buttons.less

@@ -0,0 +1,3 @@
+.btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
+.btn-default { text-shadow: 0 1px 0 #fff; }
+.btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info { text-shadow: 0 1px 0 rgba(0,0,0,0.2); }

src/assets/less/site/bootstrap/jumbotron.less

@@ -1,38 +1,44 @@
 .jumbotron {
-  background: @red;
+  background-color: @jumbotron-bg;
-  border-bottom: 1px solid @red-dark;
+  #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 50%), -40deg);
+  border-bottom: 1px solid @jumbotron-bg-dark;
   margin-bottom: 0;
   &, h1 { color: #fff; }
   padding: 30px 0;
-  #gradient > .directional(@red, mix(@red, @red-dark, 90%), -40deg);
+  position: relative;
-  //  background-color: @red;
 
-  //  &:after {
+  &:after {
-  //    content:'';
+    content: '';
-  //    display:block;
+    display: block;
-  //    position:absolute;
+    position: absolute;
-  //    top:0;
+    top: 0;
-  //    right:0;
+    right: 0;
-  //    bottom:0;
+    bottom: 0;
-  //    left:0;
+    left: 0;
-  //    background:url(../img/grain-tm400.png);
+    background: url(../img/houndstooth.svg);
-  //    opacity:.5;
+    background-size: 50px 50px;
-  //  }
+    opacity: .03;
+  }
+  .container {
+    position: relative;
+    z-index: 2;
+  }
 
   h1 {
     font-size: 80px;
     letter-spacing: -2px;
     line-height: 1;
-    text-shadow: 2px 2px 2px @red-dark;
+    text-shadow: 2px 2px 2px @jumbotron-bg-dark;
   }
   p {
-    color: mix(#fff, @red, 75%);
+    font-family: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: mix(#fff, @jumbotron-bg, 75%);
     margin-top: 15px;
     margin-bottom: 15px;
     font-size: 30px;
     line-height: 1.3;
     font-weight: lighter;
-    text-shadow: 1px 1px 1px @red-dark;
+    text-shadow: 1px 1px 1px @jumbotron-bg-dark;
   }
   .actions { margin-top: 25px;}
   // unsure if block below still in use
@@ -56,19 +62,20 @@
   }
   .btn-default {
     color: #fff;
-    background-color: @red;
+    background-color: @jumbotron-bg;
     border-color: #fff;
+    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
     &:hover {
       background-color: #fff;
-      color: @red;
+      color: @jumbotron-bg;
     }
   }
   .shameless-self-promotion {
     font-size: 14px;
     margin-top: 25px;
-    color: mix(#fff, @red, 40%);
+    color: mix(#fff, @jumbotron-bg, 40%);
-    a { color: mix(#fff, @red, 70%); }
+    a { color: mix(#fff, @jumbotron-bg, 70%); }
-    a:hover { color: mix(#fff, @red, 100%); }
+    a:hover { color: mix(#fff, @jumbotron-bg, 100%); }
   }
 }
 

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

@@ -4,8 +4,8 @@
 // -------------------
 
 // Links
-@link-color:            lighten(@red, 10%);
+@link-color:            lighten(@jumbotron-bg, 10%);
-@link-hover-color:      @red;
+@link-hover-color:      @jumbotron-bg;
 
 // Typography
 @font-family-sans-serif:  proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -34,7 +34,14 @@
 @navbar-height:                     40px;
 @navbar-inverse-brand-color:        #fff;
 
+@jumbotron-bg:          @red;
+@jumbotron-bg-dark:     darken(@jumbotron-bg, 10%);
 
+//@brand-primary:         @blue-dark;
+//@brand-success:         @green;
+//@brand-warning:         @yellow-dark;
+//@brand-danger:          @red;
+//@brand-info:            @blue;
 
 // SITE VARIABLES
 // --------------

src/assets/less/site/footer.less

@@ -1,7 +1,7 @@
 #footer {
   //  #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
-  background-color: @red;
+  background-color: @jumbotron-bg;
-  border-top: 1px solid mix(@red, @red-dark, 50%);
+  border-top: 1px solid mix(@jumbotron-bg, @jumbotron-bg-dark, 50%);
   a {
     color: #fff;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@@ -15,7 +15,7 @@
     padding-top: 40px;
   }
 
-  color: mix(@red, #fff, 35%);
+  color: mix(@jumbotron-bg, #fff, 35%);
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   .project { margin-top: 10px; }
 }

src/assets/less/site/jumbotron-carousel.less

@@ -4,7 +4,7 @@
   font-size: @size;
   text-align: center;
   line-height: @size + 5;
-  text-shadow: 2px 2px 2px @red-dark;
+  text-shadow: 2px 2px 2px @jumbotron-bg-dark;
   .carousel-control {
     top: @size + 23px;
     .square(30px);

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

@@ -22,7 +22,7 @@
       font-size: 90px;
     }
     p {
-      font-size: 35px;
+      font-size: 28px;
       margin: 35px 0 20px;
     }
   }
@@ -31,7 +31,7 @@
     padding: 50px 0;
     h1 { font-size: 100px; }
     p {
-      font-size: 40px;
+      font-size: 32px;
       margin: 20px 0;
     }
     .btn-large {