data-enhanced

<!--
* Basic structural tags for the body of an html5 document
* Based on HTML5 Bones http://html5bones.com/
-->

<header role="banner">
  <h1>Main Title</h1>
  <nav role="navigation">
    <ul>
      <li><a href="index.html">Home</a></li>

data-enhanced

// Box Shadows
// ------------------------

@box-shadow-lighter:   						0 0 2px hsla(0, 0%, 50%, 0.2);
@box-shadow-normal:								0 0 2px hsla(0, 0%, 50%, 0.3);
@box-shadow-darker:								0 0 2px hsla(0, 0%, 50%, 0.3);
@box-shadow-darkest:							0 0 2px hsla(0, 0%, 50%, 0.3);

// Down
@box-shadow-down-lighter: 				0 1px 1px hsla(0, 0%, 50%, 0.2);

data-enhanced

// Gradient Mixins
// ==============================

// HSLa Gradients
// Lays an HSLa alpha-transparency layer over top of any background color
// http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color
// http://css-tricks.com/yay-for-hsla/
// Be sure to use background-image NOT background,
//    to specify the gradient as the image ONLY, atop the underlying color
//

data-enhanced

// Handling Multiple Transitions
// http://stackoverflow.com/questions/5510568/multiple-properties-are-getting-treated-as-separate-arguments-in-mixins
.bitbr-transition(@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;

data-enhanced

// Social Icons with round backgrounds, using Font Awesome plus gradient and shadow variables I've setup and shared in other gists.

// Works with this markup:
<ul class="social">
  <li><a class="twitter" href="#" title="Twitter Profile"><i class="icon-twitter"></i></a></li>
  <li><a class="facebook" href="#" title="Facebook Page"><i class="icon-facebook"></i></a></li>
  <li><a class="linkedin" href="#" title="LinkedIn Profile"><i class="icon-linkedin"></i></a></li>
  <li><a class="googleplus" href="#" title="Google+ Profile"><i class="icon-google-plus"></i></a></li>
  <li><a class="github" href="#" title="GitHub Profile"><i class="icon-github-alt"></i></a></li>
</ul>

data-enhanced

  <aside class="related-stories">

    <h3>Related Stories</h3>
  <?php

    // wp_reset_query(); // running into strange problems
  	// remove_all_filters('posts_orderby'); // http://www.reinaris.nl/wp/wordpress-random-post-order-not-working-orderbyrand/
    // problem was that WP Engine dislikes random queries because it hits server hard
    // thus I decided to avoid random and chose another meaningful way of pulling related posts

data-enhanced

/* 
*  Subtler, clearer colors and edges
*  Emphsasize first two lists 
*  -- can be modified in CSS to include fewer or more lists 
*/

* {
border-radius: 0 !important;
}

data-enhanced

//
// Products Grid
// --------------------------------------------------

@media screen and (min-width: @tablet-min-width) {
  .products-grid {
		display: table;
		.product-item {
			display: inline-table;
			width: 46%;

data-enhanced

  .products-grid {
		display: table;
	}
	.product-item {
		display: inline-table;
		vertical-align: top; // needed by Safari
		width: 46%;
		margin-left: 2%;
	}

data-enhanced

// Credit David Walsh
// http://davidwalsh.name/hide-address-bar
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});