diff options
-rw-r--r-- | templates/web/hart/footer.html | 104 | ||||
-rw-r--r-- | web/cobrands/hart/base.scss | 5 | ||||
-rw-r--r-- | web/cobrands/hart/chat.png | bin | 0 -> 5678 bytes | |||
-rwxr-xr-x | web/cobrands/hart/facebook-logo.png | bin | 51475 -> 3259 bytes | |||
-rw-r--r-- | web/cobrands/hart/hart.scss | 214 | ||||
-rw-r--r-- | web/cobrands/hart/instagram-logo.png | bin | 0 -> 3716 bytes | |||
-rwxr-xr-x | web/cobrands/hart/twitter-logo.png | bin | 51429 -> 3973 bytes | |||
-rw-r--r-- | web/cobrands/hart/youtube-logo.png | bin | 0 -> 3562 bytes | |||
-rw-r--r-- | web/cobrands/sass/_layout.scss | 3 |
9 files changed, 170 insertions, 156 deletions
diff --git a/templates/web/hart/footer.html b/templates/web/hart/footer.html index e1b013032..e759e15a2 100644 --- a/templates/web/hart/footer.html +++ b/templates/web/hart/footer.html @@ -44,54 +44,64 @@ </div> </div> - <div class="hart-footer-wrapper"> - <div id="footer_outside_wrapper"> - <div id="footer_inside_wrapper" class="clearfix"> - <div id="footer-right" class="clearfix"> - <ul class="footer-nav"> - <li> <a href="http://www.hart.gov.uk/sitemap">Site map</a> </li> - <li> <a href="http://www.hart.gov.uk/Accessibility">Accessibility</a> </li> - </ul> - </div> - <footer id="hart-footer" class="clearfix"> - <div id="copyright-block" class="desk-only"> - <strong>©</strong> - <a href="http://www.hart.gov.uk/disclaimer" title="More information on the Disclaimer">Hart District Council</a> - </div> - <ul class="footer-nav clearfix"> - <li> <a href="http://www.hart.gov.uk/disclaimer">Disclaimer</a></li> - <li> <a href="http://www.hart.gov.uk/freedom-information">Freedom of Information</a></li> - <li> <a href="http://www.hart.gov.uk/privacy">Privacy</a></li> - </ul> - </footer> - <div class="clearfix" id="footer-row-2"> - <div id="hart-powered-by"> - <a href="https://www.fixmystreet.com/about/council">Powered by <img src="/cobrands/hart/fms-logo.png" alt="FixMyStreet" style="height:20px;"></a> - </div> - <div id="footer-images"> - <a href="https://twitter.com/HartCouncil"> - <img alt="" src="/cobrands/hart/twitter-logo.png" style="height:43px; width:43px" /> - </a> - <a href="http://www.facebook.com/HartDistrictCouncil"> - <img alt="" src="/cobrands/hart/facebook-logo.png" style="height:43px; margin-right: 10px; width:43px" /> - </a> - <a href="http://www.gov.uk"> - <img alt="" src="/cobrands/hart/gov-logo.png" style="height:43px; width:172px" /> - </a> - </div> - </div> - <div id="footer-row-3"> - <div id="copyright-block-mobile" class="mob-only"> - <strong>©</strong> - <a href="http://www.hart.gov.uk/disclaimer" title="More information on the Disclaimer"> - Hart District Council</a> - </div> - </div> - </div> + <footer id="hart-footer"> + <div id="footer-inner" class="container"> + <div id="footer-row-1" class="clearfix row"> + <p class="desk-only"> + <strong>©</strong> + <a href="http://www.hart.gov.uk/disclaimer" title="More information on the Disclaimer" class="hart">Hart District Council</a> + <a href="http://www.gov.uk/" title="GOV.UK">GOV.UK</a> + </p> + <ul id="footer-nav"> + <li> <a href="http://www.hart.gov.uk/Accessibility">Accessibility</a> </li> + <li class="mob-only"> <a href="http://www.gov.uk/" title="GOV.UK">GOV.UK</a> </li> + <li> <a href="http://www.hart.gov.uk/privacy">Privacy</a> </li> + <li class="mob-only"> <a href="http://www3.basingstoke.gov.uk/ccmwa/chat/a6f6143d-407f-4f99-b673-6feb98b54815">Web Chat</a> </li> + <li class="mob-only"> <a href="https://www.hart.gov.uk/contact-us">Contact us</a> </li> + <li class="mob-only"> <a href="https://www.hart.gov.uk/feedback">Feedback</a> </li> + <li class="mob-only bottom"> <a href="https://www.hart.gov.uk/user/login?current=node/1">Login</a> </li> + <li class="mob-only bottom"> <a href="https://www.hart.gov.uk/user/register">Register</a> </li> + </ul> </div> - </div> - <div class="footer_border"> - </div> + <div id="footer-row-2" class="clearfix row"> + <ul id="footer-images"> + <li> + <a href="https://www.facebook.com/HartDistrictCouncil"> + <img alt="Facebook" src="/cobrands/hart/facebook-logo.png" style="width: 50px; height: 50px;"> + </a> + </li> + <li> + <a href="https://twitter.com/HartCouncil"> + <img alt="Twitter" src="/cobrands/hart/twitter-logo.png" style="width: 50px; height: 50px;"> + </a> + </li> + <li> + <a href="https://www.youtube.com/channel/UCtkLOTkot4Z24Mr9C4I3t-A"> + <img alt="YouTube" src="/cobrands/hart/youtube-logo.png" style="width: 50px; height: 50px;"> + </a> + </li> + <li> + <a href="https://www.instagram.com/hartcouncil/"> + <img alt="Instagram" src="/cobrands/hart/instagram-logo.png" style="width: 50px; height: 50px;"> + </a> + </li> + <li class="web-chat"> + <a href="http://www3.basingstoke.gov.uk/ccmwa/chat/a6f6143d-407f-4f99-b673-6feb98b54815"> + <span class="desk-only">Web Chat</span> + <img alt="Web chat" src="/cobrands/hart/chat.png" style="height: 50px; width: 50px;"> + </a> + </li> + </ul> + </div> + <div id="footer-row-3" class="clearfix row"> + <p class="mob-only"> + <strong>©</strong> + <a href="http://www.hart.gov.uk/disclaimer" title="More information on the Disclaimer" class="hart">Hart District Council</a> + </p> + <a href="https://www.fixmystreet.com/about/council">Powered by <img src="/cobrands/hart/fms-logo.png" alt="FixMyStreet" style="height:20px;"></a> + </div> + </div> + </footer> [% INCLUDE 'common_footer_tags.html' %] diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss index 8a970331f..bd847aa55 100644 --- a/web/cobrands/hart/base.scss +++ b/web/cobrands/hart/base.scss @@ -31,7 +31,7 @@ h1.main { #site-header { background: $primary; height: 57px; - + .mobile-header-nav { height: 56px; @@ -80,9 +80,6 @@ h1.main { padding-top: 0px; input#pc { } - input#sub { - height: 100%; - } } } } diff --git a/web/cobrands/hart/chat.png b/web/cobrands/hart/chat.png Binary files differnew file mode 100644 index 000000000..4a048b7d4 --- /dev/null +++ b/web/cobrands/hart/chat.png diff --git a/web/cobrands/hart/facebook-logo.png b/web/cobrands/hart/facebook-logo.png Binary files differindex 931c39316..b5ce77668 100755 --- a/web/cobrands/hart/facebook-logo.png +++ b/web/cobrands/hart/facebook-logo.png diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss index 37a48badf..0b11024d9 100644 --- a/web/cobrands/hart/hart.scss +++ b/web/cobrands/hart/hart.scss @@ -234,130 +234,136 @@ body.frontpage .table-cell .content { margin-bottom: 2em; } -.hart-footer-wrapper { - - background-color: #4F5757; - clear: both; - height: auto; - overflow: hidden; - padding: 15px 15px 50px 15px; - color:#fff; +#hart-footer { + box-shadow: 0px 500px 0px 500px #4F5757; + background: #4F5757; + color: #fff; + + @media only screen and (max-width:48em) { + font-size: 1em; + margin: 0 !important; + } - @media only screen and (min-width:48em) { - margin-left:-15px; - padding: 35px 25px 40px 25px; + #footer-inner { + @media only screen and (max-width:48em) { + padding: 15px; } + } - #footer_outside_wrapper { - max-width: 60em; - margin: 0 auto; - #footer_inside_wrapper { - display: block; - - #footer-right { - @media only screen and (min-width:48em) { - float: right; - width: 30%; - } - - .region-footer-right { - float: left; - max-width: 319px; - } - } - #footer-images { - width: 50%; - text-align: right; - padding-bottom: 10px; - margin-bottom: 0px; - @media only screen and (min-width:48em) { - margin-top: 1.5em; - padding-bottom: 1em; - } - float: right!important; - text-decoration: none!important; - img { - margin-bottom: 5px; - } - a, a:hover, a:active { - text-decoration: none; - } - } - } - } - .footer_border { - display: block; + ul { + list-style-type: none; + margin: 0; + padding: 0; + li { + display: inline-block; } - p { + } + + a { + color: #fff; + } + + p { + padding: 0; + margin: 0; + } + + #footer-row-1 { + padding: 1.5em 0 0.5em 0; + + @media only screen and (max-width:48em) { margin: 0; + padding: 0; } - a:link, a:visited { - color: #fff; text-decoration: none; - } - a:hover, a:active { - text-decoration: underline; + + p { + float: left; + + .hart { + margin: 0 5px 0 0; + padding: 0 10px 0 0; + border-right: 1px solid #fff; + } + } - footer#hart-footer { - margin-top: 0; + #footer-nav { + float: right; - @media only screen and (min-width:48em) { - width: 70%; - float: left; + li { + margin: 0 0 0 10px; + padding: 0 0 0 10px; + float: right; + + &:first-child { + border-left: 1px solid #fff; } - } + } + + @media only screen and (max-width:48em) { + float: none; + width: 100%; + + ul { + margin: 15px 0px 0px -2%; + } + + li { + float: left; + width: 45%; + display: block; + border-left: none !important; + border-bottom: 1px solid #797f7f; + padding: 2px 0px; + margin: 0 2%; + + &.bottom { + border: none !important; + } + } + } - #copyright-block { - float: left; - margin-left: 1em; - } - #copyright-block-mobile { - margin-left: 10px; } + } + + #footer-row-2 { + margin: 0.5em 0; - #footer-row-2 { - margin-top: 2em; + @media only screen and (max-width:48em) { + margin: 1.5em 0 1em 0; } - .footer-nav, { - height:35px; + li { + margin: 0 2px; - margin-left: 0; - margin-bottom: 0; + @media only screen and (max-width:48em) { + float: left; + margin-right: 5px; + } + } - @media only screen and (min-width:48em) { - float: right; - } + li.web-chat { + float: right; - li { - list-style-type: none; - float: left; - width: 50%; - margin-bottom: 0; - - a { - display: block; - border-bottom:1px solid #797f7f; - padding: 10px 0; - margin-left: 10px; - margin-right: 10px; - } - @media only screen and (min-width:48em) { - border-right:1px solid #fff; - width: auto; - a { - border-bottom: none; - padding: 0 10px; - margin-left: 0; - margin-right: 0; - } - &:last-child { - border: none; - padding-right: 0; - } - } + @media only screen and (max-width:48em) { + float: left; + } + + a { + span { + float: left; + line-height: 50px; + margin: 0 10px 0 0; } + } } + + } + + #footer-row-3 { + padding: 0 0 1.5em 0; + margin: 0.5em 0; + } } // IE specific CSS diff --git a/web/cobrands/hart/instagram-logo.png b/web/cobrands/hart/instagram-logo.png Binary files differnew file mode 100644 index 000000000..cff1d207f --- /dev/null +++ b/web/cobrands/hart/instagram-logo.png diff --git a/web/cobrands/hart/twitter-logo.png b/web/cobrands/hart/twitter-logo.png Binary files differindex 7e10506e2..2efa3de29 100755 --- a/web/cobrands/hart/twitter-logo.png +++ b/web/cobrands/hart/twitter-logo.png diff --git a/web/cobrands/hart/youtube-logo.png b/web/cobrands/hart/youtube-logo.png Binary files differnew file mode 100644 index 000000000..da0e17c35 --- /dev/null +++ b/web/cobrands/hart/youtube-logo.png diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 94506387e..985127361 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -29,7 +29,8 @@ $mappage-actions-width--medium: 20em; display: block; } .mob-only { - display: none; + // Override `display: block` etc if other classes are defined + display: none !important ; } body { |