removed numbers + card redesign

frontend/src/components/react/PostList.tsx

@@ -42,19 +42,6 @@ function formatMonth(date: string) {
   return new Date(date).toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
 }
 
-function toRoman(n: number): string {
-  const map: [number, string][] = [
-    [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
-    [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
-    [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
-  ];
-  let out = '';
-  for (const [val, sym] of map) {
-    while (n >= val) { out += sym; n -= val; }
-  }
-  return out;
-}
-
 // Deterministic salon-hang layout. Each tile gets a col-span (out of 12) and an aspect ratio.
 // The cycle is chosen so the room reads asymmetric but balanced.
 const LAYOUT_CYCLE: Array<{ col: number; aspect: string; tilt: number }> = [
@@ -123,7 +110,6 @@ export default function PostList({ posts: initialPosts, isAdmin = false }: Props
         const displayTitle = post.title || formatSlug(post.slug);
         const isDeleting = deleting === post.slug;
         const layout = LAYOUT_CYCLE[idx % LAYOUT_CYCLE.length];
-        const exhibitNumber = toRoman(idx + 1);
         const hasCover = !!post.cover_image?.url;
 
         return (
@@ -141,8 +127,6 @@ export default function PostList({ posts: initialPosts, isAdmin = false }: Props
               style={{ transform: `rotate(${layout.tilt}deg)` }}
               aria-label={`View ${displayTitle}`}
             >
-              <span className="plate-tag">№ {exhibitNumber}</span>
-
               <div
                 className="plate-image"
                 style={{ aspectRatio: layout.aspect }}
@@ -178,18 +162,16 @@ export default function PostList({ posts: initialPosts, isAdmin = false }: Props
               </div>
 
               <div className="plate-caption">
-                <div className="min-w-0">
-                  <div className="plate-caption-title truncate">{displayTitle}</div>
-                  {post.summary && (
-                    <div className="mt-1 text-xs text-[var(--subtext0)] font-sans italic line-clamp-1">
-                      {post.summary}
-                    </div>
-                  )}
-                </div>
+                <div className="plate-caption-title">{displayTitle}</div>
+                {post.summary && (
+                  <div className="plate-caption-summary">{post.summary}</div>
+                )}
                 <div className="plate-caption-meta">
                   <span>{formatMonth(post.date)}</span>
-                  <span className="opacity-50 mx-1">·</span>
+                  <span className="plate-caption-sep" aria-hidden="true">·</span>
                   <span>{formatYear(post.date)}</span>
+                  <span className="plate-caption-sep" aria-hidden="true">·</span>
+                  <span>{post.reading_time} min</span>
                 </div>
               </div>
             </a>