diff --git a/js/index.js b/js/index.js index c26ef36..96521f4 100644 --- a/js/index.js +++ b/js/index.js @@ -82,3 +82,184 @@ function loadNYUPerstareFonts() { loadNYUPerstareFonts(); +function appendChatWidget() { + const CHATWIDGET_EMBED_CSS_URL = 'https://cdn.library.nyu.edu/chatwidget-embed/index.min.css'; + const CHATWIDGET_EMBED_PROD_URL = 'https://cdn.library.nyu.edu/chatwidget-embed/index.min.js'; + + if (!document.querySelector('link[href="' + CHATWIDGET_EMBED_CSS_URL + '"]')) { + const linkTag = document.createElement('link'); + linkTag.rel = 'stylesheet'; + linkTag.href = CHATWIDGET_EMBED_CSS_URL; + document.head.appendChild(linkTag); + } + + if (!document.querySelector('script[src="' + CHATWIDGET_EMBED_PROD_URL + '"]')) { + const scriptTag = document.createElement('script'); + scriptTag.src = CHATWIDGET_EMBED_PROD_URL; + document.head.appendChild(scriptTag); + } +} + +appendChatWidget(); + +function loadSSNYULibrariesFont() { + const style = document.createElement("style"); + const cssRule = ` + @font-face { + font-family: "SS NYULibraries"; + src: url("https://library.nyu.edu/assets/fonts/ss-nyu-libraries.eot"); + src: url("https://library.nyu.edu/assets/fonts/ss-nyu-libraries.eot?#iefix") format("embedded-opentype"), + url("https://library.nyu.edu/assets/fonts/ss-nyu-libraries.woff") format("woff"), + url("https://library.nyu.edu/assets/fonts/ss-nyu-libraries.ttf") format("truetype"); + font-weight: normal; + font-style: normal; + } + `; + + if (style.styleSheet) { + style.styleSheet.cssText = cssRule; + } else { + style.appendChild(document.createTextNode(cssRule)); + } + + document.head.appendChild(style); +} + +loadSSNYULibrariesFont(); + +/* Uncomment to run the script locally */ +// document.addEventListener("DOMContentLoaded", function () { +// function updateFooter() { +// function createNewFooter() { +// const footer = document.createElement("footer"); +// footer.id = "footer"; +// footer.className = "primary-footer"; +// footer.setAttribute("data-swiftype-index", "false"); +// footer.innerHTML = ` +//
+//
+//
+//
+// +// +// +//
+ +// Give to the Libraries +//
+ +//
+// +//
+//
+// +//
+// +//
+//
+// Unless otherwise noted, all content copyright New York University. All rights reserved. +// Privacy policy + +// +//
+//
+// `; +// return footer; +// } + +// function replaceFooter() { +// const oldFooter = document.querySelector(".public-footer-container"); +// if (oldFooter) { +// const newFooter = createNewFooter(); +// oldFooter.parentNode.replaceChild(newFooter, oldFooter); +// console.log("Footer replaced successfully"); +// } else { +// console.log("Footer container not found"); +// } +// } + +// const observer = new MutationObserver((mutationsList, observer) => { +// for (const mutation of mutationsList) { +// console.log("DOM change detected"); +// if (mutation.type === "childList" && document.querySelector(".public-footer-container")) { +// replaceFooter(); +// observer.disconnect(); +// break; +// } +// } +// }); + +// if (document.body) { +// observer.observe(document.body, { childList: true, subtree: true }); +// } else { +// console.error("document.body is null. Observer cannot start."); +// } +// } + +// updateFooter(); +// }); + + + diff --git a/layouts/footer.html b/layouts/footer.html index 1bfa13d..968a3ad 100644 --- a/layouts/footer.html +++ b/layouts/footer.html @@ -1,7 +1,91 @@ -
-
- Accessibility (opens - in new window) -
-
- + \ No newline at end of file diff --git a/scss/_footer.scss b/scss/_footer.scss index da07ae0..f28d427 100644 --- a/scss/_footer.scss +++ b/scss/_footer.scss @@ -5,60 +5,293 @@ // Comment out the background-color for the footer containers // until we standardize all pages on a single template +/* Hide the vendor's footer */ .system-footer-container { - // background: $text_black; + display: none !important; } -.s-lib-public-body .public-footer-container { - // background-color: $text_black; - text-align: center; +/* library.nyu.edu Footer styles */ + +#footer { + width: 100%; + display: block; +} + +#footer > img { + height: 27px; +} + +ul.list { + list-style: none; } -.s-lib-public-body #s-lib-footer-public, -.s-lib-footer, -#s-lib-footer-public { - border-top: none; - margin: 0 auto; - font-size: 100%; - background-color: $text_black; - color: $text_footer_gray; - padding: 45px 0 0 0; -} - -.s-lib-public-body #s-lib-footer-public, -.s-lib-footer, -#s-lib-footer-public, -#s-lib-footer-login-link, -#s-lib-footer-support-link, -.public-footer-container { - a { - color: $text_footer_dark_gray; - text-decoration: underline; - &:hover { - color: $text_footer_white; +.list { + margin: 0; + padding: 0; +} + +.list li { + border-bottom: 1px dotted #bbbdbf; + margin: 0 0 10px 0; + padding: 0 0 10px 0; +} + +.list:last-child li:last-child{ + border-bottom: 0 none; + margin-bottom: 0; + padding-bottom: 0; +} + +.list a { + text-decoration: none; +} + +label { + color: #656C72; + display: inline-block; + margin-bottom: 10px; +} + +img { + max-width: 100%; + border: 0; +} + +.ss-icon, .table__cell--sortable[data-sort]:after, [class^="ss-"]:before, [class*=" ss-"]:before, [class^="ss-"].right:after, [class*=" ss-"].right:after, .ss-icon.ss-nyu-libraries, .ss-nyu-libraries.table__cell--sortable[data-sort]:after, [class^="ss-"].ss-nyu-libraries:before, [class*=" ss-"].ss-nyu-libraries:before, [class^="ss-"].ss-nyu-libraries.right:after, [class*=" ss-"].ss-nyu-libraries.right:after { + font-weight: normal; + font-family: "SS NYULibraries"; +} + +.primary-footer{ + background: #22272d; + color: #acb6c2; + padding: 45px 0; + + + + .list li{ + border-bottom-color: #65686c; + } + + .block{ + margin-bottom: 30px; + } + + a{ + color: #acb6c2; + + &:hover{ + color: #d8dee5; + text-decoration: underline; } } + + .button{ + color: #fff; + font-size: 14px; + width: 100%; + display: block; + padding: 25px 20px; + } } -.footer, .system-footer-container, .public-footer-container { - .s-lg-text-greyout { - color: $text_footer_gray; +@media (max-width: 1300px) { + .primary-footer { + padding-bottom: 72px; } + + .s-lib-main { + padding-top: 0; + padding-bottom: 0; + } +} + + +.primary-footer a:hover { + color: #d8dee5; + text-decoration: underline; } -.bold, .s-lg-bold, .s-lg-book-title { - font-size: 100%; +.primary-footer .button:hover { + background: #6c07ae; } -.public-footer-container { - margin: 0 auto; - & > div.container { - background-color: $text_black; - padding: 10px 0 45px 15px; +.wrap{ + height: 90%; + width: 95%; + max-width: 1170px; + margin: auto; +} + +.block-container { + height: 100%; + zoom: 1; + display: block; + @include clearfix; + + &.is-bordered{ + border-top: 3px solid #22272d; + padding-top: 45px; } - @include max-width($bp_small_page_heading){ - .container { - margin: 0 auto; +} + +.block { + margin: 0 0 45px; +} + +.primary-footer .block { + margin-bottom: 30px; +} + +.block--25 { + width: 25%; + float: left; + padding: 0 15px; +} + +.block--25:first-child { + padding-left: 0; +} + +block--25:nth-of-type(4n) { + padding-right: 0; +} + +@include max-width(730px){ + .footer__give, .footer__social{ + width: 100%; + padding: 0; + } +} + +.footer__search { + position: relative; + margin-bottom: 12px; + color: #fff; +} + +input.footer__search__field { + color: #fff; + background: rgba(255, 255, 255, 0.15); + border: 1px solid transparent; + box-sizing: border-box; + box-shadow: none; + padding: 15px 40px 15px 10px; + margin: 0; + font-size: 14px; + border-radius: 3px; + width: 100%; + height: auto; + appearance: none; +} + +input.footer__search__button { + color: #fff; +} + +input.footer__search__button { + color: #fff; + @include appearance(none); + background: none; + font-size: 18px; + font-family: "SS NYULibraries"; + text-align: center; + padding: 0 13px; + margin: 0; + position: absolute; + top: 0; + right: 0; + height: 100%; + border-radius: 0 3px 3px 0; + border:none; + + &:hover, &:focus{ + background: #fff; + color: #57068c; + text-decoration: none; + } +} + +input.footer__search__button:hover, input.footer__search__button:focus { + background: #fff;; + color: #57068c; + text-decoration: none !important; +} + +input.footer__search__field::placeholder { + color: #fff; + opacity: 1; +} + +.primary-footer .button { + color: #fff; + font-size: 14px; + width: 100%; + display: block; + padding: 25px 20px; + appearance: none; + border: 0 none; + box-shadow: none; + background: #57068c; + font-weight: 400; + font-family: "NYUPerstare", Helvetica, Arial, sans-serif; + text-align: center; + text-decoration: none; + border-radius: 3px; +} + +@include max-width(500px){ + .footer__menu{ + .list:last-child li:last-child{ + border-bottom: 1px dotted #65686c; + padding-bottom: 10px; + margin-bottom: 10px; + } + + &:nth-child(2){ + margin-bottom: 0; } } } + +.footer__social p { + margin: 0 0 1em; + line-height: 1.5; + font-size: 12px; +} + +.footer__social p a, .footer__social p .block .s-la-widget a, .block .s-la-widget .footer__social p a { + text-decoration: none; + color: #fff; +} + +.footer__social .ss-icon, .footer__social .table__cell--sortable[data-sort]:after { + color: #d8dee5; + font-size: 20px; + display: inline-block; + margin-right: 10px; + text-decoration: none; +} + +.footer__copyright { + font-size: 12px; + border-top: 1px dotted #65686c; + padding-top: 30px; + color: #b1b1b1; + line-height: 1.4; +} + +.footer__copyright a, .footer__copyright .block .s-la-widget a, .block .s-la-widget .footer__copyright a { + color: #b1b1b1; + text-decoration: underline; +} + +.footer__logo { + float: right; + position: relative; + top: -7px; +} + +.footer__logo:hover { + opacity: 0.8; +} \ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss index dd56c31..d038f35 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -10,6 +10,32 @@ -webkit-font-smoothing: antialiased; } +@mixin appearance($arguments) { + @include prefix-property(appearance, unquote($arguments), true, true, false, false); +} + +@mixin prefix-property($property, $value, $supportWebkit: $defaultWebkitSupport, $supportFirefox: $defaultFirefoxSupport, $supportExplorer: $defaultExplorerSupport, $supportOpera: $defaultOperaSupport) { + + @if $supportWebkit { -webkit-#{$property}: $value; } + @if $supportFirefox { -moz-#{$property}: $value; } + @if $supportExplorer { -ms-#{$property}: $value; } + @if $supportOpera { -o-#{$property}: $value; } + + #{$property}: $value; +} + +@mixin clearfix { + zoom: 1; + &:before, &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } +} + + // **************************************************************** // * RESPONSIVE MIXINS // **************************************************************** diff --git a/scss/index.scss b/scss/index.scss index 05457e3..9fa7a4b 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -29,6 +29,17 @@ causing issues with font-based icons like Font Awesome or similar. */ +html, body { + height: 100%; + margin: 0; + display: flex; + flex-direction: column; +} + +.s-lib-main.container { + flex: 1; +} + body { padding-left: 0; padding-right: 0;