diff --git a/packages/docs-gesture-handler/src/components/FooterBackground/styles.module.css b/packages/docs-gesture-handler/src/components/FooterBackground/styles.module.css index 76e6a901f1..f27f4ba259 100644 --- a/packages/docs-gesture-handler/src/components/FooterBackground/styles.module.css +++ b/packages/docs-gesture-handler/src/components/FooterBackground/styles.module.css @@ -1,35 +1,35 @@ .moonContainer { position: relative; - margin-top: 106px; + margin-top: 122px; } [class*='footerLanding'] { - margin-top: -106px; + margin-top: -122px; } @media (max-width: 996px) { .moonContainer { - margin-top: 121px; + margin-top: 138px; } [class*='footerLanding'] { - margin-top: -121px; + margin-top: -138px; } } @media (max-width: 700px) { .moonContainer { - margin-top: 147px; + margin-top: 164px; } [class*='footerLanding'] { - margin-top: -147px; + margin-top: -164px; } } @media (max-width: 376px) { .moonContainer { - margin-top: 173px; + margin-top: 189px; } [class*='footerLanding'] { - margin-top: -173px; + margin-top: -189px; } } diff --git a/packages/docs-gesture-handler/src/css/overrides.css b/packages/docs-gesture-handler/src/css/overrides.css index 2f366e35f7..d7b896b441 100644 --- a/packages/docs-gesture-handler/src/css/overrides.css +++ b/packages/docs-gesture-handler/src/css/overrides.css @@ -208,3 +208,49 @@ button[class*='DocSearch-Button'] { [data-theme='light'] [class*='_badge_'][class*='_deprecated_'] { border-color: rgba(90, 100, 134, 0.26); } + +footer.footer { + --ifm-footer-padding-vertical: 35px; +} + +@media (max-width: 996px) { + footer.footer { + --ifm-footer-padding-vertical: 20px; + } +} + +@media (max-width: 768px) { + footer.footer { + --ifm-footer-padding-vertical: 15px; + } +} + +footer .footer__bottom [class*='footer__copyright'] { + justify-content: center; + padding-bottom: var(--swm-footer-copyright-padding-bottom); +} + +footer .footer__bottom [class*='footer__copyright'] p { + text-align: center; +} + +footer .footer__bottom [class*='footer__copyright'] p a[data-privacy-policy] { + color: inherit; + cursor: pointer; + text-decoration: none; +} + +footer + .footer__bottom + [class*='footer__copyright'] + p + a[data-privacy-policy]:hover { + color: inherit; + text-decoration: none; +} + +@media (max-width: 996px) { + footer .footer__bottom [class*='footer__copyright'] { + align-items: center; + } +} diff --git a/packages/docs-gesture-handler/src/theme/Footer/index.js b/packages/docs-gesture-handler/src/theme/Footer/index.js new file mode 100644 index 0000000000..408adcdb0d --- /dev/null +++ b/packages/docs-gesture-handler/src/theme/Footer/index.js @@ -0,0 +1,25 @@ +import React, { useEffect } from 'react'; +import { Footer as TRexFooter } from '@swmansion/t-rex-ui'; + +const PRIVACY_POLICY_URL = 'https://swmansion.com/privacy/policy/'; + +export default function Footer(props) { + useEffect(() => { + const paragraph = document.querySelector('footer .footer__copyright p'); + if (!paragraph || paragraph.querySelector('[data-privacy-policy]')) { + return; + } + + paragraph.appendChild(document.createTextNode(' Read about our ')); + const link = document.createElement('a'); + link.href = PRIVACY_POLICY_URL; + link.target = '_blank'; + link.rel = 'noopener'; + link.dataset.privacyPolicy = ''; + link.textContent = 'Privacy Policy'; + paragraph.appendChild(link); + paragraph.appendChild(document.createTextNode('.')); + }, []); + + return ; +}