From eb737744ed755aa1e59da0dec76242bdf4950046 Mon Sep 17 00:00:00 2001 From: JT Date: Tue, 29 Jul 2014 01:56:17 -0700 Subject: [PATCH] fix blurry fonts. remove transform on content --- website/source/index.html.erb | 14 ++-- website/source/layouts/_footer.erb | 5 +- website/source/stylesheets/_footer.less | 8 --- website/source/stylesheets/_home.less | 65 ++++++++++++----- website/source/stylesheets/_jumbotron.less | 2 +- website/source/stylesheets/main.css | 84 ++++++++++------------ 6 files changed, 97 insertions(+), 81 deletions(-) diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 88f5519bdc..92a6c3f17b 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -7,7 +7,7 @@ -
+
@@ -27,7 +27,7 @@
-
+
@@ -48,9 +48,10 @@
+
-
+
@@ -121,9 +122,10 @@
+
-
+
@@ -204,9 +206,10 @@
+
-
+
@@ -220,4 +223,5 @@
+
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;