+
-
-
+
diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb
index 3f977d947a..9120fb0aae 100644
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@@ -1,4 +1,4 @@
-
diff --git a/website/source/stylesheets/_footer.less b/website/source/stylesheets/_footer.less
index 5fabf0c653..4f0aeef429 100644
--- 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;
diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less
index 46bd96b077..b114f2bcb6 100755
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@@ -36,6 +36,15 @@
background-repeat: no-repeat;
}
+}
+
+.skew-item{
+ >.container{
+ position: relative;
+ top: 0;
+ z-index: 11;
+ }
+
.feature-skew{
position: absolute;
top: 0px;
@@ -43,19 +52,19 @@
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;
.skewY(-3deg);
- z-index:-1;
+ z-index: 10;
}
h2{
@@ -79,19 +88,24 @@
}
#feature-iterate{
+ position: relative;
margin-top: -80px;
padding: 280px 0 360px;
color: white;
- 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: 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);
+ z-index: 20;
+ }
+
p{
text-align: right;
padding-left: 120px;
@@ -129,16 +143,21 @@
}
#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{
color: white;
font-size: 37px;
@@ -189,14 +208,19 @@
#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 {
.left {
text-align: right;
@@ -242,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 {
diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less
index aed9e1579e..30df363686 100755
--- a/website/source/stylesheets/_jumbotron.less
+++ b/website/source/stylesheets/_jumbotron.less
@@ -4,7 +4,7 @@
#jumbotron-mask{
position:relative;
- z-index:-2;
+ z-index:0;
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 ff06ebce86..82484ceb29 100644
--- 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;
@@ -594,7 +579,7 @@ body.page-home #footer {
}
#jumbotron-mask {
position: relative;
- z-index: -2;
+ z-index: 0;
height: 700px;
margin-top: -70px;
background-color: black;
@@ -1040,7 +1025,12 @@ body.page-home #footer {
background-position: center 0;
background-repeat: no-repeat;
}
-.feature .feature-skew {
+.skew-item > .container {
+ position: relative;
+ top: 0;
+ z-index: 11;
+}
+.skew-item .feature-skew {
position: absolute;
top: 0px;
bottom: 0px;
@@ -1061,7 +1051,7 @@ body.page-home #footer {
-ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
- z-index: -1;
+ z-index: 10;
}
#feature-auto h2 {
font-size: 43px;
@@ -1080,9 +1070,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;
@@ -1092,13 +1088,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;
@@ -1133,22 +1123,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;
@@ -1192,20 +1182,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;
@@ -1241,21 +1231,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;