Merge pull request #90 from hashicorp/skewfix

Fixing Font Skews on Homepage
2014-07-29 13:25:58 -04:00 · 2014-07-29 13:25:58 -04:00 · e4a6fcd64b
parent 6653542466 edf67669ec
commit e4a6fcd64b
6 changed files with 139 additions and 77 deletions
--- a/website/source/package.json
+++ b/website/source/package.json
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@ -7,7 +7,7 @@
 	</div>
 </div>

-<div class="feature" id="feature-auto">
+<div class="feature skew-item" id="feature-auto">
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-7 col-md-7 col-sm-12">
@ -24,9 +24,10 @@
 			</div>
 		</div>
 	</div> <!-- /container -->
+	<div class="feature-skew" id="feature-auto-bg"></div>
 </div> <!-- /feature -->

-<div class="feature" id="feature-iterate">
+<div class="feature skew-item" id="feature-iterate">
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-5 col-md-5 col-sm-12">
@ -47,9 +48,10 @@
 			</div>
 		</div>
 	</div> <!-- /container -->
+	<div class="feature-skew" id="feature-iterate-bg"></div>
 </div> <!-- /feature -->

-<div class="feature" id="feature-clone">
+<div class="feature skew-item" id="feature-clone">
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-5 col-md-5 col-sm-12">
@ -120,9 +122,10 @@
 			</div>
 		</div>
 	</div> <!-- /container -->
+	<div class="feature-skew" id="feature-clone-bg"></div>
 </div> <!-- /feature -->

-<div id="demos">
+<div class="skew-item" id="demos">
 	<div class="container">
 		<div class="terminals row">

@ -203,9 +206,10 @@
 			</div> <!-- /.terminal-item -->
 		</div>
 	</div>
+	<div class="feature-skew" id="demo-bg"></div>
 </div><!-- /#demos -->

-<div id="cta">
+<div class="skew-item" id="cta">
 	<div class="container">
 		<div class="row">
 			<div class="intro">
@ -219,4 +223,5 @@
 			</div>
 		</div>
 	</div>
+	<div class="feature-skew" id="cta-bg"></div>
 </div>
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@ -1,4 +1,4 @@
-<div id="footer-wrap">
+<div class="skew-item" id="footer-wrap">
 	<div id="footer">
 		<div class="container">
 			<div class="row">
@ -17,6 +17,7 @@
 				</div>
 			</div>
 		</div>
+		<div class="skew-item" id="footer-bg"></div>
 	</div>
 </div>
 </div>
--- a/website/source/stylesheets/_footer.less
+++ b/website/source/stylesheets/_footer.less
@ -13,14 +13,6 @@ body.page-home{
 #footer{
    padding: 140px 0 40px;
    color: black;
-    background-color: white;
-    .skew {
-        .skewY(-2deg);
-    }
-
-    >.container.skew{
-        .skewY(2deg);
-    }

    a{
        color: black;
@ -151,6 +143,16 @@ body.page-home{
    }
 }

+
+@media (min-width: 1500px) {
+    body.page-home{
+        #footer{
+            margin-top: -60px;
+            padding: 190px 0 40px;
+        }
+    }
+}
+
@media (max-width: 992px) {
    .page-sub #footer, #footer{
        .footer-hashi {
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@ -35,15 +35,36 @@
 		background-position: center 0;
 		background-repeat: no-repeat;
 	}
+
+}
+
+.skew-item{
+	>.container{
+		position: relative;
+		top: 0;
+		z-index: 11;
+	}
+
+	.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-bg{
 		background: #fff url(../images/white-wireframe.png) center top no-repeat;
 		background-size: cover;
-
-	>.container{
+		.skewY(-3deg);
+		z-index: 10;
 	}

 	h2{
@ -67,17 +88,22 @@
 }

 #feature-iterate{
+	position: relative;
 	margin-top: -80px;
 	padding: 280px 0 360px;
 	color: white;
+
+	>.container{
+		z-index: 21;
+	}
+
+	#feature-iterate-bg{
 		background: #fff url(../images/feature-iterate-bg.png) center top no-repeat;
 		border-top: 2px solid white;
 		border-bottom: 2px solid @purple;
 		background-size: cover;
 		.skewY(3deg);
-
-	>.container{
-		.skewY(-3deg);
+		z-index: 20;
 	}	

 	p{
@ -117,14 +143,19 @@
 }

 #feature-clone{
+	position: relative;
 	margin-top: -80px;
 	padding: 240px 0 300px;
 	color: white;
-	background-color: @purple;
-	.skewY(3deg);

 	>.container{
-		.skewY(-3deg);
+		z-index: 21;
+	}
+
+	#feature-clone-bg{
+		background-color: @purple;
+		.skewY(3deg);
+		z-index: 20;
 	}		

 	h2{
@ -177,12 +208,17 @@


 #cta {
+	position: relative;
 	padding: 180px 0 220px;
-	background-color: @purple;
-	.skewY(-3deg);

 	>.container{
-		.skewY(3deg);
+		z-index: 21;
+	}
+
+	#cta-bg{
+		background-color: @purple;
+		.skewY(-3deg);
+		z-index: 20;
 	}	

 	.intro {
@ -230,13 +266,18 @@
 }

 #demos{
+	position: relative;
 	padding: 180px 0 60px;
-	background-color: #000;
 	margin-top: -80px;
-	.skewY(-3deg);

 	>.container{
-		.skewY(3deg);
+		z-index: 31;
+	}
+
+	#demo-bg{
+		background-color: #000;
+		.skewY(-3deg);
+		z-index: 30;
 	}

 	.explantion {
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@ -410,21 +410,6 @@ body.page-home #footer {
 #footer {
  padding: 140px 0 40px;
  color: black;
-  background-color: white;
-}
-#footer .skew {
-  -webkit-transform: skewY(-2deg);
-  -moz-transform: skewY(-2deg);
-  -ms-transform: skewY(-2deg);
-  -o-transform: skewY(-2deg);
-  transform: skewY(-2deg);
-}
-#footer > .container.skew {
-  -webkit-transform: skewY(2deg);
-  -moz-transform: skewY(2deg);
-  -ms-transform: skewY(2deg);
-  -o-transform: skewY(2deg);
-  transform: skewY(2deg);
 }
 #footer a {
  color: black;
