better cards

site/public/styles/global.css

@@ -114,46 +114,7 @@ a {
   gap: 14px;
 }
 
-.blog-card {
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
-  overflow: hidden;
-  transition:
-    transform 120ms ease,
-    background 120ms ease;
-}
-
-.blog-card:hover {
-  transform: translateY(-2px);
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.blog-card img {
-  width: 100%;
-  height: 180px;
-  object-fit: cover;
-  display: block;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.blog-card-body {
-  padding: 12px 12px 14px;
-}
-
-.blog-card-title {
-  margin: 0 0 8px;
-  font-size: 15px;
-  line-height: 1.25;
-  letter-spacing: -0.01em;
-}
-
-.blog-card-excerpt {
-  margin: 0;
-  color: var(--muted);
-  font-size: 13px;
-  line-height: 1.5;
-}
+/* blog cards are now rendered via the shared `.card` component styles */
 
 .prose {
   line-height: 1.75;
@@ -256,53 +217,88 @@ a {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
+  align-items: stretch;
 }
 
 .card {
-  display: grid;
-  grid-template-columns: 110px 1fr;
-  gap: 12px;
-  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.04);
+  overflow: hidden;
   transition:
     transform 120ms ease,
     background 120ms ease;
 }
 
+.card-media {
+  flex: 0 0 auto;
+}
+
 .card:hover {
   transform: translateY(-2px);
   background: rgba(255, 255, 255, 0.06);
 }
 
 .card-media img {
-  width: 110px;
-  height: 70px;
-  border-radius: 10px;
+  width: 100%;
+  height: 180px;
   object-fit: cover;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: block;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .card-placeholder {
-  width: 110px;
-  height: 70px;
-  border-radius: 10px;
+  width: 100%;
+  height: 180px;
   background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.card-meta {
+.card-body {
   display: flex;
-  gap: 10px;
-  align-items: center;
-  font-size: 12px;
+  flex: 1;
+  flex-direction: column;
+  padding: 0;
+}
+
+.card-content {
+  flex: 1;
+  padding: 12px 12px 12px;
+  background: linear-gradient(180deg, rgba(15, 27, 56, 0.75), rgba(11, 16, 32, 0.32));
 }
 
 .card-title {
-  margin: 8px 0 0;
-  font-size: 14px;
-  line-height: 1.35;
+  margin: 0 0 8px;
+  font-size: 15px;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.card-summary {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.card-footer {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(11, 16, 32, 0.45);
+  font-size: 12px;
+}
+
+.card-footer .card-views {
+  flex: 1;
+  text-align: center;
 }
 
 .pill {
@@ -326,6 +322,10 @@ a {
   border-color: rgba(255, 205, 74, 0.35);
 }
 
+.pill-blog {
+  border-color: rgba(140, 88, 255, 0.35);
+}
+
 .empty {
   padding: 16px;
   border-radius: 14px;
@@ -351,12 +351,8 @@ a {
   .blog-grid {
     grid-template-columns: 1fr;
   }
-  .card {
-    grid-template-columns: 90px 1fr;
-  }
   .card-media img,
   .card-placeholder {
-    width: 90px;
-    height: 60px;
+    height: 200px;
   }
 }