Restyle the frontend as an editorial magazine layout

Centred wordmark over a rule of category links, a lead article above a grid of
cards, centred article headers over a narrow reading column, and a footer split
into columns. Neutral warm-grey palette with a serif display face for headings
and small uppercase labels for metadata.

frontend/app/components/ArticleCard.vue

@@ -9,58 +9,77 @@ const cover = computed(() => mediaUrl(props.article.cover))
 
 <template>
   <article class="card">
-    <img
-      v-if="cover"
-      class="cover"
-      :src="cover"
-      :alt="article.cover?.alternativeText ?? ''"
-      :width="article.cover?.width ?? undefined"
-      :height="article.cover?.height ?? undefined"
-      loading="lazy"
-    >
+    <NuxtLink class="cover-link" :to="`/blog/${article.slug}`" tabindex="-1" aria-hidden="true">
+      <img
+        v-if="cover"
+        class="cover"
+        :src="cover"
+        :alt="article.cover?.alternativeText ?? ''"
+        :width="article.cover?.width ?? undefined"
+        :height="article.cover?.height ?? undefined"
+        loading="lazy"
+      >
+      <span v-else class="cover placeholder" />
+    </NuxtLink>
 
-    <p v-if="article.category" class="muted meta">
-      {{ article.category.name }}
-    </p>
+    <p v-if="article.category" class="kicker">{{ article.category.name }}</p>
 
     <h2>
       <NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
     </h2>
 
-    <p class="muted meta">
+    <p class="kicker date">
       <time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
     </p>
   </article>
 </template>
 
 <style scoped>
-.card h2 {
-  margin: 0.35rem 0 0.5rem;
-  font-size: 1.2rem;
-}
-
-.card h2 a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.card h2 a:hover {
-  text-decoration: underline;
-}
-
-.card p {
-  margin: 0 0 0.5rem;
+.cover-link {
+  display: block;
+  overflow: hidden;
 }
 
 .cover {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 4 / 5;
   object-fit: cover;
-  border-radius: var(--radius);
   background: var(--color-surface);
+  transition: transform 0.4s ease;
 }
 
-.meta {
-  font-size: 0.9rem;
+.cover-link:hover .cover {
+  transform: scale(1.03);
+}
+
+.placeholder {
+  display: block;
+}
+
+.kicker {
+  margin-top: 1.1rem;
+}
+
+h2 {
+  margin-top: 0.5rem;
+  font-size: 1.35rem;
+}
+
+h2 a {
+  text-decoration: none;
+  background-image: linear-gradient(var(--color-ink), var(--color-ink));
+  background-size: 0 1px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition: background-size 0.3s ease;
+}
+
+h2 a:hover {
+  background-size: 100% 1px;
+}
+
+.date {
+  margin-top: 0.6rem;
+  font-weight: 400;
 }
 </style>