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 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">
@ -24,9 +24,10 @@
</div>
</div>
</div> <!-- /container -->
<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">
@ -47,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">
@ -120,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">
@ -203,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">
@ -219,4 +223,5 @@
</div>
</div>
</div>
<div class="feature-skew" id="cta-bg"></div>
</div>

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

18
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;
@ -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) {
.page-sub #footer, #footer{
.footer-hashi {

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

@ -35,15 +35,36 @@
background-position: center 0;
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{
position: relative;
padding: 200px 0 300px;
margin-top: -36px;
background: #fff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover;
>.container{
#feature-auto-bg{
background: #fff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover;
.skewY(-3deg);
z-index: 10;
}
h2{
@ -67,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;
@ -117,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;
@ -177,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;
@ -230,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 {

101
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;
@ -550,6 +535,12 @@ body.page-home #footer {
background-size: 37px 40px;
}
}
@media (min-width: 1500px) {
body.page-home #footer {
margin-top: -60px;
padding: 190px 0 40px;
}
}
@media (max-width: 992px) {
.page-sub #footer .footer-hashi,
#footer .footer-hashi {
@ -1040,11 +1031,33 @@ body.page-home #footer {
background-position: center 0;
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 {
position: relative;
padding: 200px 0 300px;
margin-top: -36px;
}
#feature-auto #feature-auto-bg {
background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
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 {
font-size: 43px;
@ -1063,9 +1076,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;
@ -1075,13 +1094,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;
@ -1116,22 +1129,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;
@ -1175,20 +1188,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;
@ -1224,21 +1237,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;