article meta: inline icons (tag/author/date/read-time) in the existing .ico stroke family
This commit is contained in:
@@ -32,7 +32,12 @@ const readMin = Math.max(1, Math.round((post.body ?? '').split(/\s+/).length / 2
|
|||||||
<h1>{post.data.title}</h1>
|
<h1>{post.data.title}</h1>
|
||||||
<p class="standfirst">{post.data.description}</p>
|
<p class="standfirst">{post.data.description}</p>
|
||||||
{/* Meta — one quiet muted line: category · author · date · reading time */}
|
{/* Meta — one quiet muted line: category · author · date · reading time */}
|
||||||
<div class="meta"><span class="cat">{post.data.category}</span>·<span>{post.data.author}</span>·<time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time>·<span>{readMin} min read</span></div>
|
<div class="meta">
|
||||||
|
<span class="cat"><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 13.2 13.2 20a2 2 0 0 1-2.9 0L4 13.7V4h9.7l6.3 6.3a2 2 0 0 1 0 2.9Z" stroke-linejoin="round" /><circle cx="8.5" cy="8.5" r="1" /></svg>{post.data.category}</span>·
|
||||||
|
<span><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" /><path d="M4.5 20c1.6-3.8 4.6-5.5 7.5-5.5s5.9 1.7 7.5 5.5" /></svg>{post.data.author}</span>·
|
||||||
|
<time datetime={post.data.date.toISOString().slice(0, 10)}><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2" /><path d="M4 10h16M8 3v4M16 3v4" /></svg>{fmt(post.data.date)}</time>·
|
||||||
|
<span><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>{readMin} min read</span>
|
||||||
|
</div>
|
||||||
{post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
|
{post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
|
||||||
{/* TOC sits between lead image and body (Wikipedia/GOV.UK contents
|
{/* TOC sits between lead image and body (Wikipedia/GOV.UK contents
|
||||||
position): the press head above stays unbroken, and the list is
|
position): the press head above stays unbroken, and the list is
|
||||||
|
|||||||
@@ -505,6 +505,9 @@ span.page-step { color: var(--muted); } /* disabled end stop — non-interactive
|
|||||||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
|
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
|
||||||
color: var(--muted); font-size: var(--fs-s); margin-bottom: var(--space-l);
|
color: var(--muted); font-size: var(--fs-s); margin-bottom: var(--space-l);
|
||||||
}
|
}
|
||||||
|
/* Icon-prefixed meta items (tag / author / date / read time) */
|
||||||
|
.article .meta > :is(span, time) { display: inline-flex; align-items: center; gap: 5px; }
|
||||||
|
.article .meta .ico { width: 15px; height: 15px; stroke-width: 1.8; }
|
||||||
/* Lead image — borderless, breaking slightly out of the text column on wide
|
/* Lead image — borderless, breaking slightly out of the text column on wide
|
||||||
screens (editorial breakout; the column stays 70ch for reading) */
|
screens (editorial breakout; the column stays 70ch for reading) */
|
||||||
.article .cover { border-radius: var(--radius); margin-bottom: var(--space-l); }
|
.article .cover { border-radius: var(--radius); margin-bottom: var(--space-l); }
|
||||||
|
|||||||
Reference in New Issue
Block a user