Improve /support and /foundation/members designs by MTRNord · Pull Request #3534 · matrix-org/matrix.org

MTRNord · 2026-07-14T13:42:52Z

Description

More of an experiment trying to align it with all the other changes I proposed. Not sure if it is actually the right direction or not. For sure needs further feedback. I would love a proper masonry layout for example but I seem to not have css support for that :/

Related issues

I guess #2198

Role

Website & Content WG

Timeline

Lets take our time on this one and discuss before thinking about timelines :)

Signoff

Please sign off your individual commits.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord · 2026-07-14T13:45:10Z

~~Cloudflare doesnt like to comment I guess: https://mtrnord-members-support-rede.matrix-website.pages.dev/~~

See #3534 (comment)

HarHarLinks · 2026-07-14T13:59:55Z

maybe /support should also have the downward arrow ui hint from /try-matrix?

iirc the membership contracts guarantees platinum to have a bigger logo on the page than gold than silver

MTRNord · 2026-07-14T14:11:27Z

maybe /support should also have the downward arrow ui hint from /try-matrix?

Hm good idea

iirc the membership contracts guarantees platinum to have a bigger logo on the page than gold than silver

Hm ok I forgot about that. It just looked weird if i kept the original sizes in this setup 🤔 since it became extremely noticeable (though plat and gold were the same size in the old design it seems? and only the rest was smaller than those 2)

Not yet sure what to do about that. Hm.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

cloudflare-workers-and-pages · 2026-07-14T15:15:46Z

Deploying matrix-website with Cloudflare Pages

Latest commit:	`3bb1ccc`
Status:	✅ Deploy successful!
Preview URL:	https://ccc7f22f.matrix-website.pages.dev
Branch Preview URL:	https://mtrnord-members-support-rede.matrix-website.pages.dev

View logs

HarHarLinks · 2026-07-14T15:32:24Z

though plat and gold were the same size in the old design it seems? and only the rest was smaller than those 2

then that was probably correct

Moves .breadcrumb out of _support.scss into _breadcrumb.scss, matching the structure used in other PRs of mine. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

HarHarLinks · 2026-07-15T22:47:34Z

            </div>
-            <div id="most-popular" class="tier-card">
+            <div id="most-popular" class="tier-card tier-card--group-start tier-card--silver">
+                <p class="tier-card-eyebrow">For organisations</p>


have you tried how this would look following this approach?

but it would need to stay how it currently works or an entirely new solution for the mobile view

Didnt consider this at all yet.

HarHarLinks · 2026-07-16T14:13:54Z

https://github.com/matrix-org/website-wg/issues/17 is also a thing

HarHarLinks · 2026-07-16T15:16:54Z

maybe the .step-flow $.colored should use #eee of the current support page rather than #fafafa? the latter is indistinguishable from white to me

I can but it breaks try-matrix for me

So maybe a followup pr instead?

HarHarLinks · 2026-07-16T15:26:07Z

requesting review from andy to confirm whatever we do here matches the membership contract requirements

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Co-authored-by: Kim Brose <2803622+HarHarLinks@users.noreply.github.com> Signed-off-by: Marcel <MTRNord@users.noreply.github.com>

HarHarLinks · 2026-08-17T20:28:41Z

How about?

But that still leaves the "missing" button for ecosystem and associate members or their perks

MTRNord · 2026-08-17T20:30:19Z

How about?

But that still leaves the "missing" button for ecosystem and associate members or their perks

I think for the missing sections/cards I kinda need to know the rules. Then we can probably open a second row or something.

HarHarLinks · 2026-08-17T20:41:16Z

A bit tight on mobile. The hero itself also gets a bit in the way.

But the oddest feeling part is missing visual separation between the sections (flip the bgcolor to start at uneven?). The title alignments being different is more obvious on mobile too. Maybe that's ok?

HarHarLinks · 2026-08-17T20:46:44Z

+        // membership.html relies on scrollLeft); it was previously
+        // overflow-y, which didn't let that horizontal scroll happen at all.
+        overflow-x: auto;
+        scroll-snap-type: x proximity;


on mobile, the initial view on this places the individual members cleanly out of view to the left so the chance to discover it is near 0.

while it could help i'm not sure if snapping to the middle is the solution. it might require some thinking outside the box to solve this properly.

I added scroll indicators now. I think that solves it.

…croll indicator on the "Become a member" section and improve /support based on comments Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord · 2026-08-18T09:55:56Z

A bit tight on mobile. The hero itself also gets a bit in the way.

Maybe better now?

But the oddest feeling part is missing visual separation between the sections (flip the bgcolor to start at uneven?). The title alignments being different is more obvious on mobile too. Maybe that's ok?

I flipped it now. Possibly a bit better. I think the title is fine as the first one is somewhat of a CTA and the rest are section headings?

MTRNord · 2026-08-18T09:56:34Z

How about?

But that still leaves the "missing" button for ecosystem and associate members or their perks

I moved the buttons to more sensible places now I think. As said before I need more info for the perks of the other things for them to be added I guess.

HarHarLinks · 2026-08-18T10:15:29Z

+                let target = document.querySelector(hint.getAttribute('href'));
+                if (!target) return;
+                e.preventDefault();
+                tiersRow.scrollTo({ left: target.offsetLeft - 16, behavior: 'smooth' });


scroll.mp4

shouldn't this scroll 1 by one instead of to the end?

hm I guess thats possible too 🤔

HarHarLinks · 2026-08-18T10:24:00Z

+    --card-radius: 16px;
+    --card-radius-sm: 8px;
+
+    // The top 3 "become a member" tiers are literally named after materials


we have reference colors for these and all other tiers at https://github.com/matrix-org/matrix.org/tree/main/static/branding/membership

