breakout footer css to seperate file
This commit is contained in:
JT
parent
6cb84ca6ed
commit
07102fca13
|
|
@ -2,6 +2,10 @@
|
|||
// Docs
|
||||
// --------------------------------------------------
|
||||
|
||||
body.page-sub{
|
||||
background-color: @light-black;
|
||||
}
|
||||
|
||||
body.layout-docs,
|
||||
body.layout-intro{
|
||||
background: @light-black url('../images/sidebar-wire.png') left 62px no-repeat;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
|
||||
#footer-wrap{
|
||||
background-color: white;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
#footer{
|
||||
padding: 140px 0 40px;
|
||||
color: black;
|
||||
background-color: white;
|
||||
.skewY(-2deg);
|
||||
|
||||
>.container{
|
||||
.skewY(2deg);
|
||||
}
|
||||
|
||||
a{
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.footer-links{
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.li-under a:hover::after,
|
||||
.li-under a:focus::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: skewY(15deg) translateY(8px);
|
||||
-moz-transform: skewY(15deg) translateY(8px);
|
||||
transform: skewY(15deg) translateY(8px);
|
||||
}
|
||||
|
||||
.li-under a::after {
|
||||
background-color: @purple;
|
||||
}
|
||||
|
||||
li{
|
||||
a{
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
letter-spacing: 3px;
|
||||
|
||||
&:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons.navbar-nav{
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0px;
|
||||
|
||||
li{
|
||||
&.first{
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
&.download{
|
||||
a{
|
||||
background: url(../images/icon-download-purple.png) 8px 6px no-repeat;
|
||||
.img-retina("../images/icon-download-purple.png", "../images/icon-download-purple@2x.png", 20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
&.github{
|
||||
a{
|
||||
background: url(../images/icon-github-purple.png) 8px 6px no-repeat;
|
||||
.img-retina("../images/icon-github-purple.png", "../images/icon-github-purple@2x.png", 20px, 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li > a {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-hashi{
|
||||
float: right;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
a{
|
||||
color: black;
|
||||
font-weight: @font-weight-lato-xb;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
img{
|
||||
display: inline-block;
|
||||
width: 37px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
#footer{
|
||||
.footer-hashi {
|
||||
span{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.hashi-logo{
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons.navbar-nav{
|
||||
margin-left: 0;
|
||||
|
||||
li.first {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,70 +162,6 @@ body.page-sub{
|
|||
}
|
||||
}
|
||||
|
||||
#footer{
|
||||
padding: 140px 0 40px;
|
||||
color: black;
|
||||
|
||||
.footer-links{
|
||||
float: none;
|
||||
display: inline-block;
|
||||
|
||||
.li-under a:hover::after,
|
||||
.li-under a:focus::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: skewY(15deg) translateY(8px);
|
||||
-moz-transform: skewY(15deg) translateY(8px);
|
||||
transform: skewY(15deg) translateY(8px);
|
||||
}
|
||||
|
||||
.li-under a::after {
|
||||
background-color: @purple;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-hashi{
|
||||
float: right;
|
||||
}
|
||||
|
||||
a{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.buttons.navbar-nav{
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0px;
|
||||
|
||||
li{
|
||||
&.first{
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
&.download{
|
||||
a{
|
||||
background: url(../images/icon-download-purple.png) 8px 6px no-repeat;
|
||||
.img-retina("../images/icon-download-purple.png", "../images/icon-download-purple@2x.png", 20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
&.github{
|
||||
a{
|
||||
background: url(../images/icon-github-purple.png) 8px 6px no-repeat;
|
||||
.img-retina("../images/icon-github-purple.png", "../images/icon-github-purple@2x.png", 20px, 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li > a {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#header {
|
||||
.navbar-brand {
|
||||
|
|
@ -252,7 +188,7 @@ body.page-sub{
|
|||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
#footer,
|
||||
//#footer,
|
||||
#header{
|
||||
.buttons.navbar-nav,
|
||||
.main-links.navbar-nav{
|
||||
|
|
@ -271,8 +207,8 @@ body.page-sub{
|
|||
}
|
||||
}
|
||||
|
||||
#header,
|
||||
#footer{
|
||||
//#footer,
|
||||
#header{
|
||||
.main-links.navbar-nav{
|
||||
li > a {
|
||||
padding: 0;
|
||||
|
|
@ -282,28 +218,6 @@ body.page-sub{
|
|||
}
|
||||
}
|
||||
|
||||
#footer{
|
||||
.footer-hashi {
|
||||
span{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.hashi-logo{
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons.navbar-nav{
|
||||
margin-left: 0;
|
||||
|
||||
li.first {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#header{
|
||||
.consul-gradient-bg();
|
||||
|
||||
|
|
|
|||
|
|
@ -151,52 +151,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
#footer-wrap{
|
||||
background-color: white;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
#footer{
|
||||
background-color: white;
|
||||
.skewY(-2deg);
|
||||
|
||||
>.container{
|
||||
.skewY(2deg);
|
||||
}
|
||||
|
||||
.footer-links{
|
||||
margin-bottom: 20px;
|
||||
li{
|
||||
a{
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
letter-spacing: 3px;
|
||||
|
||||
&:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-hashi{
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
a{
|
||||
font-weight: @font-weight-lato-xb;
|
||||
}
|
||||
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
img{
|
||||
display: inline-block;
|
||||
width: 37px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
|
|||
|
|
@ -224,66 +224,6 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
|
|||
padding-right: 10px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
#footer {
|
||||
padding: 140px 0 40px;
|
||||
color: black;
|
||||
}
|
||||
#footer .footer-links {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
#footer .footer-links .li-under a:hover::after,
|
||||
#footer .footer-links .li-under a:focus::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: skewY(15deg) translateY(8px);
|
||||
-moz-transform: skewY(15deg) translateY(8px);
|
||||
transform: skewY(15deg) translateY(8px);
|
||||
}
|
||||
#footer .footer-links .li-under a::after {
|
||||
background-color: #822ff7;
|
||||
}
|
||||
#footer .footer-hashi {
|
||||
float: right;
|
||||
}
|
||||
#footer a {
|
||||
color: black;
|
||||
}
|
||||
#footer .buttons.navbar-nav {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
#footer .buttons.navbar-nav li.first {
|
||||
margin-right: 12px;
|
||||
}
|
||||
#footer .buttons.navbar-nav li.download a {
|
||||
background: url(../images/icon-download-purple.png) 8px 6px no-repeat;
|
||||
background-image: url("../images/icon-download-purple.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
@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 {
|
||||
background-image: url("../images/icon-download-purple@2x.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
#footer .buttons.navbar-nav li.github a {
|
||||
background: url(../images/icon-github-purple.png) 8px 6px no-repeat;
|
||||
background-image: url("../images/icon-github-purple.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
@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 {
|
||||
background-image: url("../images/icon-github-purple@2x.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
#footer .buttons.navbar-nav li > a {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
#header .navbar-brand.logo span {
|
||||
width: 120px;
|
||||
|
|
@ -297,51 +237,28 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
|
|||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#footer .buttons.navbar-nav,
|
||||
#header .buttons.navbar-nav,
|
||||
#footer .main-links.navbar-nav,
|
||||
#header .main-links.navbar-nav {
|
||||
display: block;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
#footer .buttons.navbar-nav li,
|
||||
#header .buttons.navbar-nav li,
|
||||
#footer .main-links.navbar-nav li,
|
||||
#header .main-links.navbar-nav li {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#footer .buttons.navbar-nav .li-under a::after,
|
||||
#header .buttons.navbar-nav .li-under a::after,
|
||||
#footer .main-links.navbar-nav .li-under a::after,
|
||||
#header .main-links.navbar-nav .li-under a::after,
|
||||
#footer .buttons.navbar-nav li + li::before,
|
||||
#header .buttons.navbar-nav li + li::before,
|
||||
#footer .main-links.navbar-nav li + li::before,
|
||||
#header .main-links.navbar-nav li + li::before {
|
||||
display: none;
|
||||
}
|
||||
#header .main-links.navbar-nav li > a,
|
||||
#footer .main-links.navbar-nav li > a {
|
||||
#header .main-links.navbar-nav li > a {
|
||||
padding: 0;
|
||||
padding-left: 0;
|
||||
line-height: 22px;
|
||||
}
|
||||
#footer .footer-hashi span {
|
||||
margin-right: 0;
|
||||
}
|
||||
#footer .footer-hashi .hashi-logo {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#footer .buttons.navbar-nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
#footer .buttons.navbar-nav li.first {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
#header {
|
||||
background: #694a9c;
|
||||
/* Old browsers */
|
||||
|
|
@ -403,6 +320,122 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
|
|||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
#footer-wrap {
|
||||
background-color: white;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
#footer {
|
||||
padding: 140px 0 40px;
|
||||
color: black;
|
||||
background-color: white;
|
||||
-webkit-transform: skewY(-2deg);
|
||||
-moz-transform: skewY(-2deg);
|
||||
-ms-transform: skewY(-2deg);
|
||||
-o-transform: skewY(-2deg);
|
||||
transform: skewY(-2deg);
|
||||
}
|
||||
#footer > .container {
|
||||
-webkit-transform: skewY(2deg);
|
||||
-moz-transform: skewY(2deg);
|
||||
-ms-transform: skewY(2deg);
|
||||
-o-transform: skewY(2deg);
|
||||
transform: skewY(2deg);
|
||||
}
|
||||
#footer a {
|
||||
color: black;
|
||||
}
|
||||
#footer .footer-links {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#footer .footer-links .li-under a:hover::after,
|
||||
#footer .footer-links .li-under a:focus::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: skewY(15deg) translateY(8px);
|
||||
-moz-transform: skewY(15deg) translateY(8px);
|
||||
transform: skewY(15deg) translateY(8px);
|
||||
}
|
||||
#footer .footer-links .li-under a::after {
|
||||
background-color: #822ff7;
|
||||
}
|
||||
#footer .footer-links li a {
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
#footer .footer-links li a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
#footer .buttons.navbar-nav {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
#footer .buttons.navbar-nav li.first {
|
||||
margin-right: 12px;
|
||||
}
|
||||
#footer .buttons.navbar-nav li.download a {
|
||||
background: url(../images/icon-download-purple.png) 8px 6px no-repeat;
|
||||
background-image: url("../images/icon-download-purple.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
@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 {
|
||||
background-image: url("../images/icon-download-purple@2x.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
#footer .buttons.navbar-nav li.github a {
|
||||
background: url(../images/icon-github-purple.png) 8px 6px no-repeat;
|
||||
background-image: url("../images/icon-github-purple.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
@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 {
|
||||
background-image: url("../images/icon-github-purple@2x.png");
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
#footer .buttons.navbar-nav li > a {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
#footer .footer-hashi {
|
||||
float: right;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#footer .footer-hashi a {
|
||||
color: black;
|
||||
font-weight: 700;
|
||||
}
|
||||
#footer .footer-hashi span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#footer .footer-hashi img {
|
||||
display: inline-block;
|
||||
width: 37px;
|
||||
height: 40px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#footer .footer-hashi span {
|
||||
margin-right: 0;
|
||||
}
|
||||
#footer .footer-hashi .hashi-logo {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#footer .buttons.navbar-nav {
|
||||
margin-left: 0;
|
||||
}
|
||||
#footer .buttons.navbar-nav li.first {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
#jumbotron-mask {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
|
@ -669,51 +702,6 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
|
|||
transform: skewY(30deg);
|
||||
margin: 5px 5px 0 0;
|
||||
}
|
||||
#footer-wrap {
|
||||
background-color: white;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
#footer {
|
||||
background-color: white;
|
||||
-webkit-transform: skewY(-2deg);
|
||||
-moz-transform: skewY(-2deg);
|
||||
-ms-transform: skewY(-2deg);
|
||||
-o-transform: skewY(-2deg);
|
||||
transform: skewY(-2deg);
|
||||
}
|
||||
#footer > .container {
|
||||
-webkit-transform: skewY(2deg);
|
||||
-moz-transform: skewY(2deg);
|
||||
-ms-transform: skewY(2deg);
|
||||
-o-transform: skewY(2deg);
|
||||
transform: skewY(2deg);
|
||||
}
|
||||
#footer .footer-links {
|
||||
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 {
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#footer .footer-hashi a {
|
||||
font-weight: 700;
|
||||
}
|
||||
#footer .footer-hashi span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#footer .footer-hashi img {
|
||||
display: inline-block;
|
||||
width: 37px;
|
||||
height: 40px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
#features .double-row {
|
||||
padding: 0 0 0 0;
|
||||
|
|
@ -936,6 +924,9 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
|
|||
.people .person .bio {
|
||||
padding-left: 150px;
|
||||
}
|
||||
body.page-sub {
|
||||
background-color: #242424;
|
||||
}
|
||||
body.layout-docs,
|
||||
body.layout-intro {
|
||||
background: #242424 url('../images/sidebar-wire.png') left 62px no-repeat;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
// Components
|
||||
@import "_header";
|
||||
@import "_footer";
|
||||
@import "_jumbotron";
|
||||
@import "_buttons";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue