fix: Fix team page (#221)

Author: xmnlab

mkdocs.yml

@@ -25,6 +25,7 @@ extra_css:
   - css/nav.css
   - css/partners.css
   - css/search.css
+  - css/team.css
   - css/tokens.css
   - css/utilities.css
 

scripts/check-broken-links-md.py

@@ -37,11 +37,16 @@ def process_log() -> None:
     for line in log_err.splitlines():
         line = line.strip()  # noqa: PLW2901
         # Check if the line starts with '('
-        if line.startswith("("):
-            # Extract the URL using regex
-            for exception_url in exception_urls:
-                if exception_url not in line:
-                    flagged_errors.append(line)
+        if not line.startswith("("):
+            continue
+
+        if line.endswith("429)"):
+            # Too Many Requests http error
+            continue
+        # Extract the URL using regex
+        for exception_url in exception_urls:
+            if exception_url not in line:
+                flagged_errors.append(line)
 
     # Print flagged errors
     if not flagged_errors:

theme/css/team.css

@@ -0,0 +1,56 @@
+/* ===== Team page (scoped) ===== */
+.team-grid .card{
+  border-radius: 1rem;
+  border: 1px solid var(--card-border, rgba(255,255,255,.12));
+  background: var(--card-bg, rgba(20,24,33,.6));
+  overflow: hidden;
+}
+[data-bs-theme="light"] .team-grid .card{
+  background: #fff;
+  border-color: rgba(0,0,0,.08);
+}
+
+.team-grid .card-img-top{
+  display:block;
+  width:100%;
+  aspect-ratio: 4 / 3;       /* keeps consistent header area */
+  object-fit: cover;         /* crops tall/wide headshots neatly */
+}
+
+.team-grid .card-title{
+  font-size: 1.15rem;
+  margin-bottom: .25rem;
+}
+
+/* Social icon row */
+.team-grid .social{
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+
+/* Tight, consistent SVG icon sizing + inherit theme color */
+.team-grid .social .icon{
+  width: 22px;               /* <- right here: fix HUGE icon */
+  height: 22px;
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;        /* ensure symbols use text color */
+}
+.team-grid .social a{
+  color: var(--fg, #e6e9f0);
+  opacity: .85;
+  text-decoration: none;
+}
+[data-bs-theme="light"] .team-grid .social a{
+  color: #1f2937;
+}
+.team-grid .social a:hover{
+  color: var(--brand, #3b82f6);
+  opacity: 1;
+}
+
+/* Sponsor iframe wrapper spacing */
+.team-grid .sponsor{
+  margin-top: .5rem;
+}

theme/team.html

@@ -1,8 +1,12 @@
 {% extends "base.html" %}
 
+{% block header_extra %}
+<link rel="stylesheet" href="/css/team.css">
+{% endblock header_extra %}
+
 {% block content %}
-<section>
-  <div class="row pt-2">
+<section class="team-grid py-2">
+  <div class="row">
     <div class="col-md-12 mx-auto">
       {% block content_inner %}
       {{ page.content }}
@@ -11,43 +15,54 @@
   </div>
 
   {% for group in page.meta["teams"] %}
-  <div class="row">
-    <div class="col-md-12 mx-auto pt-3">
-      <h2>{{ group.name }}</h2>
-      <div class="row row-cols-1 row-cols-md-3">
+  <div class="row pt-3">
+    <div class="col-md-12 mx-auto">
+      <h2 class="mb-3">{{ group.name }}</h2>
+
+      <!-- Responsive grid with gutter spacing -->
+      <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
         {% for member in group.members %}
         <div class="col">
-          <div class="card p-0 mt-3">
-            <img src="{{ member.image_url }}" class="card-img-top m-0" />
-            <div class="card-body">
-              <h3 class="card-title">{{ member.name }}</h3>
+          <div class="card h-100">
+            {% if member.image_url %}
+              <img src="{{ member.image_url }}" class="card-img-top" alt="{{ member.name }}">
+            {% endif %}
 
-              <a class="git_ico" href="{{ member.github_url }}">
-                <svg class="icon">
-                  <title>github</title>
-                  <use xlink:href="#github"></use>
-                </svg>
-              </a>
+            <div class="card-body d-flex flex-column">
+              <div class="d-flex justify-content-between align-items-start">
+                <h3 class="card-title mb-2">{{ member.name }}</h3>
 
-              <p class="card-text">{{ member.bio }}</p>
+                {% if member.github_url %}
+                <div class="social">
+                  <a class="git_ico" href="{{ member.github_url }}" target="_blank" aria-label="{{ member.name }} on GitHub" rel="noopener">
+                    <svg class="icon"><use xlink:href="#github"/></svg>
+                  </a>
+                </div>
+                {% endif %}
+              </div>
 
-              {% if "github_sponsor" in member %}
-              Support his work on community and open source projects via:
-
-              <iframe
-                src="{{ member.github_sponsor }}"
-                title="Sponsor {{ member.name }}"
-                height="35"
-                width="116"
-                style="border: 0"
-              ></iframe>
+              {% if member.bio %}
+                <p class="card-text mb-2">{{ member.bio }}</p>
+              {% endif %}
 
+              {% if "github_sponsor" in member %}
+                <div class="sponsor mt-auto">
+                  <small class="text-secondary d-block mb-1">Support this work:</small>
+                  <iframe
+                    src="{{ member.github_sponsor }}"
+                    title="Sponsor {{ member.name }}"
+                    height="35"
+                    width="116"
+                    style="border:0"
+                  ></iframe>
+                </div>
               {% endif %}
             </div>
           </div>
         </div>
         {% endfor %}
       </div>
+
     </div>
   </div>
   {% endfor %}