Session-close cosmetics:
1. Favicon — an 'S' monogram (indigo→violet rounded square, path-drawn so it's font-independent)
at public/favicon.svg, linked in index.html (tab had none before).
2. Dynamic document.title — reflects the current module ('Downloads · Siftlode'); Feed = brand
only; an open channel page shows the channel name. Shared pageTitleKey() in lib/pageMeta.ts
keeps the tab title and the top-bar header in lockstep.
3. The 'Siftlode' logo already navigated to Feed but read as static text — added a hover
background + cursor affordance so it's clearly clickable.
4. Module header — new shared PageTitle component (used by every non-feed module via Header) with
a tracked small-caps 'eyebrow' + leading accent dot (user-picked style B), styled in one place.
Verified in a real browser: favicon served (image/svg+xml), title updates per module, logo→feed,
header restyled; no console errors.
11 lines
530 B
TypeScript
11 lines
530 B
TypeScript
// The centered module title in the top bar. Every non-feed module renders through this one
|
|
// component, so its styling lives in a single place. Design element (user-picked): a tracked
|
|
// small-caps "eyebrow" with a leading accent dot.
|
|
export default function PageTitle({ label }: { label: string }) {
|
|
return (
|
|
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-fg">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|