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.
This commit is contained in:
@@ -1,13 +1,20 @@
|
||||
:root {
|
||||
--color-text: #16181d;
|
||||
--color-muted: #5b6270;
|
||||
--color-bg: #ffffff;
|
||||
--color-surface: #f5f6f8;
|
||||
--color-border: #e2e5ea;
|
||||
--color-accent: #2f4bd8;
|
||||
--radius: 10px;
|
||||
--width: 68rem;
|
||||
--space: 1.25rem;
|
||||
/* Neutral editorial palette: warm off-white paper, near-black ink. */
|
||||
--color-ink: #14130f;
|
||||
--color-body: #3d3a34;
|
||||
--color-muted: #857f74;
|
||||
--color-bg: #fbfaf7;
|
||||
--color-surface: #f1efe9;
|
||||
--color-border: #e0ddd4;
|
||||
--color-rule: #14130f;
|
||||
|
||||
--font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
|
||||
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
--width: 76rem;
|
||||
--width-prose: 40rem;
|
||||
--space: 1.5rem;
|
||||
--radius: 2px;
|
||||
}
|
||||
|
||||
*,
|
||||
@@ -18,32 +25,38 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
color: var(--color-body);
|
||||
background: var(--color-bg);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.65;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
outline: 2px solid var(--color-ink);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -64,52 +77,129 @@ h3 {
|
||||
z-index: 10;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--color-ink);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
/* Small uppercase label used for categories, dates and section headings. */
|
||||
.kicker {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
margin-block: 4rem 2rem;
|
||||
}
|
||||
|
||||
.section-heading::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
/* Centred title block at the top of a listing page. */
|
||||
.page-header {
|
||||
margin-bottom: 3.5rem;
|
||||
padding-bottom: 2rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
}
|
||||
|
||||
.page-header .kicker {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
gap: 1.75rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
|
||||
gap: 3rem 2.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Article body */
|
||||
.prose {
|
||||
max-width: 44rem;
|
||||
max-width: var(--width-prose);
|
||||
font-size: 1.075rem;
|
||||
}
|
||||
|
||||
.prose h2,
|
||||
.prose h3 {
|
||||
margin-block: 2.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.prose p,
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
margin-block: 0 1.4rem;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.prose blockquote {
|
||||
margin: 2.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
border-left: 2px solid var(--color-ink);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.45;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.prose img {
|
||||
border-radius: var(--radius);
|
||||
margin-block: 2rem;
|
||||
}
|
||||
|
||||
.prose pre {
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
.prose code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0;
|
||||
margin: 2rem 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tag-list a {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
background: var(--color-surface);
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 4rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">© {{ 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">
|
||||
© {{ 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>
|
||||
|
||||
@@ -48,19 +48,25 @@ useHead({
|
||||
|
||||
<template>
|
||||
<article v-if="article">
|
||||
<nav class="breadcrumb muted" aria-label="Breadcrumb">
|
||||
<NuxtLink to="/blog">Articles</NuxtLink>
|
||||
<template v-if="article.category">
|
||||
<span aria-hidden="true"> / </span>
|
||||
<NuxtLink :to="`/category/${article.category.slug}`">{{ article.category.name }}</NuxtLink>
|
||||
</template>
|
||||
</nav>
|
||||
<header class="article-header">
|
||||
<nav class="kicker" aria-label="Breadcrumb">
|
||||
<NuxtLink to="/blog">Articles</NuxtLink>
|
||||
<template v-if="article.category">
|
||||
<span aria-hidden="true"> / </span>
|
||||
<NuxtLink :to="`/category/${article.category.slug}`">
|
||||
{{ article.category.name }}
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<h1>{{ article.title }}</h1>
|
||||
<h1>{{ article.title }}</h1>
|
||||
|
||||
<p class="muted meta">
|
||||
<time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
|
||||
</p>
|
||||
<p class="kicker date">
|
||||
<time :datetime="isoDate(article.publishedAt)">
|
||||
{{ formatDate(article.publishedAt) }}
|
||||
</time>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<img
|
||||
v-if="cover"
|
||||
@@ -73,30 +79,66 @@ useHead({
|
||||
|
||||
<!-- eslint-disable-next-line vue/no-v-html -- rendered server-side from editor Markdown -->
|
||||
<div class="prose" v-html="article.html" />
|
||||
|
||||
<p class="back">
|
||||
<NuxtLink to="/blog">Back to all articles</NuxtLink>
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
article {
|
||||
max-width: 44rem;
|
||||
.article-header {
|
||||
max-width: 46rem;
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 0.9rem;
|
||||
.article-header nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.article-header nav a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.5rem 0 0.25rem;
|
||||
font-size: clamp(1.8rem, 4vw, 2.6rem);
|
||||
margin: 1rem 0 0;
|
||||
font-size: clamp(2rem, 5vw, 3.2rem);
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-top: 0;
|
||||
.date {
|
||||
margin-top: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.prose {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.back {
|
||||
max-width: var(--width-prose);
|
||||
margin: 4rem auto 0;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.back a {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--color-ink);
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
margin-block: 1.5rem;
|
||||
border-radius: var(--radius);
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
margin-block: 3rem;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,7 +27,10 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>Articles</h1>
|
||||
<header class="page-header">
|
||||
<p class="kicker">The archive</p>
|
||||
<h1>Articles</h1>
|
||||
</header>
|
||||
|
||||
<p v-if="error">Articles could not be loaded. Please try again later.</p>
|
||||
|
||||
@@ -59,12 +62,3 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -35,11 +35,10 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="breadcrumb muted">
|
||||
<NuxtLink to="/blog">Articles</NuxtLink>
|
||||
</p>
|
||||
|
||||
<h1>{{ category?.name }}</h1>
|
||||
<header class="page-header">
|
||||
<p class="kicker">Category</p>
|
||||
<h1>{{ category?.name }}</h1>
|
||||
</header>
|
||||
|
||||
<p v-if="error">Articles could not be loaded. Please try again later.</p>
|
||||
|
||||
@@ -69,16 +68,3 @@ useHead({ link: [{ rel: 'canonical', href: canonical }] })
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.breadcrumb {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
+127
-23
@@ -6,7 +6,12 @@ const { data, error } = await useFetch<Paginated<ArticleSummary>>('/api/articles
|
||||
query: { page: 1 },
|
||||
})
|
||||
|
||||
const articles = computed(() => data.value?.items.slice(0, 6) ?? [])
|
||||
/** The newest article leads the page; the next six fill the grid below it. */
|
||||
const featured = computed(() => data.value?.items[0] ?? null)
|
||||
const rest = computed(() => data.value?.items.slice(1, 7) ?? [])
|
||||
|
||||
const mediaUrl = useMediaUrl()
|
||||
const featuredCover = computed(() => mediaUrl(featured.value?.cover))
|
||||
|
||||
const { public: config } = useRuntimeConfig()
|
||||
|
||||
@@ -25,40 +30,139 @@ useSeoMeta({
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<section class="hero">
|
||||
<h1>{{ SITE_NAME }}</h1>
|
||||
<p class="muted">{{ SITE_DESCRIPTION }}</p>
|
||||
</section>
|
||||
|
||||
<h2>Latest articles</h2>
|
||||
|
||||
<p v-if="error">Articles could not be loaded. Please try again later.</p>
|
||||
|
||||
<p v-else-if="!articles.length">Nothing has been published yet.</p>
|
||||
<p v-else-if="!featured">Nothing has been published yet.</p>
|
||||
|
||||
<ul v-else class="card-grid">
|
||||
<li v-for="article in articles" :key="article.slug">
|
||||
<ArticleCard :article="article" />
|
||||
</li>
|
||||
</ul>
|
||||
<template v-else>
|
||||
<article class="featured">
|
||||
<NuxtLink class="featured-cover" :to="`/blog/${featured.slug}`" tabindex="-1" aria-hidden="true">
|
||||
<img
|
||||
v-if="featuredCover"
|
||||
:src="featuredCover"
|
||||
:alt="featured.cover?.alternativeText ?? ''"
|
||||
:width="featured.cover?.width ?? undefined"
|
||||
:height="featured.cover?.height ?? undefined"
|
||||
>
|
||||
<span v-else class="placeholder" />
|
||||
</NuxtLink>
|
||||
|
||||
<p class="more">
|
||||
<NuxtLink to="/blog">See all articles</NuxtLink>
|
||||
</p>
|
||||
<div class="featured-text">
|
||||
<p class="kicker">
|
||||
{{ featured.category ? featured.category.name : 'Latest' }}
|
||||
</p>
|
||||
<h1>
|
||||
<NuxtLink :to="`/blog/${featured.slug}`">{{ featured.title }}</NuxtLink>
|
||||
</h1>
|
||||
<p class="kicker date">
|
||||
<time :datetime="isoDate(featured.publishedAt)">
|
||||
{{ formatDate(featured.publishedAt) }}
|
||||
</time>
|
||||
</p>
|
||||
<p class="read-more">
|
||||
<NuxtLink :to="`/blog/${featured.slug}`">Read the article</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<template v-if="rest.length">
|
||||
<h2 class="section-heading kicker">More stories</h2>
|
||||
|
||||
<ul class="card-grid">
|
||||
<li v-for="article in rest" :key="article.slug">
|
||||
<ArticleCard :article="article" />
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<p class="more">
|
||||
<NuxtLink to="/blog">View all articles</NuxtLink>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
margin-bottom: 3rem;
|
||||
.featured {
|
||||
display: grid;
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
@media (min-width: 52rem) {
|
||||
.featured {
|
||||
grid-template-columns: 1.35fr 1fr;
|
||||
gap: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-cover {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured-cover img,
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.featured h1 {
|
||||
margin-top: 0.6rem;
|
||||
font-size: clamp(2rem, 4.5vw, 3.1rem);
|
||||
}
|
||||
|
||||
.featured h1 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.featured h1 a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.12em;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-top: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
margin-top: 1.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.read-more a {
|
||||
padding-bottom: 0.35rem;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--color-ink);
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 2.5rem;
|
||||
margin-top: 4rem;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.more a {
|
||||
padding: 0.85rem 2.5rem;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--color-ink);
|
||||
color: var(--color-ink);
|
||||
display: inline-block;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.more a:hover {
|
||||
background: var(--color-ink);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user