ResiLien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#feature-auto skew bg only to avoid blurry fonts in chrome when using transforms

This commit is contained in:
JT 2014-07-29 00:37:17 -07:00
parent c34c2b6b54
commit 5906e5beef
4 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
website/source/index.html.erb
View File

@ -24,6 +24,7 @@
</div> </div>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<div class="feature-skew" id="feature-auto-bg"></div>
</div> <!-- /feature --> </div> <!-- /feature -->
<div class="feature" id="feature-iterate"> <div class="feature" id="feature-iterate">

20
website/source/stylesheets/_home.less
View File

@ -35,15 +35,27 @@
background-position: center 0; background-position: center 0;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.feature-skew{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
}
} }
#feature-auto{ #feature-auto{
position: relative;
padding: 200px 0 300px; padding: 200px 0 300px;
margin-top: -36px; margin-top: -36px;
background: #fff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover; #feature-auto-bg{
background: #fff url(../images/white-wireframe.png) center top no-repeat;
>.container{ background-size: cover;
.skewY(-3deg);
z-index:-1;
} }
h2{ h2{

2
website/source/stylesheets/_jumbotron.less
View File

@ -4,7 +4,7 @@
#jumbotron-mask{ #jumbotron-mask{
position:relative; position:relative;
z-index:0; z-index:-2;
height:700px; height:700px;
margin-top: @negative-hero-margin; margin-top: @negative-hero-margin;
background-color: black; background-color: black;

19
website/source/stylesheets/main.css
View File

@ -594,7 +594,7 @@ body.page-home #footer {
} }
#jumbotron-mask { #jumbotron-mask {
position: relative; position: relative;
z-index: 0; z-index: -2;
height: 700px; height: 700px;
margin-top: -70px; margin-top: -70px;
background-color: black; background-color: black;
@ -1040,11 +1040,28 @@ body.page-home #footer {
background-position: center 0; background-position: center 0;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.feature .feature-skew {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#feature-auto { #feature-auto {
position: relative;
padding: 200px 0 300px; padding: 200px 0 300px;
margin-top: -36px; margin-top: -36px;
}
#feature-auto #feature-auto-bg {
background: #ffffff url(../images/white-wireframe.png) center top no-repeat; background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover; background-size: cover;
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
z-index: -1;
} }
#feature-auto h2 { #feature-auto h2 {
font-size: 43px; font-size: 43px;