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

Merge pull request #90 from hashicorp/skewfix 

Fixing Font Skews on Homepage
This commit is contained in:
Jack Pearkes 2014-07-29 13:25:58 -04:00
parent 6653542466 edf67669ec
commit e4a6fcd64b
6 changed files with 139 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
website/source/package.json → website/package.json
View File

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

@ -7,7 +7,7 @@
</div> </div>
</div> </div>
<div class="feature" id="feature-auto"> <div class="feature skew-item" id="feature-auto">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-7 col-md-7 col-sm-12"> <div class="col-lg-7 col-md-7 col-sm-12">
@ -24,9 +24,10 @@
</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 skew-item" id="feature-iterate">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-5 col-sm-12"> <div class="col-lg-5 col-md-5 col-sm-12">
@ -47,9 +48,10 @@
</div> </div>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<div class="feature-skew" id="feature-iterate-bg"></div>
</div> <!-- /feature --> </div> <!-- /feature -->
<div class="feature" id="feature-clone"> <div class="feature skew-item" id="feature-clone">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-5 col-sm-12"> <div class="col-lg-5 col-md-5 col-sm-12">
@ -120,9 +122,10 @@
</div> </div>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<div class="feature-skew" id="feature-clone-bg"></div>
</div> <!-- /feature --> </div> <!-- /feature -->
<div id="demos"> <div class="skew-item" id="demos">
<div class="container"> <div class="container">
<div class="terminals row"> <div class="terminals row">
@ -203,9 +206,10 @@
</div> <!-- /.terminal-item --> </div> <!-- /.terminal-item -->
</div> </div>
</div> </div>
<div class="feature-skew" id="demo-bg"></div>
</div><!-- /#demos --> </div><!-- /#demos -->
<div id="cta"> <div class="skew-item" id="cta">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="intro"> <div class="intro">
@ -219,4 +223,5 @@
</div> </div>
</div> </div>
</div> </div>
<div class="feature-skew" id="cta-bg"></div>
</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 id="footer">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -17,6 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="skew-item" id="footer-bg"></div>
</div> </div>
</div> </div>
</div> </div>

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

