fix blurry fonts. remove transform on content
This commit is contained in:
JT
parent
5906e5beef
commit
eb737744ed
|
|
@ -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">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<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">
|
||||
|
|
@ -48,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">
|
||||
|
|
@ -121,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">
|
||||
|
||||
|
|
@ -204,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">
|
||||
|
|
@ -220,4 +223,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-skew" id="cta-bg"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="footer-wrap">
|
||||
<div class="skew-item" id="footer-wrap">
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<ul class="footer-links nav navbar-nav">
|
||||
<li class="li-under"><a href="/intro/index.html">Intro</a></li>
|
||||
<li class="active li-under"><a href="/docs/index.html">Docs</a></li>
|
||||
<li class="li-under"><a href="/community.html">Community</a></li>
|
||||
<li class="li-under"><a href="/community.html">Community</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-hashi col-sm-5 col-xs-12">
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skew-item" id="footer-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
#jumbotron-mask{
|
||||
position:relative;
|
||||
z-index:-2;
|
||||
z-index:0;
|
||||
height:700px;
|
||||
margin-top: @negative-hero-margin;
|
||||
background-color: black;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue