medium style overhaul for the ecosystem to have better consistency across the pages and fix some issues

[MTRNord]

Description

Before	After

This fixes:

• Better title wrapping
• The pill doesn't cause overflow issues with the title anymore
• The license is much more distinct
• The title is a bit smaller now
• Maturity of Clients is shown as well
• Cards are now the same across these pages (though noticeably Integrations can't utilize all of it)

Related issues

• show project maturity in the ecosystem overviews #2405
• I think also some of our general design overhaul tasks

Role

Website WG Hat :)

Timeline

Soon? Never? Now? When the moon phase turned 23 times and its the second blood moon after the third wave of a silent night?

Signoff

Please sign off your individual commits or whole pull request.

See commits :)

[HarHarLinks]

Preview: https://mtrnord-overhaul-ecosystem.matrix-website.pages.dev/ecosystem/

[HarHarLinks]

Looks like the filters stopped working on my phone on this PR deployment.

[MTRNord]

Looks like the filters stopped working on my phone on this PR deployment.

Seems like its caused by cloudflare and cors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bb593a6f.matrix-website.pages.dev/js/servers.js?h=1cb6dd610dd7ad0025a8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Using https://bb593a6f.matrix-website.pages.dev/ecosystem/servers/ instead works fine

[HarHarLinks]

Screenshots look good, so does testing on mobile.

I think cards could be a bit wider on mobile?

[awtj8o81ryywg793]

Just a few small suggestions.

[cloudflare-workers-and-pages]

Deploying matrix-website with    Cloudflare Pages

Latest commit:	6b7ccf8
Status:	✅  Deploy successful!
Preview URL:	https://eeff12ea.matrix-website.pages.dev
Branch Preview URL:	https://mtrnord-overhaul-ecosystem.matrix-website.pages.dev

View logs

[awtj8o81ryywg793]

Everything so far looks good to me. Thank you for implementing my suggested changes.

There are other areas in files not currently part of this request that exhibit the same issue. Would you mind including fixes for those in this PR?

See:

• line 21 of templates/ecosystem/bridge_implementations.html
• line 12 of templates/shortcodes/hosting_providers.html

In addition to these files, do we know why we use a <span> element for the description of each integration? Please refer to line 6 of templates/shortcodes/all_integrations.html. I would suggest switching the <span> to a <p> element, with the .description class assigned so its styling matches the other ecosystem pages.

[awtj8o81ryywg793]

I assume the answer to this question will be "yes," but I want to confirm. Is it intended for the hosting provider card to look similar yet different from the other ecosystem cards? I'm mainly referring to the larger font used for the hosting provider card's description compared to that of the other ecosystem cards.

I also noticed a responsive styling bug on the hosting providers page. If you set your browser's viewport to 850px and gradually shrink the width, you'll see the layout cycling between a two-in-a-row and one-in-a-row layout. I think we should update the responsive styling to align with the styling of other ecosystem pages too.

[HarHarLinks]

this looks a bit unfortunate on mobile, but I would also be happy to tackle it in a separate PR if you prefer

similar I'm not sure why we use different h- and v-gaps for download buttons:

[HarHarLinks]

As discussed in #3219 (comment) I do like the idea of transition: border-color 0.3s ease; to black for clickable cards in general.

[HarHarLinks]

The bridge platform buttons are invisible on mobile while they have a hover background on desktop. The buttons are about the size of the purple debug marker depending on the size of each individual one. I think it would be better if the clickable areas were more clearly visible.

I think the grid would also benefit from justify-content: center;?

[HarHarLinks]

There are some spacing and alignment issues on the bridge details:

I also think we should rather spell out DM as Direct Messages.

[HarHarLinks]

Similar situation of invisible buttons on mobile:

[HarHarLinks]

Hosters in 3 columns doesn't work for me as long as the amount of text remains so large.

There is a lot of wasted space with 2 or 1 columns:

Maybe it would be better to have an individual page for each hoster if we grant them that much text.

[HarHarLinks]

No need to implement all my comments in this PR, but at least this one should not introduce regressions.

[MTRNord]

@HarHarLinks please take another look. I did some fixes but not all:

• I did try to fix the hosting page a bit but choose 1 column on mobile for now. I believe making it have detail cards is another PR. We already are feature creeping here a bit I think. I think its still a small improvement over what we had at the time you did the review.
• I fixed the detail pages for clients and bridges.
• I made DM to "Direct Messages"
• I did try to make the click actions on the bridges more obvious. Not sure how well though
• I added the transition animation

I also applied all suggestions by @awtj8o81ryywg793

I didnt fix the invisible buttons on mobile for the SDKs. No idea how to make that better right now -> defer to an issue please?

Either way lets have another round of reviews @HarHarLinks and @awtj8o81ryywg793 ?

[HarHarLinks]

i still find confusing for cards to animate on hover if then they are not clickable.

the css would do great to attempt to follow some kind of component approach instead of redefining most things for each category.

overall i'd rather have this major improvement today than wait another half year though.