Add themed header bar and image preview to news article cards

src/app/news/page.tsx

@@ -40,34 +40,41 @@ export default async function NewsPage() {
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {articles.map((a) => (
-              <article
+              <Link
                 key={a.slug}
+                href={`/news/${a.slug}`}
                 className="card hover"
-                style={{ display: "flex", flexDirection: "column" }}
+                style={{ display: "flex", flexDirection: "column", textDecoration: "none" }}
               >
+                <div
+                  style={{
+                    background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)))",
+                    borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+                    padding: "0.6rem 0.75rem",
+                    fontSize: "0.78rem",
+                    color: "var(--color-text-muted)",
+                  }}
+                >
+                  📰 {t("title")} &middot; {formatDate(a.createdAt)}
+                </div>
                 {a.image ? (
                   <img
                     src={a.image}
                     alt=""
-                    className="w-full rounded-t-lg"
+                    style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover" }}
-                    style={{ aspectRatio: "16/9", objectFit: "cover" }}
                   />
                 ) : (
                   <div
-                    className="w-full rounded-t-lg"
+                    style={{ width: "100%", aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }}
-                    style={{ aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }}
                   />
                 )}
                 <div style={{ padding: "0.75rem" }}>
-                  <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
+                  <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem", color: "var(--color-text)" }}>
-                    <Link href={`/news/${a.slug}`}>{a.title}</Link>
+                    {a.title}
                   </h3>
-                  <p className="muted" style={{ margin: "0 0 0.5rem", fontSize: "0.85rem" }}>
+                  <p style={{ margin: 0, color: "var(--color-text)" }}>{excerpt(a.shortStory, 200)}</p>
-                    {formatDate(a.createdAt)}
-                  </p>
-                  <p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
                 </div>
-              </article>
+              </Link>
             ))}
           </div>
         )}