diff --git a/app/components/Footer/footer.css b/app/components/Footer/footer.css index 235c53b7..e662d8a0 100644 --- a/app/components/Footer/footer.css +++ b/app/components/Footer/footer.css @@ -3,16 +3,16 @@ } .footer-contents { - display: flex; + /* display: flex; gap: var(--spacing-32); flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; - margin: var(--spacing-104) var(--spacing-80) var(--spacing-80) var(--spacing-80); + margin: var(--spacing-104) var(--spacing-80) var(--spacing-80) var(--spacing-80); */ } -@media (max-width: 780px) { +@media (max-width: 1136px) { .footer-contents { flex-direction: column; gap: 32px; diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx index b33c1db9..76ff008d 100644 --- a/app/components/Footer/index.tsx +++ b/app/components/Footer/index.tsx @@ -1,10 +1,9 @@ import {FunctionComponent} from 'react' import './footer.css' - const year = new Date().getFullYear() -const Link = ({to, title}: {to: string; title: string}) => ( -
+const Link = ({to, title, className}: {to: string; title: string; className?: string}) => ( +
{title} @@ -13,39 +12,61 @@ const Link = ({to, title}: {to: string; title: string}) => ( export const FooterBar: FunctionComponent = () => { return ( -
+

-
-
-

- AISafety.info -

-
- We’re a global team of specialists and volunteers from various backgrounds who want to - ensure that the effects of future AI are beneficial rather than catastrophic. +
+
+
+

+ AISafety.info +

+
+ We’re a global team of specialists and volunteers from various backgrounds who want to + ensure that the effects of future AI are beneficial rather than catastrophic. +
-
-
-

Get involved

- - - - +
+

Get involved

+ + + + +
+
+

Partner projects

+ + +
-
-

Partner projects

- - +
+
+
-
-
- -
) }