From db05c4276303393f546458ca2ea827360ed67cf0 Mon Sep 17 00:00:00 2001 From: Philip Colmer Date: Thu, 5 Mar 2026 09:05:48 +0000 Subject: [PATCH] Implement carousel for member logos --- README.md | 33 ++++++++++++- src/components/Members.astro | 85 +++++++++++++++++++++++++++------- src/content/logos/company.yaml | 6 ++- src/styles/global.css | 9 ++++ 4 files changed, 112 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 0ce2a48..4d8d972 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,37 @@ git push origin staging Logo images can be added to the CoreCollective S3 bucket: static-core-collective/company_logos. Copy the asset url and update the base url to "https://static.corecollective.dev" -Add the url in alphabetical order to the company.yaml list with a `alt` field also. -If the logo appears larger or small add a `scale` field also to adjust accordingly. +Add the url in alphabetical order to the `src/content/logos/company.yaml` list with an `alt` field. + +### Adjusting logo sizing in the carousel + +The carousel displays all logos in a fixed bounding box (12rem x 3.5rem on desktop). Logos with +different SVG viewBox dimensions will appear at different visual sizes. The optional `scale` field +applies a CSS `transform: scale()` to adjust a logo's visual weight within its bounding box. + +**When to use `scale`:** +- If a new logo appears too large compared to others, add `scale: "0.8"` (or lower) to shrink it +- If a logo appears too small (e.g. the SVG has lots of internal whitespace), add a scale above 1.0 +- Check the logo at both desktop and mobile widths after adjusting + +**How to determine the right value:** +1. Run `npm run dev` and compare the new logo visually against its neighbours in the carousel +2. Start with small adjustments (e.g. 0.8 or 1.2) and refine from there +3. SVGs with a tall aspect ratio (close to square) tend to appear large and need scale < 1.0 +4. SVGs with excessive internal padding/whitespace need scale > 1.0 + +**Current scale values for reference:** +| Logo | Scale | Reason | +|------|-------|--------| +| AMD | 0.8 | SVG fills height aggressively | +| Arm | 0.75 | Large viewBox, appears oversized at 1.0 | +| CIX | 0.8 | Wide logo that dominates visually | +| Google | 0.8 | Fills height aggressively | +| Huawei | 2.8 | SVG has significant internal whitespace | + +**Ideal solution:** For best results, ask your web developer to normalise the SVG file itself +(trim whitespace from the viewBox, ensure artwork fills a consistent proportion of the canvas). +This reduces the need for per-logo scale overrides. ## Updating blogs diff --git a/src/components/Members.astro b/src/components/Members.astro index 0b1853b..1129552 100644 --- a/src/components/Members.astro +++ b/src/components/Members.astro @@ -11,21 +11,72 @@ const images = companyLogos?.data;
-
    - { - images?.map((img: any) => ( -
  • - {img.alt} -
    • - )) - } -
+
+
+ { + [0, 1].map(() => ( +
+ {(images || []).map((img: any) => ( + + ))} +
+ )) + } +
+
+
+
+
+
+ + diff --git a/src/content/logos/company.yaml b/src/content/logos/company.yaml index c2934e7..9b81936 100644 --- a/src/content/logos/company.yaml +++ b/src/content/logos/company.yaml @@ -1,5 +1,6 @@ - src: https://static.corecollective.dev/company_logos/amdLogo.svg alt: amd logo + scale: "0.8" - src: https://static.corecollective.dev/company_logos/ampereLogo.svg alt: ampere logo - src: https://static.corecollective.dev/company_logos/armLogo.svg @@ -9,16 +10,17 @@ alt: canonical logo - src: https://static.corecollective.dev/company_logos/cixLogo.svg alt: cix logo + scale: "0.8" - src: https://static.corecollective.dev/company_logos/fujitsuLogo.svg alt: fujitsu logo - src: https://static.corecollective.dev/company_logos/googleLogo.svg alt: google logo - scale: "0.95" + scale: "0.8" - src: https://static.corecollective.dev/company_logos/graphcoreLogo.svg alt: graphcore logo - src: https://static.corecollective.dev/company_logos/huawei3.svg alt: huawei logo - scale: "1.9" + scale: "2.8" - src: https://static.corecollective.dev/company_logos/linaroLogo.svg alt: linaro logo - src: https://static.corecollective.dev/company_logos/microsoftLogo.svg diff --git a/src/styles/global.css b/src/styles/global.css index 7dcdd1a..f542dcd 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -36,4 +36,13 @@ .hover-gradient-border:hover::before { opacity: 1; } +} + +@keyframes scroll { + from { + transform: translateX(0); + } + to { + transform: translateX(-50%); + } } \ No newline at end of file