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:	1d0e693
Status:	✅  Deploy successful!
Preview URL:	https://4a5da5a0.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.