Restyle link cards as a uniform tile grid

Cards previously had ragged heights because summaries vary in length.
Follow the community-scripts.org card pattern instead: fixed-height
title and summary blocks (clamped to 2 and 3 lines with an ellipsis),
a colored letter avatar derived from the domain, category and
manufacturer as badges in the header, tags in a single clipped row,
and domain plus added-date in a footer.

The avatar color is derived locally from the domain, so no external
favicon requests are made.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/templates/_link_card.html

@@ -1,22 +1,25 @@
 <div class="panel link-card" id="link-{{ link.id }}">
-  <div style="display:flex; justify-content:space-between; gap:12px;">
-    <div style="min-width:0;">
-      <a href="{{ link.url }}" target="_blank" rel="noopener"
-         style="font-weight:600; font-size:1.05rem;">{{ link.title or link.url }}</a>
-      <div class="muted" style="font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
-        {{ link.url }}
-      </div>
-      <div class="muted" style="font-size:.75rem; margin-top:3px;">
-        🕓 hinzugefügt am {{ link.created_at | datum }}
-      </div>
+  <div class="card-head">
+    <span class="card-avatar" style="--h: {{ link.url | hue }};">
+      {{ (link.url | domain)[:1] | upper or '?' }}
+    </span>
+
+    <div class="card-badges">
+      {% if link.category %}
+      <span class="badge badge-cat">{{ link.category }}</span>
+      {% endif %}
+      {% if link.manufacturer %}
+      <span class="badge badge-man">{{ link.manufacturer }}</span>
+      {% endif %}
     </div>
-    <div style="display:flex; gap:4px; flex-shrink:0; align-items:flex-start;">
-      <button class="ghost" style="padding:4px 9px; font-size:.85rem;"
+
+    <div class="card-actions">
+      <button class="ghost" style="padding:3px 7px; font-size:.8rem;"
               title="Bearbeiten"
               hx-get="/links/{{ link.id }}/edit"
               hx-target="#link-{{ link.id }}"
               hx-swap="outerHTML">✎</button>
-      <button class="danger"
+      <button class="danger" style="padding:3px 6px;"
               title="Löschen"
               hx-delete="/links/{{ link.id }}"
               hx-target="#link-{{ link.id }}"
@@ -25,29 +28,30 @@
     </div>
   </div>
 
-  {% if link.summary %}
-  <p style="margin:10px 0 8px;">{{ link.summary }}</p>
-  {% elif link.status == 'no_content' %}
-  <p class="muted" style="margin:10px 0 8px; font-style:italic;">
-    Inhalt konnte nicht abgerufen werden – Kategorisierung anhand der URL.
-  </p>
-  {% endif %}
+  <a href="{{ link.url }}" target="_blank" rel="noopener" class="card-title">
+    {{ link.title or link.url }}
+  </a>
 
-  <div style="display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem;">
-    {% if link.category %}
-    <span style="background:var(--accent); color:white; padding:2px 9px; border-radius:99px;">
-      {{ link.category }}
-    </span>
-    {% endif %}
-    {% if link.manufacturer %}
-    <span style="background:#0e7490; color:#cffafe; padding:2px 9px; border-radius:99px;">
-      🏢 {{ link.manufacturer }}
-    </span>
-    {% endif %}
+  <p class="card-summary">
+    {%- if link.summary -%}
+      {{ link.summary }}
+    {%- elif link.status == 'no_content' -%}
+      Inhalt konnte nicht abgerufen werden – Kategorisierung anhand der URL.
+    {%- endif -%}
+  </p>
+
+  <div class="card-spacer"></div>
+
+  {% if link.tag_list %}
+  <div class="card-tags">
     {% for tag in link.tag_list %}
-    <span style="background:var(--panel2); color:var(--muted); padding:2px 9px; border-radius:99px;">
-      #{{ tag }}
-    </span>
+    <span class="badge badge-tag">#{{ tag }}</span>
     {% endfor %}
   </div>
+  {% endif %}
+
+  <div class="card-foot">
+    <span class="card-domain" title="{{ link.url }}">{{ link.url | domain }}</span>
+    <span title="hinzugefügt am {{ link.created_at | datum }}">{{ link.created_at | datum }}</span>
+  </div>
 </div>

app/templates/base.html

@@ -49,10 +49,59 @@
     .main { flex: 1; min-width: 0; }
     .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
 
-    /* Linkliste: bis zu drei Karten pro Zeile, je nach Fensterbreite. */
-    #links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
+    /* Linkliste: bis zu drei Karten pro Zeile, je nach Fensterbreite.
+       Karten einer Zeile sind gleich hoch; die Zusammenfassung wird
+       dafür auf drei Zeilen gekürzt. */
+    #links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
     #links > .panel { margin-bottom: 0; }
     #links > #empty-state { grid-column: 1 / -1; }
+
+    .link-card { display: flex; flex-direction: column; }
+    .card-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
+    .card-avatar {
+      flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
+      display: inline-flex; align-items: center; justify-content: center;
+      font-weight: 700; font-size: 1rem;
+      background: hsl(var(--h) 45% 22%); color: hsl(var(--h) 80% 78%);
+      border: 1px solid hsl(var(--h) 40% 32%);
+    }
+    .card-badges {
+      display: flex; gap: 4px; flex: 1; min-width: 0;
+      overflow: hidden; max-height: 22px; align-items: flex-start;
+    }
+    .card-actions { display: flex; gap: 4px; flex-shrink: 0; }
+    .badge {
+      font-size: .7rem; padding: 2px 8px; border-radius: 99px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
+    }
+    .badge-cat { background: var(--accent); color: #fff; }
+    .badge-man { background: #0e7490; color: #cffafe; }
+    .badge-tag { background: var(--panel2); color: var(--muted); }
+    /* Feste Höhen für Titel und Zusammenfassung: so beginnt jeder Block auf
+       gleicher Höhe und das Kürzen mit "…" greift zuverlässig. */
+    .card-title {
+      font-weight: 600; font-size: 1rem; line-height: 1.35; margin-bottom: 6px;
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+      overflow: hidden; height: calc(2 * 1.35 * 1rem); flex: none;
+    }
+    .card-summary {
+      margin: 0 0 12px; font-size: .875rem; color: var(--muted); line-height: 1.5;
+      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+      overflow: hidden; height: calc(3 * 1.5 * .875rem); flex: none;
+    }
+    .card-spacer { flex: 1 1 auto; }
+    /* Tags: nur eine Zeile, Rest wird abgeschnitten – hält die Karten gleich hoch. */
+    .card-tags {
+      display: flex; gap: 4px;
+      overflow: hidden; max-height: 22px; flex-wrap: wrap;
+    }
+    .card-foot {
+      padding-top: 10px; border-top: 1px solid var(--border);
+      display: flex; justify-content: space-between; gap: 8px;
+      font-size: .75rem; color: var(--muted);
+    }
+    .card-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .card-foot > span:last-child { flex-shrink: 0; }
     @media (min-width: 1000px) { #links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
     @media (min-width: 1500px) { #links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }