diff --git a/src/components/patterns/Footer/Footer.astro b/src/components/patterns/Footer/Footer.astro index 62b8fa30c1..4cbf5b5f2a 100644 --- a/src/components/patterns/Footer/Footer.astro +++ b/src/components/patterns/Footer/Footer.astro @@ -109,7 +109,7 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives'; aria-label="expressjs on GitHub" target="_blank" > - +
  • @@ -118,12 +118,12 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives'; aria-label="expressjs channel on Youtube" target="_blank" > - +
  • - +
  • @@ -131,7 +131,7 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives'; href="https://slack-invite.openjsf.org" aria-label="Join openjs foundation slack group" > - +
  • @@ -139,7 +139,7 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives'; href="https://opencollective.com/express" aria-label="support expressjs on Open Collective" > - +
  • @@ -147,12 +147,12 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives'; href="https://bsky.app/profile/expressjs.bsky.social" aria-label="follow expressjs on bluesky" > - +
  • - +
  • diff --git a/src/components/patterns/Footer/Footer.css b/src/components/patterns/Footer/Footer.css index 14804b7276..1669e9e6ad 100644 --- a/src/components/patterns/Footer/Footer.css +++ b/src/components/patterns/Footer/Footer.css @@ -68,16 +68,32 @@ padding: 0; margin: 0; display: flex; + flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); li { - display: inline; + display: inline-flex; + flex-shrink: 0; + } + + a { + display: inline-flex; + align-items: center; + justify-content: center; + /* Keep a usable hit area even when icons are 16px */ + min-width: var(--size-6); + min-height: var(--size-6); } svg { color: var(--color-icon-primary); + flex-shrink: 0; + /* Override reset max-width:100% so flex layout cannot shrink icons */ + width: var(--size-4); + height: var(--size-4); + max-width: none; } svg path { @@ -126,6 +142,8 @@ .kawaii-toggle { font-size: var(--font-size-sm); + flex-shrink: 0; + white-space: nowrap; } .kawaii-toggle[aria-pressed='true'] {