refactor footer css

This commit is contained in:
JT 2014-07-23 01:34:26 -07:00
parent 07102fca13
commit 7bf00418f5
3 changed files with 44 additions and 9 deletions

View File

@ -11,7 +11,7 @@
</div> </div>
<div class="footer-hashi os"> <div class="footer-hashi os">
<span>&copy; 2014. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span> <span>&copy; 2014. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
<a class="hashi-logo" href="http://www.hashicorp.com"><img src="/images/footer-hashicorp-logo.png"></a> <a class="hashi-logo" href="http://www.hashicorp.com"><i class="hashi-logo"></i></a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -84,8 +84,8 @@
.footer-hashi{ .footer-hashi{
float: right; float: right;
padding-top: 8px;
letter-spacing: 2px; letter-spacing: 2px;
margin-bottom: 30px;
a{ a{
color: black; color: black;
@ -96,17 +96,32 @@
margin-right: 10px; margin-right: 10px;
} }
img{ .hashi-logo{
display: inline-block;
vertical-align: middle;
i{
display: inline-block; display: inline-block;
width: 37px; width: 37px;
height: 40px; height: 40px;
background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat;
.img-retina("../images/footer-hashicorp-logo.png", "../images/footer-hashicorp-logo@2x.png", 37px, 40px);
}
} }
} }
} }
.page-sub{
#footer-wrap{
padding: 0;
}
#footer{
background-color: @black;
transform: none;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
#footer{ #footer{
.footer-hashi { .footer-hashi {
span{ span{

View File

@ -405,8 +405,8 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
} }
#footer .footer-hashi { #footer .footer-hashi {
float: right; float: right;
padding-top: 8px;
letter-spacing: 2px; letter-spacing: 2px;
margin-bottom: 30px;
} }
#footer .footer-hashi a { #footer .footer-hashi a {
color: black; color: black;
@ -415,10 +415,30 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
#footer .footer-hashi span { #footer .footer-hashi span {
margin-right: 10px; margin-right: 10px;
} }
#footer .footer-hashi img { #footer .footer-hashi .hashi-logo {
display: inline-block;
vertical-align: middle;
}
#footer .footer-hashi .hashi-logo i {
display: inline-block; display: inline-block;
width: 37px; width: 37px;
height: 40px; height: 40px;
background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat;
background-image: url("../images/footer-hashicorp-logo.png");
background-size: 37px 40px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
#footer .footer-hashi .hashi-logo i {
background-image: url("../images/footer-hashicorp-logo@2x.png");
background-size: 37px 40px;
}
}
.page-sub #footer-wrap {
padding: 0;
}
.page-sub #footer {
background-color: #000000;
transform: none;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
#footer .footer-hashi span { #footer .footer-hashi span {