From 07102fca136d9850f06da93e437df5c742e491e0 Mon Sep 17 00:00:00 2001 From: JT Date: Wed, 23 Jul 2014 01:12:09 -0700 Subject: [PATCH] breakout footer css to seperate file --- website/source/stylesheets/_docs.less | 4 + website/source/stylesheets/_footer.less | 132 +++++++++++++ website/source/stylesheets/_header.less | 92 +-------- website/source/stylesheets/_home.less | 46 ----- website/source/stylesheets/main.css | 249 ++++++++++++------------ website/source/stylesheets/main.less | 1 + 6 files changed, 260 insertions(+), 264 deletions(-) create mode 100644 website/source/stylesheets/_footer.less diff --git a/website/source/stylesheets/_docs.less b/website/source/stylesheets/_docs.less index c140fc2619..3add92741c 100755 --- a/website/source/stylesheets/_docs.less +++ b/website/source/stylesheets/_docs.less @@ -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; diff --git a/website/source/stylesheets/_footer.less b/website/source/stylesheets/_footer.less new file mode 100644 index 0000000000..736abf8ba5 --- /dev/null +++ b/website/source/stylesheets/_footer.less @@ -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; + } + } + } +} + diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less index 53c878608a..78e8d04b7c 100755 --- a/website/source/stylesheets/_header.less +++ b/website/source/stylesheets/_header.less @@ -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(); diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less index 8578c4f316..cf910bc8e3 100755 --- a/website/source/stylesheets/_home.less +++ b/website/source/stylesheets/_home.less @@ -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) { diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 5f60b492d5..65f2840a03 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -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; diff --git a/website/source/stylesheets/main.less b/website/source/stylesheets/main.less index b1f6347b80..f542f49af2 100755 --- a/website/source/stylesheets/main.less +++ b/website/source/stylesheets/main.less @@ -13,6 +13,7 @@ // Components @import "_header"; +@import "_footer"; @import "_jumbotron"; @import "_buttons";