fix: Fix Partner page

mkdocs.yml

@@ -23,6 +23,7 @@ extra_css:
   - css/footer.css
   - css/home.css
   - css/nav.css
+  - css/partners.css
   - css/search.css
   - css/tokens.css
   - css/utilities.css

theme/css/partners.css

@@ -0,0 +1,109 @@
+/* ===== Partners grid (dark/light friendly, glass cards) ===== */
+
+:root{
+  --pc-text: var(--fg, #e8eaf0);
+  --pc-bg: rgba(16,18,27,.6);
+  --pc-border: rgba(255,255,255,.12);
+  --pc-hover: rgba(255,255,255,.06);
+}
+[data-bs-theme="light"]{
+  --pc-text: #111827;
+  --pc-bg: #ffffff;
+  --pc-border: rgba(0,0,0,.08);
+  --pc-hover: rgba(0,0,0,.04);
+}
+
+.partners-grid .partner-card{
+  background: var(--pc-bg);
+  border: 1px solid var(--pc-border);
+  border-radius: 1rem;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 10px 24px rgba(0,0,0,.08);
+  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
+  position: relative;
+}
+.partners-grid .partner-card:hover{
+  transform: translateY(-2px);
+  box-shadow: 0 16px 36px rgba(0,0,0,.16);
+  border-color: color-mix(in oklab, var(--pc-border) 60%, var(--brand, #3b82f6));
+}
+
+.partners-grid .partner-body{
+  color: var(--pc-text);
+}
+.partners-grid .partner-title a{
+  color: inherit;
+  text-decoration: none;
+}
+.partners-grid .partner-title a:hover{
+  text-decoration: underline;
+}
+.partners-grid .partner-summary{
+  color: color-mix(in oklab, var(--pc-text) 80%, transparent);
+  margin-bottom: .75rem;
+}
+
+.partners-grid .icon{ width: 18px; height: 18px; }
+
+.partners-grid .icon-btn{
+  --_bd: var(--pc-border);
+  --_fg: var(--pc-text);
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: .35rem;
+  border: 1px solid var(--_bd);
+  border-radius: 999px;
+  padding: .35rem .45rem;
+  line-height: 1;
+  color: var(--_fg);
+  background: transparent;
+  text-decoration: none;
+  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
+}
+.partners-grid .icon-btn:hover{
+  background: var(--pc-hover);
+  border-color: color-mix(in oklab, var(--_bd) 60%, var(--brand, #3b82f6));
+}
+.partners-grid .icon-btn:active{ transform: translateY(1px); }
+
+/* Logo band: fixed height + hidden overflow so nothing spills into the title */
+.partners-grid .logo-wrap{
+  height: 110px;                 /* was 130px */
+  padding: 12px 16px;
+  overflow: hidden;              /* hard stop */
+  display: flex; align-items: center; justify-content: center;
+  border-bottom: 1px dashed var(--pc-border);
+  background: color-mix(in oklab, var(--pc-bg) 92%, transparent);
+  border-top-left-radius: 1rem; border-top-right-radius: 1rem;
+}
+
+/* Logos: clamp both height and width so tall/wide marks don’t dominate */
+.partners-grid .logo-wrap img{
+  display: block;
+  object-fit: contain;
+  width: auto;
+  max-width: 80%;                /* prevent super-wide brands from touching edges */
+  max-height: clamp(44px, 8vw, 78px); /* scale responsively but never huge */
+  transform: scale(var(--logo-scale, 1));  /* per-partner fine-tune (see below) */
+  transform-origin: center;
+}
+
+/* Slightly larger on very wide screens, still bounded */
+@media (min-width: 1400px){
+  .partners-grid .logo-wrap{ height: 120px; }
+  .partners-grid .logo-wrap img{ max-height: 84px; }
+}
+
+/* And a touch smaller on tight screens to avoid crowding */
+@media (max-width: 480px){
+  .partners-grid .logo-wrap{ height: 96px; }
+  .partners-grid .logo-wrap img{ max-height: 64px; }
+}
+
+/* Optional: keep long names tidy */
+.partners-grid .partner-title{
+  display: -webkit-box;
+  -webkit-line-clamp: 2;         /* clamp to 2 lines */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

theme/partners.html

@@ -1,39 +1,54 @@
 {% extends "main.html" %}
 
-{% set colors=["", "bg-light"] %}
+{% block header_extra %}
+<link rel="stylesheet" href="/css/partners.css">
+{% endblock header_extra %}
 
 {% block content_inner %}
 {{ page.content }}
 
-<div class="row">
-  <div class="col-md-12 pt-3">
-
-    {% for partner in page.meta["partners"] %}
-
-    <div class="row {{ colors[loop.index % 2] }}">
-      <div class="col-4 text-center">
-        <a href="{{ partner.url }}">
-          <img src="{{ partner.thumbnail }}" style="height: 150px;"/>
-        </a>
-      </div>
-      <div class="col-8">
-        <h2>
-          {{ partner.name }}
-          {% if "github" in partner  %}
-          <a href="{{ partner.github }}"><i
-            class="fa fa-brands fa-github-square position-static text-dark"></i>
-          </a>
+<div class="partners-grid row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 mt-2">
+
+  {% for partner in page.meta["partners"] %}
+    {% set logo = (partner.thumbnail if 'thumbnail' in partner else (partner.logo if 'logo' in partner else None)) %}
+    {% set site  = partner.url if 'url' in partner else None %}
+
+    <div class="col">
+      <article class="partner-card h-100 d-flex flex-column">
+        <div class="logo-wrap p-4">
+          {% if logo %}
+            <a href="{{ site or '#' }}" class="d-inline-flex" target="_blank" rel="noopener">
+              <img src="{{ logo }}" alt="{{ partner.name }}">
+            </a>
           {% endif %}
-          {% if "twitter" in partner  %}
-          <a href="{{ partner.twitter }}"><i
-            class="fa fa-brands fa-twitter-square"></i>
-          </a>
+        </div>
+
+        <div class="partner-body px-4 pb-4 pt-3 d-flex flex-column flex-grow-1">
+          <h3 class="h5 partner-title mb-2">
+            {% if site %}
+              <a href="{{ site }}" class="stretched-link" target="_blank" rel="noopener">{{ partner.name }}</a>
+            {% else %}
+              {{ partner.name }}
+            {% endif %}
+          </h3>
+
+          {% if 'summary' in partner and partner.summary %}
+            <p class="partner-summary">{{ partner.summary }}</p>
           {% endif %}
-        </h2>
-        <p>{{ partner.summary }}</p>
-      </div>
+
+          <div class="mt-auto d-flex flex-wrap gap-2">
+            {# Social icons (only render if URL exists). These IDs come from base.html sprite. #}
+            {% if 'github' in partner %}<a href="{{ partner.github }}" class="icon-btn" target="_blank" rel="noopener" aria-label="GitHub"><svg class="icon"><use xlink:href="#github"/></svg></a>{% endif %}
+            {% if 'twitter' in partner %}<a href="{{ partner.twitter }}" class="icon-btn" target="_blank" rel="noopener" aria-label="Twitter / X"><svg class="icon"><use xlink:href="#twitter"/></svg></a>{% endif %}
+            {% if 'linkedin' in partner %}<a href="{{ partner.linkedin }}" class="icon-btn" target="_blank" rel="noopener" aria-label="LinkedIn"><svg class="icon"><use xlink:href="#linkedin"/></svg></a>{% endif %}
+            {% if 'facebook' in partner %}<a href="{{ partner.facebook }}" class="icon-btn" target="_blank" rel="noopener" aria-label="Facebook"><svg class="icon"><use xlink:href="#facebook"/></svg></a>{% endif %}
+            {% if 'discord' in partner %}<a href="{{ partner.discord }}" class="icon-btn" target="_blank" rel="noopener" aria-label="Discord"><svg class="icon"><use xlink:href="#discord"/></svg></a>{% endif %}
+            {% if 'rss' in partner %}<a href="{{ partner.rss }}" class="icon-btn" target="_blank" rel="noopener" aria-label="RSS"><svg class="icon"><use xlink:href="#rss"/></svg></a>{% endif %}
+          </div>
+        </div>
+      </article>
     </div>
-    {% endfor %}
-  </div>
+  {% endfor %}
+
 </div>
 {% endblock content_inner %}