diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 73c9c810ef..f98ee38e38 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -187,6 +187,51 @@ const config: Config = { footer: { style: "dark", links: [ + { + title: "socials", + items: [ + { + label: " ", + href: "https://discord.gg/KQyTW2H5ca", + customProps: { + icon: "fa-brands fa-discord", + internal: true, + }, + }, + { + label: " ", + href: "https://x.com/prisma", + customProps: { + icon: "fa-brands fa-x-twitter", + internal: true, + }, + }, + { + label: " ", + href: "https://www.youtube.com/prismadata", + customProps: { + icon: "fa-brands fa-youtube", + internal: true, + }, + }, + { + label: " ", + href: "https://pris.ly/whatsapp", + customProps: { + icon: "fa-brands fa-whatsapp", + internal: true, + }, + }, + { + label: " ", + href: "https://github.com/prisma", + customProps: { + icon: "fa-brands fa-github", + internal: true, + }, + }, + ], + }, { title: "Product", items: [ @@ -380,50 +425,6 @@ const config: Config = { }, ], }, - { - items: [ - { - label: " ", - href: "https://discord.gg/KQyTW2H5ca", - customProps: { - icon: "fa-brands fa-discord", - internal: true, - }, - }, - { - label: " ", - href: "https://x.com/prisma", - customProps: { - icon: "fa-brands fa-x-twitter", - internal: true, - }, - }, - { - label: " ", - href: "https://www.youtube.com/prismadata", - customProps: { - icon: "fa-brands fa-youtube", - internal: true, - }, - }, - { - label: " ", - href: "https://pris.ly/whatsapp", - customProps: { - icon: "fa-brands fa-whatsapp", - internal: true, - }, - }, - { - label: " ", - href: "https://github.com/prisma", - customProps: { - icon: "fa-brands fa-github", - internal: true, - }, - }, - ], - }, ], logo: { srcDark: "img/logo-white.svg", diff --git a/src/css/custom.css b/src/css/custom.css index c966dfd8bf..327afffcb5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -734,6 +734,10 @@ hr { } } +.footer__item .fa-brands { + font-size: 24px !important; +} + .internal>i { display: none; } @@ -748,60 +752,6 @@ hr { height: 28px; } -.footer__col:last-child { - position: absolute; - height: var(--footer-bottom-height); - display: flex; - align-items: center; - justify-content: flex-end; - padding: 0; - width: auto; - top: calc(100% + 100px); - left: 0; -} - -@media (min-width: 520px) { - .footer__col:last-child { - top: calc(100% + 20px); - right: 0; - left: unset; - } -} - -@media (min-width: 768px) { - .footer__col:last-child { - top: calc(100% + 80px); - } -} - -@media (min-width: 1040px) { - .footer__col:last-child { - top: calc(100% + 120px); - } -} - -.footer__col:last-child>.footer__title { - display: none; -} - -.footer__col:last-child>ul { - display: flex; - gap: 20px; - font-size: 1.375rem; - color: white; -} - -.footer__col:last-child .footer__item a { - font-size: 1.375rem; - color: white; -} - -.footer__col:last-child, -.footer__item a:hover { - color: var(--indigo-link-color); - text-decoration: none; -} - .footer__copyright { text-align: left; font-size: 1.125rem; diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index d9bb7b531b..6cccfd5bd3 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -5,9 +5,11 @@ import React from "react"; import styles from "./styles.module.scss"; export default function FooterLayout({ style, links, logo, copyright }) { + console.log(links) return (