ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

article meta: inline icons (tag/author/date/read-time) in the existing .ico stroke family

Browse Source
This commit is contained in:
ctao
2026-07-28 20:06:49 +02:00
parent 93712a1481
commit f6340a89b3
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/news/[slug].astro
+6 -1
View File
@@ -32,7 +32,12 @@ const readMin = Math.max(1, Math.round((post.body ?? '').split(/\s+/).length / 2
<h1>{post.data.title}</h1>
<p class="standfirst">{post.data.description}</p>
{/* 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="" />}
{/* TOC sits between lead image and body (Wikipedia/GOV.UK contents
position): the press head above stays unbroken, and the list is
src/styles/global.css
+3
View File
@@ -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;
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
screens (editorial breakout; the column stays 70ch for reading) */
.article .cover { border-radius: var(--radius); margin-bottom: var(--space-l); }