Skip to content

Commit 5906e5b

Browse files
author
JT
committed
#feature-auto skew bg only to avoid blurry fonts in chrome when using transforms
1 parent c34c2b6 commit 5906e5b

4 files changed

Lines changed: 36 additions & 6 deletions

File tree

website/source/index.html.erb

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
</div>
2525
</div>
2626
</div> <!-- /container -->
27+
<div class="feature-skew" id="feature-auto-bg"></div>
2728
</div> <!-- /feature -->
2829

2930
<div class="feature" id="feature-iterate">

website/source/stylesheets/_home.less

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,27 @@
3535
background-position: center 0;
3636
background-repeat: no-repeat;
3737
}
38+
39+
.feature-skew{
40+
position: absolute;
41+
top: 0px;
42+
bottom: 0px;
43+
left: 0px;
44+
width: 100%;
45+
height: 100%;
46+
}
3847
}
3948

4049
#feature-auto{
50+
position: relative;
4151
padding: 200px 0 300px;
4252
margin-top: -36px;
43-
background: #fff url(../images/white-wireframe.png) center top no-repeat;
44-
background-size: cover;
45-
46-
>.container{
53+
54+
#feature-auto-bg{
55+
background: #fff url(../images/white-wireframe.png) center top no-repeat;
56+
background-size: cover;
57+
.skewY(-3deg);
58+
z-index:-1;
4759
}
4860

4961
h2{

website/source/stylesheets/_jumbotron.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
#jumbotron-mask{
66
position:relative;
7-
z-index:0;
7+
z-index:-2;
88
height:700px;
99
margin-top: @negative-hero-margin;
1010
background-color: black;

website/source/stylesheets/main.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -594,7 +594,7 @@ body.page-home #footer {
594594
}
595595
#jumbotron-mask {
596596
position: relative;
597-
z-index: 0;
597+
z-index: -2;
598598
height: 700px;
599599
margin-top: -70px;
600600
background-color: black;
@@ -1040,11 +1040,28 @@ body.page-home #footer {
10401040
background-position: center 0;
10411041
background-repeat: no-repeat;
10421042
}
1043+
.feature .feature-skew {
1044+
position: absolute;
1045+
top: 0px;
1046+
bottom: 0px;
1047+
left: 0px;
1048+
width: 100%;
1049+
height: 100%;
1050+
}
10431051
#feature-auto {
1052+
position: relative;
10441053
padding: 200px 0 300px;
10451054
margin-top: -36px;
1055+
}
1056+
#feature-auto #feature-auto-bg {
10461057
background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
10471058
background-size: cover;
1059+
-webkit-transform: skewY(-3deg);
1060+
-moz-transform: skewY(-3deg);
1061+
-ms-transform: skewY(-3deg);
1062+
-o-transform: skewY(-3deg);
1063+
transform: skewY(-3deg);
1064+
z-index: -1;
10481065
}
10491066
#feature-auto h2 {
10501067
font-size: 43px;

0 commit comments

Comments
 (0)