That was fixed earlier already. Comment needs fixing/removal though.

i don't see a green ecosystem members frame nor purple associates

weeman1337

The buttons should be CTAs = Call To Action. The current proposal does not contain a „call“. They can simple be in the box they belong to 🤷 See the attached screenshot with a sketch. We can think about to find a shorter text for the buttons, or at least for the join as individual button. If you want a bit more variety in the buttons, they can get the tier colour for example.

I also think, that scrolling is really bad, because it hides content. Maybe this can be done for showcases etc. where the content is not important. For the membership I would say it should be a grid that breaks.

Also shouldn't there a link from the support page to the membership page?

weeman1337 · 2026-08-18T20:01:12Z

@@ -0,0 +1,249 @@
+.membership {


And another huuuge bunch of specific CSS. We should better think more in a framework direction for CTAs, Grids, etc. in my opinion. But we can clean this up later.

andypiper · 2026-08-19T13:03:29Z

re: request for my review.

The documentation on membership tier benefits, list logo placement perks as: Platinum large logo (front page + sponsor page), Gold medium logo (sponsor page), Silver small logo (sponsor page).

(where "sponsor page" is as written in prospectus; we can interpret as members page)

So, we must maintain those agreements and arrangements with any improvements.

Technically the existing page has both Platinum and Gold tiers with the same sized logos (and neither of the two members have commented on that!), and the revisions proposed do not change those sizes, so from that perspective this seems OK to me.

HarHarLinks · 2026-08-19T15:27:09Z

Platinum large logo (front page + sponsor page), Gold medium logo (sponsor page), Silver small logo (sponsor page).

if this is indeed the case (or any other updates in that are), somebody (you?) will need to task the WG with it

andypiper · 2026-08-19T20:28:21Z

As I said - I think the update in this PR reflects the current site status 👍🏻

improve /support and /foundation/members designs

92339de

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord added the aesthetic Visual inconsistencies or improvements label Jul 14, 2026

MTRNord added 2 commits July 14, 2026 17:15

add a css make plat and gold sponsors larger than the rest

8598b5e

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

add a js based masonry layout to the members page

1316047

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord mentioned this pull request Jul 15, 2026

Add a glossary to the Docs #3536

Open

extract the breadcrumb component into its own partial

70c5cf2

Moves .breadcrumb out of _support.scss into _breadcrumb.scss, matching the structure used in other PRs of mine. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord marked this pull request as ready for review July 15, 2026 21:41

MTRNord requested a review from a team as a code owner July 15, 2026 21:41

HarHarLinks reviewed Jul 15, 2026

View reviewed changes

HarHarLinks reviewed Jul 16, 2026

View reviewed changes

Comment thread sass/_support.scss Outdated

HarHarLinks reviewed Jul 16, 2026

View reviewed changes

Comment thread static/js/members-masonry.js

HarHarLinks reviewed Jul 16, 2026

View reviewed changes

Comment thread templates/support.html Outdated

HarHarLinks reviewed Jul 16, 2026

View reviewed changes

Comment thread sass/_base.scss Outdated

HarHarLinks requested a review from andypiper July 16, 2026 15:25

MTRNord added 5 commits August 13, 2026 16:25

split the membership css into a _membership.scss

6606c54

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

rename supporters-masonry.js to members-masonry.js

eabc2fa

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

fix Working Group spelling

f957d45

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

add the same down arrow as on try-matrix on /support

b46ec31

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

switch to the same colors as the badges

46c6016

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord requested a review from HarHarLinks August 13, 2026 14:34

HarHarLinks reviewed Aug 17, 2026

View reviewed changes

Comment thread templates/support.html Outdated

Comment thread templates/support.html Outdated

Fix Working Group spelling

fcbda12

Co-authored-by: Kim Brose <2803622+HarHarLinks@users.noreply.github.com> Signed-off-by: Marcel <MTRNord@users.noreply.github.com>

HarHarLinks reviewed Aug 17, 2026

View reviewed changes

Comment thread sass/_support.scss Outdated

HarHarLinks reviewed Aug 17, 2026

View reviewed changes

Comment thread sass/_support.scss

improve button positioning, show the section title on scroll, add a s…

3bb1ccc

…croll indicator on the "Become a member" section and improve /support based on comments Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord requested a review from HarHarLinks August 18, 2026 09:56

weeman1337 self-requested a review August 18, 2026 10:13

HarHarLinks reviewed Aug 18, 2026

View reviewed changes

Comment thread content/foundation/members/members.toml

weeman1337 reviewed Aug 18, 2026

View reviewed changes

Uh oh!

Uh oh!

Conversation

MTRNord commented Jul 14, 2026

Description

Related issues

Role

Timeline

Signoff

Uh oh!

MTRNord commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HarHarLinks commented Jul 14, 2026

Uh oh!

MTRNord commented Jul 14, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying matrix-website with Cloudflare Pages

Uh oh!

HarHarLinks commented Jul 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HarHarLinks commented Jul 16, 2026

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

HarHarLinks commented Jul 16, 2026

Uh oh!

Uh oh!

Uh oh!

HarHarLinks commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MTRNord commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HarHarLinks commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

HarHarLinks Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MTRNord commented Aug 18, 2026

Uh oh!

MTRNord commented Aug 18, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

weeman1337 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

MTRNord commented Jul 14, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 14, 2026 •

edited

Loading

HarHarLinks commented Aug 17, 2026 •

edited

Loading

MTRNord commented Aug 17, 2026 •

edited

Loading

HarHarLinks commented Aug 17, 2026 •

edited

Loading

HarHarLinks Aug 17, 2026 •

edited

Loading

weeman1337 left a comment •

edited

Loading

HarHarLinks commented Aug 19, 2026 •

edited

Loading