gabriel / musehub public
main #57 / 70

design: modernize UI — Inter font, Lucide icons, remove all emoji

- Add Inter variable font via Google Fonts in base.html; update --font-sans token to use Inter as the primary typeface. - Add Lucide icon library (CDN) to base.html; call createIcons() on DOMContentLoaded so all <i data-lucide="..."> elements render as crisp SVG icons. - navbar.html: replace 🎵 emoji logo with inline SVG music note + wordmark; replace 🔍 search button emoji with inline SVG search icon; replace 🔔 bell emoji with inline SVG bell; clean up inline nav badge styles (moved to _layout.scss). - repo_tabs.html: replace all emoji tab prefixes (🌿 branches, 🏷 tags, 🎯 groove check, 🔍 search, 🎪 arrange, 🕰 activity) with matching inline SVG icons for every tab. - repo_grid.html: replace ⭐ and 💾 emoji with inline SVG star and commit icons; new .repo-card-grid / .repo-card-footer / .repo-card-stat structure; improve owner/slug display with muted separator. - empty_state.html macro: accept icon= Lucide icon name instead of an emoji string; render .empty-icon container with SVG icon. - explore.html: strip redundant inline <style> block (rules moved to _components.scss); use design-token variables throughout sidebar. - _tokens.scss: update --font-sans; add #htmx-loading CSS. - _components.scss: rewrite .btn variants with per-variant hover states; add .repo-card-grid, .repo-card, .repo-card-*, .repo-meta-pill, .tag-pill, .repo-card-footer, .repo-card-stat; modernize .empty-state with icon container box. - _layout.scss: modernize .navbar-logo (flex + SVG icon); refactor search form to inline-icon pattern; replace nav bell styles with .navbar-icon-btn; add svg opacity transitions on .repo-tab. - Rebuild app.css (sass --style=compressed).

G Gabriel Cardona <gabriel@tellurstori.com> · 6d ago Mar 17, 2026 · dddbbd11 · parent 09c603e3
11
files changed
372
files in snapshot

0 comments

No comments yet. Be the first to start the discussion.