diff --git a/hlx_statics/blocks/footer/footer.css b/hlx_statics/blocks/footer/footer.css index 03a89be6..ab5dee10 100644 --- a/hlx_statics/blocks/footer/footer.css +++ b/hlx_statics/blocks/footer/footer.css @@ -18,13 +18,13 @@ footer { } } -footer > div { +footer>div { box-sizing: border-box; max-width: 1280px; margin: 0 auto; } -footer > div ul { +footer>div ul { list-style: none; padding: 0; } @@ -34,16 +34,16 @@ footer h3.spectrum-Heading--XS { white-space: nowrap; } -footer > div ul.spectrum-Body--sizeS { +footer>div ul.spectrum-Body--sizeS { padding-top: 40px; padding-right: 16px; } -footer > div ul.spectrum-Body--sizeS > li { +footer>div ul.spectrum-Body--sizeS>li { margin-top: 16px; } -footer > div ul.spectrum-Body--sizeS > li:first-of-type { +footer>div ul.spectrum-Body--sizeS>li:first-of-type { margin-top: 0; } @@ -80,19 +80,12 @@ footer .footer-divider { height: 100%; } -footer div.footer-links-container-inner > div:nth-child(1) { +footer div.footer-links-container-inner>div:nth-child(1) { position: relative; grid-area: apis; } -footer - div.footer-links-container-inner - > div:nth-child(1) - > div - > ul - > li - > strong - > a { +footer div.footer-links-container-inner>div:nth-child(1)>div>ul>li>strong>a { padding-bottom: 60px !important; } @@ -105,7 +98,7 @@ footer .footer-apis-container { flex-direction: column; } - footer .footer-apis-container > div { + footer .footer-apis-container>div { margin: 0; } } @@ -118,12 +111,12 @@ footer .footer-services-container ul { padding-top: 60px !important; } -footer div.footer-links-container-inner > div:nth-child(2) { +footer div.footer-links-container-inner>div:nth-child(2) { position: relative; grid-area: blogs; } -footer div.footer-links-container-inner > div:nth-child(3) { +footer div.footer-links-container-inner>div:nth-child(3) { position: relative; grid-area: support; } @@ -140,10 +133,14 @@ footer .footer-legal ul { color: rgb(70, 70, 70); } -footer .footer-legal ul > li { +footer .footer-legal ul>li { margin-right: 32px; } +footer .footer-divider { + display: block; +} + @media screen and (max-width: 768px) { footer .footer-legal { flex-direction: column; @@ -162,8 +159,75 @@ footer .footer-legal p { display: block; margin-top: 16px; } + + footer .footer-divider { + display: none; + } + + footer .footer-links-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + footer .footer-legal ul { + flex-direction: column; + } + + footer .footer-horizontal { + width: 85% !important; + } + + footer { + padding-left: 40px; + width: 85%; + } + + footer h3 { + font-size: 19px !important; + } + + footer a { + font-size: 17px !important; + } + + footer .footer-links-container-inner { + justify-content: unset; + } + + footer .footer-legal { + flex-direction: column !important; + align-items: baseline !important; + width: 100%; + } + +} + +@media screen and (min-width : 768px) and (max-width : 1024px) { + + footer { + padding-left: 40px; + width: 94%; + } + + footer .footer-divider { + display: none; + } + + footer .footer-links-container-inner { + justify-content: unset; + } + + footer .footer-legal { + flex-direction: column !important; + align-items: baseline !important; + width: 100%; + } + } footer .footer-horizontal { margin-top: 56px; -} + width: 100% !important; +} \ No newline at end of file diff --git a/hlx_statics/blocks/footer/footer.js b/hlx_statics/blocks/footer/footer.js index 83253cbc..0d56c20d 100644 --- a/hlx_statics/blocks/footer/footer.js +++ b/hlx_statics/blocks/footer/footer.js @@ -1,7 +1,6 @@ import { readBlockConfig } from '../../scripts/lib-helix.js'; import { - createTag, - setExpectedOrigin, + createTag } from '../../scripts/lib-adobeio.js'; function buildFooter(html) { diff --git a/hlx_statics/styles/styles.css b/hlx_statics/styles/styles.css index 45a2198c..b94bcee0 100644 --- a/hlx_statics/styles/styles.css +++ b/hlx_statics/styles/styles.css @@ -854,3 +854,16 @@ main .heading6 h6 { .warning-icon{ color: rgb(110, 110, 110); } + +.spectrum-Divider { + border: none; + border-radius: 2px; + border-width: 2px; + height: 2px; + overflow: visible; + width: 2px !important; +} + +.spectrum-Divider--sizeM{ + background-color: rgb(213,213,213); +}