From 4df9f1ac2334323b5a21a02a992480c4a0505d7e Mon Sep 17 00:00:00 2001
From: Jason Costello <hello.costello@gmail.com>
Date: Sun, 9 Oct 2016 22:45:56 -0700
Subject: [PATCH] reposition feature images, correct skew issue

---
 website/source/assets/stylesheets/_home.scss | 22 ++++++++++++++++----
 website/source/index.html.erb                |  8 +++++--
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index b0aafdfdb..ecd32b4f8 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -211,11 +211,20 @@ body.page-home {
 		}
 
 		#feature-write-bg{
-			background: $white image-url("feature-write-bg.svg") 85% bottom no-repeat;
+			background: $white;
 			background-size: 570px;
 			z-index: 70;
 			@include skewY(3deg);
 			-webkit-backface-visibility: hidden;
+			overflow: hidden;
+
+			.feature-image {
+				position: absolute;
+				bottom: 0;
+				right:10%;
+				width: 560px;
+				@include skewY(-3deg);
+			}
 		}
 	}
 
@@ -251,8 +260,6 @@ body.page-home {
 		padding: 240px 0 180px;
 
 		>.container{
-			background: image-url("feature-create-bg.svg") 95% 20% no-repeat;
-			background-size: 42%;
 			z-index: 51;
 		}
 
@@ -262,10 +269,17 @@ body.page-home {
 
 		#feature-create-bg{
 			@include skewY(3deg);
-
 			z-index: 50;
+			overflow: hidden;
 		}
 
+		#feature-create-img{
+			position: absolute;
+			width: 420px;
+			top: 200px;
+			right: 100px;
+			@include skewY(-3deg);
+		}
 	}
 
 	#demos{
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 4e014a95b..0f6a0dd63 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -88,7 +88,9 @@
 			</div>
 		</div>
 	</div> <!-- /container -->
-	<div class="feature-skew" id="feature-write-bg"></div>
+	<div class="feature-skew" id="feature-write-bg">
+		<img class="feature-image" src="/assets/images/feature-write-bg.svg" />
+	</div>
 </div> <!-- /feature -->
 
 <div class="skew-item feature" id="feature-plan">
@@ -150,7 +152,9 @@
 			</div>
 		</div>
 	</div> <!-- /container -->
-	<div class="feature-skew" id="feature-create-bg"></div>
+	<div class="feature-skew" id="feature-create-bg">
+		<img id="feature-create-img" class="feature-image" src="/assets/images/feature-create-bg.svg" />
+	</div>
 </div> <!-- /feature -->
 
 <div class="skew-item" id="demos">