diff --git a/packages/audiodocs/docusaurus.config.js b/packages/audiodocs/docusaurus.config.js index a18064b09..2fb02db64 100644 --- a/packages/audiodocs/docusaurus.config.js +++ b/packages/audiodocs/docusaurus.config.js @@ -120,7 +120,8 @@ const config = { }, footer: { links: [], - copyright: `All trademarks and copyrights belong to their respective owners.`, + copyright: + 'All trademarks and copyrights belong to their respective owners. Read about our ', }, prism: { additionalLanguages: ['bash', 'cmake'], diff --git a/packages/audiodocs/src/css/overrides.css b/packages/audiodocs/src/css/overrides.css index 270b2beb6..fcb86b97f 100644 --- a/packages/audiodocs/src/css/overrides.css +++ b/packages/audiodocs/src/css/overrides.css @@ -22,6 +22,42 @@ z-index: 100; } +footer.footer { + --ifm-footer-padding-vertical: 32px; +} + +@media (max-width: 996px) { + footer.footer { + --ifm-footer-padding-vertical: 20px; + } +} + +@media (max-width: 768px) { + footer.footer { + --ifm-footer-padding-vertical: 20px; + } +} + +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'] a, +footer .footer__bottom [class*='footer__copyright'] a:hover { + text-decoration: none; +} + +@media (max-width: 996px) { + footer .footer__bottom [class*='footer__copyright'] { + align-items: center; + } +} + .docusaurus-mermaid-container { display: flex; justify-content: center; diff --git a/packages/audiodocs/src/landingComponents/FooterBackground/styles.module.css b/packages/audiodocs/src/landingComponents/FooterBackground/styles.module.css index 90f2481f5..f8fa87b39 100644 --- a/packages/audiodocs/src/landingComponents/FooterBackground/styles.module.css +++ b/packages/audiodocs/src/landingComponents/FooterBackground/styles.module.css @@ -1,6 +1,6 @@ .container { position: relative; - margin-top: 106px; + margin-top: 122px; } .footerBg { @@ -20,12 +20,12 @@ } [class*='footerLanding'] { - margin-top: -106px; + margin-top: -115px; } @media (max-width: 996px) { .container { - margin-top: 121px; + margin-top: 138x; } .footerBg { @@ -33,13 +33,13 @@ } [class*='footerLanding'] { - margin-top: -121px; + margin-top: -138px; } } @media (max-width: 700px) { .container { - margin-top: 147px; + margin-top: 164px; } .footerBg { @@ -47,13 +47,13 @@ } [class*='footerLanding'] { - margin-top: -147px; + margin-top: -164px; } } @media (max-width: 376px) { .container { - margin-top: 173px; + margin-top: 189px; } .footerBg { @@ -61,6 +61,6 @@ } [class*='footerLanding'] { - margin-top: -173px; + margin-top: -189px; } } diff --git a/packages/audiodocs/src/theme/Footer/index.js b/packages/audiodocs/src/theme/Footer/index.js new file mode 100644 index 000000000..f2e4f6012 --- /dev/null +++ b/packages/audiodocs/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(' ')); + 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 ; +}