Landing page: fix preview diversity for news/video, proper markets grid, natural icons for filled assets

[Copilot]

The landing page previews for news and video showed multiple items from the same category/channel. The markets preview used inline-block items with no grid container. Four icons with filled/coloured artwork were being crushed to solid black by filter: brightness(0).

Changes

News & video preview deduplication

• News: replaced slice(0,5) with a category-keyed loop — at most 1 post per category, up to 5 total
• Video: replaced slice(0,4) with a channel-keyed loop — at most 1 video per channel, up to 4 total

// News — before
var posts = (d.feed||[]).slice(0,5);

// News — after
var seen={};var posts=[];var all=d.feed||[];
for(var i=0;i<all.length&&posts.length<5;i++){
  var cat=all[i].category||'_';
  if(!seen[cat]){seen[cat]=true;posts.push(all[i]);}
}

Markets preview grid

• Container changed from a plain <div> (where gap is a no-op) to display:grid; grid-template-columns:repeat(3,1fr); gap:8px
• Home-page card CSS (.market-grid) updated to match: 3-column grid with gap:6px, items styled as uniform mini-cards

Icon rendering

• Removed filter: brightness(0) from places, weather, markets, and reminder — these are filled/coloured assets where the filter produces solid black blobs
• Outline-style icons (blog, chat, mail, news, video) retain the filter unchanged

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.