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/layouts/default.vue

@@ -12,17 +12,21 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
     <a class="skip-link" href="#main">Skip to content</a>
 
     <header class="site-header">
-      <div class="container header-inner">
-        <NuxtLink to="/" class="brand">{{ SITE_NAME }}</NuxtLink>
-        <nav aria-label="Main navigation">
-          <ul>
-            <li><NuxtLink to="/blog">Articles</NuxtLink></li>
-            <li v-for="category in categories" :key="category.slug">
-              <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
-            </li>
-          </ul>
-        </nav>
+      <div class="container">
+        <p class="wordmark">
+          <NuxtLink to="/">{{ SITE_NAME }}</NuxtLink>
+        </p>
+        <p class="tagline kicker">{{ SITE_DESCRIPTION }}</p>
       </div>
+
+      <nav class="site-nav" aria-label="Main navigation">
+        <ul class="container">
+          <li><NuxtLink to="/blog">All articles</NuxtLink></li>
+          <li v-for="category in categories" :key="category.slug">
+            <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
+          </li>
+        </ul>
+      </nav>
     </header>
 
     <main id="main" class="container site-main">
@@ -30,9 +34,34 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
     </main>
 
     <footer class="site-footer">
-      <div class="container">
-        <p class="muted">&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}</p>
+      <div class="container footer-inner">
+        <div class="footer-block">
+          <p class="wordmark small">{{ SITE_NAME }}</p>
+          <p class="muted">{{ SITE_DESCRIPTION }}</p>
+        </div>
+
+        <nav class="footer-block" aria-label="Categories">
+          <p class="kicker">Categories</p>
+          <ul>
+            <li v-for="category in categories" :key="category.slug">
+              <NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
+            </li>
+            <li v-if="!categories.length" class="muted">Nothing published yet</li>
+          </ul>
+        </nav>
+
+        <nav class="footer-block" aria-label="Sections">
+          <p class="kicker">Browse</p>
+          <ul>
+            <li><NuxtLink to="/">Home</NuxtLink></li>
+            <li><NuxtLink to="/blog">All articles</NuxtLink></li>
+          </ul>
+        </nav>
       </div>
+
+      <p class="container copyright kicker">
+        &copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. All rights reserved.
+      </p>
     </footer>
   </div>
 </template>
@@ -44,51 +73,111 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
   min-height: 100vh;
 }
 
+/* Header: centred wordmark over a thin rule of links. */
 .site-header {
+  padding-top: 2.5rem;
+  text-align: center;
   border-bottom: 1px solid var(--color-border);
 }
 
-.header-inner {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem 2rem;
-  padding-block: 1rem;
+.wordmark {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 5vw, 2.75rem);
+  letter-spacing: 0.02em;
+  color: var(--color-ink);
 }
 
-.brand {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: inherit;
+.wordmark a {
   text-decoration: none;
 }
 
-nav ul {
+.tagline {
+  margin-top: 0.6rem;
+}
+
+.site-nav {
+  margin-top: 2rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.site-nav ul {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
-  padding: 0;
+  gap: 0.25rem 2rem;
+  justify-content: center;
+  padding-block: 0.9rem;
   margin: 0;
   list-style: none;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
 
-nav a {
-  color: inherit;
+.site-nav a {
   text-decoration: none;
+  color: var(--color-body);
+  padding-block: 0.25rem;
+  border-bottom: 1px solid transparent;
 }
 
-nav a:hover,
-nav a.router-link-active {
-  text-decoration: underline;
+.site-nav a:hover,
+.site-nav a.router-link-active {
+  color: var(--color-ink);
+  border-bottom-color: var(--color-ink);
 }
 
 .site-main {
   flex: 1;
-  padding-block: 2.5rem 4rem;
+  padding-block: 3.5rem 5rem;
 }
 
+/* Footer: columns, then a centred copyright line. */
 .site-footer {
-  padding-block: 1.5rem;
+  padding-block: 3.5rem 2rem;
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+}
+
+.footer-inner {
+  display: grid;
+  gap: 2.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  padding-bottom: 2.5rem;
+}
+
+.footer-block p:last-of-type {
+  margin-bottom: 0;
+}
+
+.wordmark.small {
+  font-size: 1.4rem;
+}
+
+.footer-block ul {
+  padding: 0;
+  margin: 0.9rem 0 0;
+  list-style: none;
+  font-size: 0.95rem;
+}
+
+.footer-block li + li {
+  margin-top: 0.35rem;
+}
+
+.footer-block a {
+  text-decoration: none;
+}
+
+.footer-block a:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.copyright {
+  padding-top: 1.75rem;
+  text-align: center;
   border-top: 1px solid var(--color-border);
 }
 </style>