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

fix blurry fonts. remove transform on content

This commit is contained in:
JT 2014-07-29 01:56:17 -07:00
parent 5906e5beef
commit eb737744ed
6 changed files with 97 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

3
website/source/layouts/_footer.erb
View File

@ -1,4 +1,4 @@
<div id="footer-wrap">
<div class="skew-item" id="footer-wrap">
<div id="footer">
<div class="container">
<div class="row">
@ -17,6 +17,7 @@
</div>
</div>
</div>
<div class="skew-item" id="footer-bg"></div>
</div>
</div>
</div>

8
website/source/stylesheets/_footer.less
View File

@ -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;

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

@ -36,6 +36,15 @@
background-repeat: no-repeat;
}
}
.skew-item{
>.container{
position: relative;
top: 0;
z-index: 11;
}
.feature-skew{
position: absolute;
top: 0px;
@ -55,7 +64,7 @@
background: #fff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover;
.skewY(-3deg);
z-index:-1;
z-index: 10;
}
h2{
@ -79,17 +88,22 @@
}
#feature-iterate{
position: relative;
margin-top: -80px;
padding: 280px 0 360px;
color: white;
>.container{
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);
>.container{
.skewY(-3deg);
z-index: 20;
}
p{
@ -129,14 +143,19 @@
}
#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{
@ -189,12 +208,17 @@
#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 {
@ -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 {

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

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

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

@ -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;