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

sass/_clients.scss

@@ -12,7 +12,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
         margin-bottom: 1rem;
     }
 
-    p {
+    >p {
         text-align: center;
         font-weight: 400;
         font-size: 1.125rem;
@@ -29,6 +29,10 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
 .project-card.client {
     color: var(--color-text);
     cursor: pointer;
+
+    img {
+        margin: 0 auto;
+    }
 }
 
 .platform-links {

sass/_projects.scss

@@ -19,11 +19,10 @@
 .project-card {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     padding: 24px;
-    gap: 1rem;
-
+    gap: .75rem;
     min-height: 100%;
 
     border: 1px solid #D2D2D2;
@@ -37,37 +36,85 @@
     }
 
     h3 {
-        margin: 0 .2rem 0 0;
-
+        margin: 0;
         font-style: normal;
         font-weight: 700;
-        font-size: 1.8rem;
-        line-height: 1;
+        font-size: 1.6rem;
+        line-height: 1.15;
         text-align: center;
+        overflow-wrap: break-word;
+        word-break: break-word;
+        hyphens: auto;
     }
 
-    a,
-    .open-project {
-        margin-block: auto 0;
+    a {
         color: var(--color-text-light);
         text-decoration: none;
     }
 
+    .open-project {
+        margin: 0;
+        color: var(--color-text-light);
+    }
+
     p {
         line-height: 1;
+        margin: 0;
+
+        &:empty {
+            display: none;
+        }
     }
 
+    .metadata-pills,
     .licence-language {
         display: flex;
         flex-direction: row;
-        gap: .2rem;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: .3rem;
     }
 
     .pill {
         background-color: #e9e9e9;
-        border-radius: 9999px;
-        padding-inline: .5rem;
+        border-radius: 16px;
+        padding: .2rem .5rem;
         color: var(--color-text);
+        font-size: .85rem;
+        line-height: 1.2;
+        text-align: center;
+
+        &.licence {
+            background-color: transparent;
+            border: 1px solid #888;
+            color: #555;
+        }
+    }
+
+    .subtitle {
+        font-size: .9rem;
+        color: var(--color-text-light);
+        text-align: center;
+    }
+
+    .description {
+        font-size: .9rem;
+        line-height: 1.4;
+        text-align: center;
+        margin: 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        &:empty {
+            display: none;
+        }
     }
 }
 
@@ -223,10 +270,22 @@
     width: 100%;
     max-width: 100%;
     display: flex;
-    justify-content: space-between;
-    gap: .2rem;
-    align-items: start;
+    flex-direction: column;
+    align-items: center;
+    gap: .3rem;
+
+    h3 {
+        text-align: center;
+    }
+}
+
+.card-links {
+    margin-top: auto;
+    display: flex;
+    flex-direction: row;
     flex-wrap: wrap;
+    justify-content: center;
+    gap: .5rem;
 }
 
 #filters-overlay {

templates/ecosystem/clients.html

@@ -40,9 +40,15 @@ <h2>Featured clients</h2>
                 {# We're not using placeholders as a fallback because we want showcased clients to have an actual icon
                 #}
                 <img src="{{ client.extra.thumbnail }}" alt="{{ client.title }} Logo">
-                <h3>{{ client.title }}</h3>
-                <span>{{ client.content | safe }}</span>
-                <div class="platform-links">
+                <div class="title-row">
+                    <h3>{{ client.title }}</h3>
+                    <div class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</div>
+                </div>
+                <div class="metadata-pills">
+                    <div class="pill licence">{{ client.extra.licence }}</div>
+                </div>
+                <p class="description">{{ client.content | safe }}</p>
+                <div class="card-links platform-links">
                     {{ clients::platforms(packages=client.extra.packages) }}
                 </div>
                 <p class="open-project">Open client details</p>
@@ -202,9 +208,15 @@ <h2>All known clients</h2>
         <div>
             <a href="{{ client.path }}" class="project-card client {{ clients::classes(client=client.extra) }}">
                 <img src="./{{ thumbnail }}" alt="{{ client.title }} Logo">
-                <h3>{{ client.title }}</h3>
-                <span>{{ client.content | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe  }}</span>
-                <div class="platform-links">
+                <div class="title-row">
+                    <h3>{{ client.title }}</h3>
+                    <div class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</div>
+                </div>
+                <div class="metadata-pills">
+                    <div class="pill licence">{{ client.extra.licence }}</div>
+                </div>
+                <p class="description">{{ client.content | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>
+                <div class="card-links platform-links">
                     {{ clients::platforms(packages=client.extra.packages) }}
                 </div>
                 <p class="open-project">Open client details</p>

templates/macros/sdks.html

@@ -94,13 +94,13 @@
                     <h3>{{ sdk.name }}</h3>
                     <div class="maturity {{ sdk.maturity | lower }}">{{ sdk.maturity }}</div>
                 </div>
-                <div class="author">{{ sdk.maintainer }}</div>
-                <div class="licence-language">
-                    <div class="pill">{{ sdk.licence }}</div>
+                {% if sdk.maintainer %}<div class="subtitle">{{ sdk.maintainer }}</div>{% endif %}
+                <div class="metadata-pills">
+                    <div class="pill licence">{{ sdk.licence }}</div>
                     <div class="pill">{{ sdk.language }}</div>
                 </div>
-                {% if sdk.description %}<p>{{ sdk.description }}</p>{% endif %}
-                <div class="server-links">
+                {% if sdk.description %}<p class="description">{{ sdk.description }}</p>{% endif %}
+                <div class="card-links server-links">
                     {% if sdk.repository %}
                     <a href="{{ sdk.repository }}">
                         {{ load_data(path="/assets/projects/repo.svg") | safe }}

templates/shortcodes/all_distributions.html

@@ -103,10 +103,15 @@
                 <h3>{{ distribution.name }}</h3>
                 <div class="maturity {{ distribution.maturity | lower }}">{{ distribution.maturity }}</div>
             </div>
-            <div>{{ distribution.licence }} &middot; {% for framework in distribution.frameworks %}{{
-                framework }}{% if not loop.last %} &ndash; {% endif %}{% endfor %}</div>
-            <span>{{ distribution.description | safe }}</span>
-            <div class="distribution-links">
+            {% if distribution.vendor %}<div class="subtitle">{{ distribution.vendor }}</div>{% endif %}
+            <div class="metadata-pills">
+                <div class="pill licence">{{ distribution.licence }}</div>
+                {% for framework in distribution.frameworks %}
+                <div class="pill">{{ framework }}</div>
+                {% endfor %}
+            </div>
+            <p class="description">{{ distribution.description | safe }}</p>
+            <div class="card-links distribution-links">
                 {% if distribution.website %}
                 <a href="{{ distribution.website }}">
                     {{ load_data(path="/assets/home.svg") | safe }}

templates/shortcodes/all_servers.html

@@ -83,9 +83,13 @@
                 <h3>{{ server.name }}</h3>
                 <div class="maturity {{ server.maturity | lower }}">{{ server.maturity }}</div>
             </div>
-            <div>{{ server.licence }} {{ server.language }}</div>
-            <span>{{ server.description | safe }}</span>
-            <div class="server-links">
+            {% if server.author %}<div class="subtitle">{{ server.author }}</div>{% endif %}
+            <div class="metadata-pills">
+                <div class="pill licence">{{ server.licence }}</div>
+                <div class="pill">{{ server.language }}</div>
+            </div>
+            <p class="description">{{ server.description | safe }}</p>
+            <div class="card-links server-links">
                 {% if server.website %}
                 <a href="{{ server.website }}">
                     {{ load_data(path="/assets/home.svg") | safe }}