rewrite Feature Write styles with image toggle for layout

website/source/assets/stylesheets/_home.scss

@@ -191,7 +191,7 @@ body.page-home {
 
 	#feature-write{
 		position: relative;
-		padding: 180px 0 200px;
+		padding: 180px 0 120px;
 		margin-top: -80px;
 
 
@@ -199,21 +199,33 @@ body.page-home {
 			z-index: 71;
 		}
 
+		// This svg appears twice in the markup and swapped for layout purposes.
+		// Image for small screens. Styles below are for larger screens.
+		#feature-image-write-sm-screen {
+			display: block;
+			position: relative;
+			margin: 0 auto;
+			width:80%;
+			max-width: 400px;
+		}
+
+		// Image hidden, made visible for larger screens
+		#feature-image-write-lg-screen {
+			display: none;
+			position: absolute;
+			bottom: 2px;
+			right: 3%;
+			width: 581px;
+			@include skewY(-3deg);
+			-webkit-backface-visibility: hidden;
+		}
+
 		#feature-write-bg{
 			background: $white;
 			z-index: 70;
 			@include skewY(3deg);
 			-webkit-backface-visibility: hidden;
 			overflow: hidden;
-
-			.feature-image {
-				position: absolute;
-				bottom: 0;
-				right:10%;
-				width: 640px;
-				@include skewY(-3deg);
-				-webkit-backface-visibility: hidden;
-			}
 		}
 	}
 
@@ -490,26 +502,27 @@ body.page-home {
 		}
 	}
 
+	@media (min-width: 768px) {
+		#feature-write{
+			// Hide image for small screens
+			#feature-image-write-sm-screen {
+				display: none;
+			}
 
-	@media (min-width: 1500px) {
-
+			// Image hidden, made visible for larger screens
+			#feature-image-write-lg-screen {
+				display: block;
+			}
+		}
 	}
 
-	@media (min-width: 1200px) {
-
-	}
-
-
-	@media (max-width: 1200px) {
-
-	}
-
-	@media (min-width: 992px) and (max-width:1200px) {
-
-	}
-
-	@media (min-width: 768px) and (max-width:992px) {
-
+	@media (min-width: 1024px) {
+		#feature-write{
+			#feature-image-write-lg-screen {
+				right: 10%;
+				width: 640px;
+			}
+		}
 	}
 
 	@media (max-width: 992px) {

website/source/index.html.erb

@@ -88,6 +88,7 @@
 				<h2>Infrastructure as code</h2>
 				<p class="lead">Define infrastructure as code to increase operator productivity through collaboration and automation.</p>
 			</div>
+			<img class="feature-image" id="feature-image-write-sm-screen" src="/assets/images/feature-write-bg.svg" />
 			<div class="col-sm-4">
 				<h3>Collaborate &amp; share</h3>
 				<p>Terraform configuration and state can be stored in version control,
@@ -100,7 +101,7 @@
 		</div>
 	</div> <!-- /container -->
 	<div class="feature-skew" id="feature-write-bg">
-		<img class="feature-image" src="/assets/images/feature-write-bg.svg" />
+		<img class="feature-image" id="feature-image-write-lg-screen" src="/assets/images/feature-write-bg.svg" />
 	</div>
 </div> <!-- /feature -->