From c927948416a391d276263cf23ce21837fed70fed Mon Sep 17 00:00:00 2001 From: Francesca Giannino Date: Wed, 25 Feb 2026 09:32:18 +0100 Subject: [PATCH] feat: redesign footer (#2196) Co-authored-by: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> --- astro/public/netlify-logo.svg | 1 + astro/public/openjs-logo-black.svg | 57 ++++++++ astro/public/openjs-logo-white.svg | 61 +++++++++ .../components/patterns/Footer/Footer.astro | 128 ++++++++++++++++++ .../src/components/patterns/Footer/Footer.css | 126 +++++++++++++++++ astro/src/components/patterns/index.ts | 1 + .../src/components/primitives/Grid/Grid.astro | 6 +- astro/src/components/primitives/Grid/Grid.css | 37 +++++ astro/src/components/primitives/Grid/types.ts | 4 + astro/src/icons/bsky.svg | 3 + astro/src/icons/github.svg | 3 + astro/src/icons/open-collective.svg | 4 + astro/src/icons/slack.svg | 6 + astro/src/icons/x.svg | 3 + astro/src/icons/youtube.svg | 3 + astro/src/layouts/Layout.astro | 13 +- astro/src/styles/base/_global.css | 4 + 17 files changed, 453 insertions(+), 7 deletions(-) create mode 100644 astro/public/netlify-logo.svg create mode 100644 astro/public/openjs-logo-black.svg create mode 100644 astro/public/openjs-logo-white.svg create mode 100644 astro/src/components/patterns/Footer/Footer.astro create mode 100644 astro/src/components/patterns/Footer/Footer.css create mode 100644 astro/src/icons/bsky.svg create mode 100644 astro/src/icons/github.svg create mode 100644 astro/src/icons/open-collective.svg create mode 100644 astro/src/icons/slack.svg create mode 100644 astro/src/icons/x.svg create mode 100644 astro/src/icons/youtube.svg diff --git a/astro/public/netlify-logo.svg b/astro/public/netlify-logo.svg new file mode 100644 index 00000000..2edda225 --- /dev/null +++ b/astro/public/netlify-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/astro/public/openjs-logo-black.svg b/astro/public/openjs-logo-black.svg new file mode 100644 index 00000000..2c30e009 --- /dev/null +++ b/astro/public/openjs-logo-black.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/astro/public/openjs-logo-white.svg b/astro/public/openjs-logo-white.svg new file mode 100644 index 00000000..1a4436d3 --- /dev/null +++ b/astro/public/openjs-logo-white.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/astro/src/components/patterns/Footer/Footer.astro b/astro/src/components/patterns/Footer/Footer.astro new file mode 100644 index 00000000..0dd70b2d --- /dev/null +++ b/astro/src/components/patterns/Footer/Footer.astro @@ -0,0 +1,128 @@ +--- +/** + * Footer Component + * + * Main site footer with copyright and additional information + */ +import './Footer.css'; +import { Icon } from 'astro-icon/components'; +import { BodyMd, Col, Container, Grid } from '@/components/primitives'; +--- + + diff --git a/astro/src/components/patterns/Footer/Footer.css b/astro/src/components/patterns/Footer/Footer.css new file mode 100644 index 00000000..45d8e292 --- /dev/null +++ b/astro/src/components/patterns/Footer/Footer.css @@ -0,0 +1,126 @@ +@layer patterns { + .footer { + background-color: var(--color-bg-primary); + text-align: center; + color: var(--color-text-secondary); + border-top: 1px solid var(--color-border-secondary); + + a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + .footer__links { + list-style: none; + padding: 0; + margin: var(--space-4) 0; + + li { + display: inline; + margin: 0 var(--space-2); + } + + a { + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + } + } + + .footer-top { + padding: var(--space-6) 0; + } + + .footer-bottom { + background-color: var(--color-bg-secondary); + padding: var(--space-6) 0; + } + + .footer__logo { + list-style: none; + padding: 0; + margin: 0; + + @media (--xs-only) { + li { + display: block; + text-align: center; + + a { + display: inline-block; + padding: var(--space-4) 0; + } + } + } + + @media (--md-up) { + display: flex; + align-items: center; + gap: var(--space-8); + } + } + + .footer__socials { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-8); + + li { + display: inline; + } + + svg { + color: var(--color-icon-primary); + } + + svg path { + fill: currentColor; + } + + @media (--xs-only) { + padding: var(--space-4) 0 var(--space-6); + } + + @media (--md-up) { + justify-content: right; + gap: var(--space-10); + } + } + + .footer-logo-dark { + display: none; + } + + @media (prefers-color-scheme: dark) { + .footer-logo-light { + display: none; + } + + .footer-logo-dark { + display: block; + } + } + + [data-theme='dark'] .footer-logo-light { + display: none; + } + + [data-theme='dark'] .footer-logo-dark { + display: block; + } + + [data-theme='light'] .footer-logo-light { + display: block; + } + + [data-theme='light'] .footer-logo-dark { + display: none; + } +} diff --git a/astro/src/components/patterns/index.ts b/astro/src/components/patterns/index.ts index bdd36920..7c727f53 100644 --- a/astro/src/components/patterns/index.ts +++ b/astro/src/components/patterns/index.ts @@ -10,3 +10,4 @@ export { default as Sidebar } from './Sidebar/Sidebar.astro'; export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.astro'; export { default as VersionSwitcher } from './VersionSwitcher/VersionSwitcher.astro'; export { default as SearchTrigger } from './SearchTrigger/SearchTrigger.astro'; +export { default as Footer } from './Footer/Footer.astro'; diff --git a/astro/src/components/primitives/Grid/Grid.astro b/astro/src/components/primitives/Grid/Grid.astro index dcc2da52..4a76cc84 100644 --- a/astro/src/components/primitives/Grid/Grid.astro +++ b/astro/src/components/primitives/Grid/Grid.astro @@ -6,7 +6,7 @@ * Use with children for responsive column layouts. * * @example - * + * * Content * */ @@ -17,7 +17,7 @@ import type { GridProps } from './types'; type Props = GridProps & HTMLAttributes<'div'>; -const { gap, rowGap, columnGap, class: className, ...rest } = Astro.props; +const { gap, rowGap, columnGap, align, justify, class: className, ...rest } = Astro.props; ---
+ + diff --git a/astro/src/icons/github.svg b/astro/src/icons/github.svg new file mode 100644 index 00000000..e5c5a689 --- /dev/null +++ b/astro/src/icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/astro/src/icons/open-collective.svg b/astro/src/icons/open-collective.svg new file mode 100644 index 00000000..250d734a --- /dev/null +++ b/astro/src/icons/open-collective.svg @@ -0,0 +1,4 @@ + + + + diff --git a/astro/src/icons/slack.svg b/astro/src/icons/slack.svg new file mode 100644 index 00000000..c0b1f115 --- /dev/null +++ b/astro/src/icons/slack.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/astro/src/icons/x.svg b/astro/src/icons/x.svg new file mode 100644 index 00000000..780ab6a3 --- /dev/null +++ b/astro/src/icons/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/astro/src/icons/youtube.svg b/astro/src/icons/youtube.svg new file mode 100644 index 00000000..e8db9ce0 --- /dev/null +++ b/astro/src/icons/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/astro/src/layouts/Layout.astro b/astro/src/layouts/Layout.astro index da74eb59..5f6c5c25 100644 --- a/astro/src/layouts/Layout.astro +++ b/astro/src/layouts/Layout.astro @@ -1,7 +1,7 @@ --- import '@styles/main.css'; import { Flex, FlexItem } from '@components/primitives'; -import { Sidebar } from '@/components/patterns'; +import { Footer, Sidebar } from '@/components/patterns'; import { Header } from '@/components/patterns'; interface Props { @@ -54,12 +54,15 @@ const {
- + -
- -
+ +
+ +
+