From 5906e5beefe4421464267dc46e9ba445d36da66b Mon Sep 17 00:00:00 2001
From: JT <jt@ofitsownkind.com>
Date: Tue, 29 Jul 2014 00:37:17 -0700
Subject: [PATCH] #feature-auto skew bg only to avoid blurry fonts in chrome
 when using transforms

---
 website/source/index.html.erb              |  1 +
 website/source/stylesheets/_home.less      | 20 ++++++++++++++++----
 website/source/stylesheets/_jumbotron.less |  2 +-
 website/source/stylesheets/main.css        | 19 ++++++++++++++++++-
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index da3a2387f..88f5519bd 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -24,6 +24,7 @@
 			</div>
 		</div>
 	</div> <!-- /container -->
+	<div class="feature-skew" id="feature-auto-bg"></div>
 </div> <!-- /feature -->
 
 <div class="feature" id="feature-iterate">
diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less
index 1f85e8777..46bd96b07 100755
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@@ -35,15 +35,27 @@
 		background-position: center 0;
 		background-repeat: no-repeat;
 	}
+
+	.feature-skew{
+		position: absolute;
+		top: 0px; 
+		bottom: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+	}
 }
 
 #feature-auto{
+	position: relative;
 	padding: 200px 0 300px;
 	margin-top: -36px;
-	background: #fff url(../images/white-wireframe.png) center top no-repeat;
-	background-size: cover;
-
-	>.container{
+	
+	#feature-auto-bg{
+		background: #fff url(../images/white-wireframe.png) center top no-repeat;
+		background-size: cover;
+		.skewY(-3deg);
+		z-index:-1;
 	}
 
 	h2{
diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less
index 30df36368..aed9e1579 100755
--- a/website/source/stylesheets/_jumbotron.less
+++ b/website/source/stylesheets/_jumbotron.less
@@ -4,7 +4,7 @@
 
 #jumbotron-mask{
   position:relative;
-  z-index:0;
+  z-index:-2;
   height:700px;
   margin-top: @negative-hero-margin;
   background-color: black;
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index da8085de2..ff06ebce8 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -594,7 +594,7 @@ body.page-home #footer {
 }
 #jumbotron-mask {
   position: relative;
-  z-index: 0;
+  z-index: -2;
   height: 700px;
   margin-top: -70px;
   background-color: black;
@@ -1040,11 +1040,28 @@ body.page-home #footer {
   background-position: center 0;
   background-repeat: no-repeat;
 }
+.feature .feature-skew {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
 #feature-auto {
+  position: relative;
   padding: 200px 0 300px;
   margin-top: -36px;
+}
+#feature-auto #feature-auto-bg {
   background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
   background-size: cover;
+  -webkit-transform: skewY(-3deg);
+  -moz-transform: skewY(-3deg);
+  -ms-transform: skewY(-3deg);
+  -o-transform: skewY(-3deg);
+  transform: skewY(-3deg);
+  z-index: -1;
 }
 #feature-auto h2 {
   font-size: 43px;