@ -550,6 +535,12 @@ body.page-home #footer {
    background-size: 37px 40px;
  }
 }
+@media (min-width: 1500px) {
+  body.page-home #footer {
+    margin-top: -60px;
+    padding: 190px 0 40px;
+  }
+}
@media (max-width: 992px) {
  .page-sub #footer .footer-hashi,
  #footer .footer-hashi {
@ -1040,11 +1031,33 @@ body.page-home #footer {
  background-position: center 0;
  background-repeat: no-repeat;
 }
+.skew-item > .container {
+  position: relative;
+  top: 0;
+  z-index: 11;
+}
+.skew-item .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: 10;
 }
 #feature-auto h2 {
  font-size: 43px;
@ -1063,9 +1076,15 @@ body.page-home #footer {
  font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
 }
 #feature-iterate {
+  position: relative;
  margin-top: -80px;
  padding: 280px 0 360px;
  color: white;
+}
+#feature-iterate > .container {
+  z-index: 21;
+}
+#feature-iterate #feature-iterate-bg {
  background: #ffffff url(../images/feature-iterate-bg.png) center top no-repeat;
  border-top: 2px solid white;
  border-bottom: 2px solid #822ff7;
@ -1075,13 +1094,7 @@ body.page-home #footer {
  -ms-transform: skewY(3deg);
  -o-transform: skewY(3deg);
  transform: skewY(3deg);
-}
-#feature-iterate > .container {
-  -webkit-transform: skewY(-3deg);
-  -moz-transform: skewY(-3deg);
-  -ms-transform: skewY(-3deg);
-  -o-transform: skewY(-3deg);
-  transform: skewY(-3deg);
+  z-index: 20;
 }
 #feature-iterate p {
  text-align: right;
@ -1116,22 +1129,22 @@ body.page-home #footer {
  color: white;
 }
 #feature-clone {
+  position: relative;
  margin-top: -80px;
  padding: 240px 0 300px;
  color: white;
+}
+#feature-clone > .container {
+  z-index: 21;
+}
+#feature-clone #feature-clone-bg {
  background-color: #822ff7;
  -webkit-transform: skewY(3deg);
  -moz-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  -o-transform: skewY(3deg);
  transform: skewY(3deg);
-}
-#feature-clone > .container {
-  -webkit-transform: skewY(-3deg);
-  -moz-transform: skewY(-3deg);
-  -ms-transform: skewY(-3deg);
-  -o-transform: skewY(-3deg);
-  transform: skewY(-3deg);
+  z-index: 20;
 }
 #feature-clone h2 {
  color: white;
@ -1175,20 +1188,20 @@ body.page-home #footer {
  margin: 5px 5px 0 0;
 }
 #cta {
+  position: relative;
  padding: 180px 0 220px;
+}
+#cta > .container {
+  z-index: 21;
+}
+#cta #cta-bg {
  background-color: #822ff7;
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
-}
-#cta > .container {
-  -webkit-transform: skewY(3deg);
-  -moz-transform: skewY(3deg);
-  -ms-transform: skewY(3deg);
-  -o-transform: skewY(3deg);
-  transform: skewY(3deg);
+  z-index: 20;
 }
 #cta .intro .left {
  text-align: right;
@ -1224,21 +1237,21 @@ body.page-home #footer {
  text-decoration: none;
 }
 #demos {
+  position: relative;
  padding: 180px 0 60px;
-  background-color: #000;
  margin-top: -80px;
+}
+#demos > .container {
+  z-index: 31;
+}
+#demos #demo-bg {
+  background-color: #000;
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
-}
-#demos > .container {
-  -webkit-transform: skewY(3deg);
-  -moz-transform: skewY(3deg);
-  -ms-transform: skewY(3deg);
-  -o-transform: skewY(3deg);
-  transform: skewY(3deg);
+  z-index: 30;
 }
 #demos .explantion {
  margin: 40px 0 60px 15px;