diff --git a/.env.example b/.env.example deleted file mode 100644 index fee30cf..0000000 --- a/.env.example +++ /dev/null @@ -1,3 +0,0 @@ -ALGOLIA_APP_ID=your_algolia_app_id -ALGOLIA_API_KEY=your_algolia_api_key -ALGOLIA_INDEX_NAME=your_algolia_index_name diff --git a/src/css/custom.css b/src/css/custom.css index 5b7ce3c..cd93f02 100755 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -34,3 +34,75 @@ .navbar__logo { margin-right: 0; } +/* Footer container: Add padding to the entire footer */ +.footer { + padding: 2rem 4rem; /* Add padding to the top/bottom and left/right */ +} + +/* Footer links container: Add padding between columns and edges */ +.footer__links { + display: flex; + justify-content: space-between; + gap: 2rem; /* Space between the columns */ + padding: 0 1rem; /* Horizontal padding inside the footer links container */ +} + +/* Footer link columns */ +.footer__link-column { + flex: 1; + padding: 0 1rem; /* Horizontal padding for each column */ +} + +/* Align 'Follow Us' column to the right */ +.footer__link-column:nth-child(2) { + margin-left: auto; + text-align: right; +} + +/* Style the footer links */ +.footer__link-column ul { + list-style-type: none; + padding-left: 0; +} + +.footer__link-column li { + margin-bottom: 0.5rem; +} + +/* Style for the footer copyright */ +.footer__copyright { + text-align: center; + padding-top: 1rem; + margin-top: 2rem; /* Space between copyright and links */ +} + +/* Mobile responsiveness */ +@media (max-width: 768px) { + /* Make the footer sections stack vertically */ + .footer__links { + flex-direction: column; /* Stack columns vertically */ + align-items: flex-start; /* Align them to the left */ + gap: 1rem; /* Reduced gap between sections */ + } + + /* Remove any extra padding from individual columns on mobile */ + .footer__link-column { + padding: 0; /* Remove padding for better mobile layout */ + } + + /* Ensure the 'Follow Us' section aligns to the left on small screens */ + .footer__link-column:nth-child(2) { + margin-left: 0; + text-align: left; + } + + /* Adjust the overall padding of the footer on mobile */ + .footer { + padding: 1.5rem 2rem; /* Reduced padding for mobile */ + } + + /* Make the footer copyright more readable on smaller screens */ + .footer__copyright { + font-size: 0.9rem; /* Slightly smaller text size for copyright */ + } +} diff --git a/src/theme/Footer/Copyright/index.js b/src/theme/Footer/Copyright/index.js new file mode 100644 index 0000000..d239a7a --- /dev/null +++ b/src/theme/Footer/Copyright/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +export default function FooterCopyright({copyright}) { + return ( +
+ ); +} diff --git a/src/theme/Footer/Layout/index.js b/src/theme/Footer/Layout/index.js new file mode 100644 index 0000000..cbbefc4 --- /dev/null +++ b/src/theme/Footer/Layout/index.js @@ -0,0 +1,20 @@ +import React from 'react'; +import clsx from 'clsx'; +export default function FooterLayout({style, links, logo, copyright}) { + return ( + + ); +} diff --git a/src/theme/Footer/LinkItem/index.js b/src/theme/Footer/LinkItem/index.js new file mode 100644 index 0000000..f1a6e84 --- /dev/null +++ b/src/theme/Footer/LinkItem/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import isInternalUrl from '@docusaurus/isInternalUrl'; +import IconExternalLink from '@theme/Icon/ExternalLink'; +export default function FooterLinkItem({item}) { + const {to, href, label, prependBaseUrlToHref, ...props} = item; + const toUrl = useBaseUrl(to); + const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); + return ( + + {label} + {href && !isInternalUrl(href) && } + + ); +} diff --git a/src/theme/Footer/Links/MultiColumn/index.js b/src/theme/Footer/Links/MultiColumn/index.js new file mode 100644 index 0000000..79ff51d --- /dev/null +++ b/src/theme/Footer/Links/MultiColumn/index.js @@ -0,0 +1,37 @@ +import React from 'react'; +import LinkItem from '@theme/Footer/LinkItem'; +function ColumnLinkItem({item}) { + return item.html ? ( +
  • + ) : ( +
  • + +
    • + ); +} +function Column({column}) { + return ( +
    +
    {column.title}
    +
      + {column.items.map((item, i) => ( + + ))} +
    +
    + ); +} +export default function FooterLinksMultiColumn({columns}) { + return ( +
    + {columns.map((column, i) => ( + + ))} +
    + ); +} diff --git a/src/theme/Footer/Links/Simple/index.js b/src/theme/Footer/Links/Simple/index.js new file mode 100644 index 0000000..8b34d9b --- /dev/null +++ b/src/theme/Footer/Links/Simple/index.js @@ -0,0 +1,31 @@ +import React from 'react'; +import LinkItem from '@theme/Footer/LinkItem'; +function Separator() { + return ·; +} +function SimpleLinkItem({item}) { + return item.html ? ( + + ) : ( + + ); +} +export default function FooterLinksSimple({links}) { + return ( +
    +
    + {links.map((item, i) => ( + + + {links.length !== i + 1 && } + + ))} +
    +
    + ); +} diff --git a/src/theme/Footer/Links/index.js b/src/theme/Footer/Links/index.js new file mode 100644 index 0000000..5da2258 --- /dev/null +++ b/src/theme/Footer/Links/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import {isMultiColumnFooterLinks} from '@docusaurus/theme-common'; +import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn'; +import FooterLinksSimple from '@theme/Footer/Links/Simple'; +export default function FooterLinks({links}) { + return isMultiColumnFooterLinks(links) ? ( + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/index.js b/src/theme/Footer/Logo/index.js new file mode 100644 index 0000000..2fdd1ab --- /dev/null +++ b/src/theme/Footer/Logo/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; +import ThemedImage from '@theme/ThemedImage'; +import styles from './styles.module.css'; +function LogoImage({logo}) { + const {withBaseUrl} = useBaseUrlUtils(); + const sources = { + light: withBaseUrl(logo.src), + dark: withBaseUrl(logo.srcDark ?? logo.src), + }; + return ( + + ); +} +export default function FooterLogo({logo}) { + return logo.href ? ( + + + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/styles.module.css b/src/theme/Footer/Logo/styles.module.css new file mode 100644 index 0000000..faf0e60 --- /dev/null +++ b/src/theme/Footer/Logo/styles.module.css @@ -0,0 +1,9 @@ +.footerLogoLink { + opacity: 0.5; + transition: opacity var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.footerLogoLink:hover { + opacity: 1; +} diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js new file mode 100644 index 0000000..64d3d69 --- /dev/null +++ b/src/theme/Footer/index.js @@ -0,0 +1,35 @@ +import React from 'react'; + +export default function Footer(props) { + return ( + + ); +}