@ -13,14 +13,6 @@ body.page-home{
#footer{ #footer{
padding: 140px 0 40px; padding: 140px 0 40px;
color: black; color: black;
background-color: white;
.skew {
.skewY(-2deg);
}
>.container.skew{
.skewY(2deg);
}
a{ a{
color: black; color: black;
@ -151,6 +143,16 @@ body.page-home{
} }
} }
@media (min-width: 1500px) {
body.page-home{
#footer{
margin-top: -60px;
padding: 190px 0 40px;
}
}
}
@media (max-width: 992px) { @media (max-width: 992px) {
.page-sub #footer, #footer{ .page-sub #footer, #footer{
.footer-hashi { .footer-hashi {

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

@ -35,15 +35,36 @@
background-position: center 0; background-position: center 0;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
}
.skew-item{
>.container{
position: relative;
top: 0;
z-index: 11;
}
.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-bg{
background: #fff url(../images/white-wireframe.png) center top no-repeat; background: #fff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover; background-size: cover;
.skewY(-3deg);
>.container{ z-index: 10;
} }
h2{ h2{
@ -67,17 +88,22 @@
} }
#feature-iterate{ #feature-iterate{
position: relative;
margin-top: -80px; margin-top: -80px;
padding: 280px 0 360px; padding: 280px 0 360px;
color: white; color: white;
>.container{
z-index: 21;
}
#feature-iterate-bg{
background: #fff url(../images/feature-iterate-bg.png) center top no-repeat; background: #fff url(../images/feature-iterate-bg.png) center top no-repeat;
border-top: 2px solid white; border-top: 2px solid white;
border-bottom: 2px solid @purple; border-bottom: 2px solid @purple;
background-size: cover; background-size: cover;
.skewY(3deg); .skewY(3deg);
z-index: 20;
>.container{
.skewY(-3deg);
} }
p{ p{
@ -117,14 +143,19 @@
} }
#feature-clone{ #feature-clone{
position: relative;
margin-top: -80px; margin-top: -80px;
padding: 240px 0 300px; padding: 240px 0 300px;
color: white; color: white;
background-color: @purple;
.skewY(3deg);
>.container{ >.container{
.skewY(-3deg); z-index: 21;
}
#feature-clone-bg{
background-color: @purple;
.skewY(3deg);
z-index: 20;
} }
h2{ h2{
@ -177,12 +208,17 @@
#cta { #cta {
position: relative;
padding: 180px 0 220px; padding: 180px 0 220px;
background-color: @purple;
.skewY(-3deg);
>.container{ >.container{
.skewY(3deg); z-index: 21;
}
#cta-bg{
background-color: @purple;
.skewY(-3deg);
z-index: 20;
} }
.intro { .intro {
@ -230,13 +266,18 @@
} }
#demos{ #demos{
position: relative;
padding: 180px 0 60px; padding: 180px 0 60px;
background-color: #000;
margin-top: -80px; margin-top: -80px;
.skewY(-3deg);
>.container{ >.container{
.skewY(3deg); z-index: 31;
}
#demo-bg{
background-color: #000;
.skewY(-3deg);
z-index: 30;
} }
.explantion { .explantion {

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

@ -410,21 +410,6 @@ body.page-home #footer {
#footer { #footer {
padding: 140px 0 40px; padding: 140px 0 40px;
color: black; 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 { #footer a {
color: black; color: black;
@ -550,6 +535,12 @@ body.page-home #footer {
background-size: 37px 40px; background-size: 37px 40px;
} }
} }
@media (min-width: 1500px) {
body.page-home #footer {
margin-top: -60px;
padding: 190px 0 40px;
}
}
@media (max-width: 992px) { @media (max-width: 992px) {
.page-sub #footer .footer-hashi, .page-sub #footer .footer-hashi,
#footer .footer-hashi { #footer .footer-hashi {
@ -1040,11 +1031,33 @@ body.page-home #footer {
background-position: center 0; background-position: center 0;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.skew-item > .container {
position: relative;
top: 0;
z-index: 11;
}
.skew-item .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: 10;
} }
#feature-auto h2 { #feature-auto h2 {
font-size: 43px; font-size: 43px;
@ -1063,9 +1076,15 @@ body.page-home #footer {
font-family: "Courier New", Monaco, Menlo, Consolas, monospace; font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
} }
#feature-iterate { #feature-iterate {
position: relative;
margin-top: -80px; margin-top: -80px;
padding: 280px 0 360px; padding: 280px 0 360px;
color: white; 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; background: #ffffff url(../images/feature-iterate-bg.png) center top no-repeat;
border-top: 2px solid white; border-top: 2px solid white;
border-bottom: 2px solid #822ff7; border-bottom: 2px solid #822ff7;
@ -1075,13 +1094,7 @@ body.page-home #footer {
-ms-transform: skewY(3deg); -ms-transform: skewY(3deg);
-o-transform: skewY(3deg); -o-transform: skewY(3deg);
transform: skewY(3deg); transform: skewY(3deg);
} z-index: 20;
#feature-iterate > .container {
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
} }
#feature-iterate p { #feature-iterate p {
text-align: right; text-align: right;
@ -1116,22 +1129,22 @@ body.page-home #footer {
color: white; color: white;
} }
#feature-clone { #feature-clone {
position: relative;
margin-top: -80px; margin-top: -80px;
padding: 240px 0 300px; padding: 240px 0 300px;
color: white; color: white;
}
#feature-clone > .container {
z-index: 21;
}
#feature-clone #feature-clone-bg {
background-color: #822ff7; background-color: #822ff7;
-webkit-transform: skewY(3deg); -webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg); -moz-transform: skewY(3deg);
-ms-transform: skewY(3deg); -ms-transform: skewY(3deg);
-o-transform: skewY(3deg); -o-transform: skewY(3deg);
transform: skewY(3deg); transform: skewY(3deg);
} z-index: 20;
#feature-clone > .container {
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
} }
#feature-clone h2 { #feature-clone h2 {
color: white; color: white;
@ -1175,20 +1188,20 @@ body.page-home #footer {
margin: 5px 5px 0 0; margin: 5px 5px 0 0;
} }
#cta { #cta {
position: relative;
padding: 180px 0 220px; padding: 180px 0 220px;
}
#cta > .container {
z-index: 21;
}
#cta #cta-bg {
background-color: #822ff7; background-color: #822ff7;
-webkit-transform: skewY(-3deg); -webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg); -moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg); -ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg); -o-transform: skewY(-3deg);
transform: skewY(-3deg); transform: skewY(-3deg);
} z-index: 20;
#cta > .container {
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
} }
#cta .intro .left { #cta .intro .left {
text-align: right; text-align: right;
@ -1224,21 +1237,21 @@ body.page-home #footer {
text-decoration: none; text-decoration: none;
} }
#demos { #demos {
position: relative;
padding: 180px 0 60px; padding: 180px 0 60px;
background-color: #000;
margin-top: -80px; margin-top: -80px;
}
#demos > .container {
z-index: 31;
}
#demos #demo-bg {
background-color: #000;
-webkit-transform: skewY(-3deg); -webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg); -moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg); -ms-transform: skewY(-3deg);
-o-transform: skewY(-3deg); -o-transform: skewY(-3deg);
transform: skewY(-3deg); transform: skewY(-3deg);
} z-index: 30;
#demos > .container {
-webkit-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
} }
#demos .explantion { #demos .explantion {
margin: 40px 0 60px 15px; margin: 40px 0 60px 15px;