footer css

This commit is contained in:
JT 2014-07-22 23:03:13 -07:00
parent 4f0e963a24
commit 8717099774
3 changed files with 21 additions and 42 deletions

View File

@ -4,11 +4,10 @@
body.page-sub{ body.page-sub{
#header{ #header{
.consul-gradient-bg(); background-color: @purple;
} }
} }
#footer,
#header { #header {
.anti-alias(); .anti-alias();
position: relative; position: relative;

View File

@ -166,6 +166,17 @@
.footer-links{ .footer-links{
margin-bottom: 20px; margin-bottom: 20px;
li{
a{
text-transform: uppercase;
font-size: 12px;
letter-spacing: 3px;
&:hover{
background-color: transparent;
}
}
}
} }
.footer-hashi{ .footer-hashi{

View File

@ -78,24 +78,8 @@ pre {
text-align: center; text-align: center;
} }
body.page-sub #header { body.page-sub #header {
background: #694a9c; background-color: #822ff7;
/* Old browsers */
background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #694a9c), color-stop(100%, #cd2028));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* IE10+ */
background: linear-gradient(to right, #694a9c 0%, #cd2028 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#694a9c', endColorstr='#cd2028', GradientType=1);
/* IE6-9 */
} }
#footer,
#header { #header {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
position: relative; position: relative;
@ -103,29 +87,23 @@ body.page-sub #header {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
margin-bottom: 0; margin-bottom: 0;
} }
#footer .navbar-collapse,
#header .navbar-collapse { #header .navbar-collapse {
box-shadow: none; box-shadow: none;
} }
#footer.navbar-static-top,
#header.navbar-static-top { #header.navbar-static-top {
z-index: 1000; z-index: 1000;
} }
#footer a,
#header a { #header a {
color: #ffffff; color: #ffffff;
} }
#footer .navbar-toggle,
#header .navbar-toggle { #header .navbar-toggle {
margin-top: 14px; margin-top: 14px;
margin-bottom: 14px; margin-bottom: 14px;
border: 2px solid #ffffff; border: 2px solid #ffffff;
} }
#footer .navbar-toggle .icon-bar,
#header .navbar-toggle .icon-bar { #header .navbar-toggle .icon-bar {
border: 1px solid #ffffff; border: 1px solid #ffffff;
} }
#footer .navbar-brand.logo,
#header .navbar-brand.logo { #header .navbar-brand.logo {
margin-top: 15px; margin-top: 15px;
padding: 5px 0 0 68px; padding: 5px 0 0 68px;
@ -140,47 +118,38 @@ body.page-sub #header {
background-size: 50px 56px; background-size: 50px 56px;
} }
@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) { @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 .navbar-brand.logo,
#header .navbar-brand.logo { #header .navbar-brand.logo {
background-image: url("../images/header-logo@2x.png"); background-image: url("../images/header-logo@2x.png");
background-size: 50px 56px; background-size: 50px 56px;
} }
} }
#footer .navbar-nav,
#header .navbar-nav { #header .navbar-nav {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
#footer .navbar-nav li,
#header .navbar-nav li { #header .navbar-nav li {
position: relative; position: relative;
} }
#footer .navbar-nav li > a,
#header .navbar-nav li > a { #header .navbar-nav li > a {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
padding-left: 22px; padding-left: 22px;
} }
#footer .navbar-nav li.first > a,
#header .navbar-nav li.first > a { #header .navbar-nav li.first > a {
padding-left: 15px; padding-left: 15px;
} }
#footer .nav > li > a:hover,
#header .nav > li > a:hover, #header .nav > li > a:hover,
#footer .nav > li > a:focus,
#header .nav > li > a:focus { #header .nav > li > a:focus {
background-color: transparent; background-color: transparent;
/*color: @p; /*color: @p;
.transition( color 0.3s ease );*/ .transition( color 0.3s ease );*/
} }
#footer .main-links.navbar-nav,
#header .main-links.navbar-nav { #header .main-links.navbar-nav {
margin-top: 26px; margin-top: 26px;
/*li + li.li-under a::after{ /*li + li.li-under a::after{
left: 15px; left: 15px;
}*/ }*/
} }
#footer .main-links.navbar-nav li + li::before,
#header .main-links.navbar-nav li + li::before { #header .main-links.navbar-nav li + li::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -190,23 +159,19 @@ body.page-sub #header {
height: 23px; height: 23px;
padding-right: 15px; padding-right: 15px;
} }
#footer .main-links.navbar-nav li > a,
#header .main-links.navbar-nav li > a { #header .main-links.navbar-nav li > a {
border-bottom: 2px solid rgba(255, 255, 255, 0.2); border-bottom: 2px solid rgba(255, 255, 255, 0.2);
line-height: 26px; line-height: 26px;
margin: 0 12px; margin: 0 12px;
padding: 0 0 0 4px; padding: 0 0 0 4px;
} }
#footer .buttons.navbar-nav,
#header .buttons.navbar-nav { #header .buttons.navbar-nav {
margin-top: 26px; margin-top: 26px;
margin-left: 30px; margin-left: 30px;
} }
#footer .buttons.navbar-nav li.first,
#header .buttons.navbar-nav li.first { #header .buttons.navbar-nav li.first {
margin-right: 16px; margin-right: 16px;
} }
#footer .buttons.navbar-nav li.download a,
#header .buttons.navbar-nav li.download a { #header .buttons.navbar-nav li.download a {
padding-left: 28px; padding-left: 28px;
background: url(../images/header-download-icon.png) 10px 7px no-repeat; background: url(../images/header-download-icon.png) 10px 7px no-repeat;
@ -214,26 +179,22 @@ body.page-sub #header {
background-size: 12px 13px; background-size: 12px 13px;
} }
@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) { @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 .buttons.navbar-nav li.download a,
#header .buttons.navbar-nav li.download a { #header .buttons.navbar-nav li.download a {
background-image: url("../images/header-download-icon@2x.png"); background-image: url("../images/header-download-icon@2x.png");
background-size: 12px 13px; background-size: 12px 13px;
} }
} }
#footer .buttons.navbar-nav li.github a,
#header .buttons.navbar-nav li.github a { #header .buttons.navbar-nav li.github a {
background: url(../images/header-github-icon.png) 10px 6px no-repeat; background: url(../images/header-github-icon.png) 10px 6px no-repeat;
background-image: url("../images/header-github-icon.png"); background-image: url("../images/header-github-icon.png");
background-size: 12px 13px; background-size: 12px 13px;
} }
@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) { @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 .buttons.navbar-nav li.github a,
#header .buttons.navbar-nav li.github a { #header .buttons.navbar-nav li.github a {
background-image: url("../images/header-github-icon@2x.png"); background-image: url("../images/header-github-icon@2x.png");
background-size: 12px 13px; background-size: 12px 13px;
} }
} }
#footer .buttons.navbar-nav li > a,
#header .buttons.navbar-nav li > a { #header .buttons.navbar-nav li > a {
color: black; color: black;
padding-top: 3px; padding-top: 3px;
@ -709,6 +670,14 @@ body.page-sub #header {
#footer .footer-links { #footer .footer-links {
margin-bottom: 20px; margin-bottom: 20px;
} }
#footer .footer-links li a {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 3px;
}
#footer .footer-links li a:hover {
background-color: transparent;
}
#footer .footer-hashi { #footer .footer-hashi {
letter-spacing: 2px; letter-spacing: 2px;
margin-bottom: 30px; margin-bottom: 30px;