feat: themed avatars and branding updates #67

2026-02-20T21:08:11-08:00

hikari commented

2026-02-20 21:08:11 -08:00

Summary

Added comprehensive avatar and branding updates across the library application:

🌸 Updated Main Branding

New library-themed avatar (with playful "shh" gesture) for navigation icon
Updated favicon and all PWA icons (10 sizes from 72x72 to 512x512)
Added hero avatar to home page between title and subtitle
All branding uses consistent circular styling with elegant hover effects

🎨 Media-Specific Avatars

Added unique themed avatars to each media list page:

🎮 Games: Gaming setup with controller and LED lights (red #ff6b6b border)
📚 Books: Reading in cozy library setting (brown #8b6f47 border)
🎵 Music: Joyful with headphones and urban nightscape (blue #74b9ff border)
📺 Shows: Relaxing with remote and theater curtains (pink #e84393 border)
📖 Manga: Reading manga with shelves background (teal #00b894 border)
🎨 Art: Art studio with paintbrush (yellow #fdcb6e border)

✨ Features

120x120px circular avatars with themed colour borders
Smooth hover animations (scale + shadow effects)
Centered hero sections at top of each list view
Consistent styling across all media types
Perfect integration with existing colour themes

📊 Technical Details

All icons generated from source images at multiple resolutions
Static assets served with correct MIME types
Optimised image formats for performance
Responsive design with proper accessibility attributes

Test Plan

Verify navigation icon displays correctly in header
Check favicon appears in browser tabs
Test PWA icons on mobile devices
Confirm home page hero avatar renders properly
Verify all 6 media list avatars display with correct borders
Test hover animations on all avatars
Verify build succeeds
Check static assets serve with correct MIME types

🌸 Created with love by Hikari 💖

## Summary Added comprehensive avatar and branding updates across the library application: ### 🌸 Updated Main Branding - New library-themed avatar (with playful "shh" gesture) for navigation icon - Updated favicon and all PWA icons (10 sizes from 72x72 to 512x512) - Added hero avatar to home page between title and subtitle - All branding uses consistent circular styling with elegant hover effects ### 🎨 Media-Specific Avatars Added unique themed avatars to each media list page: - **🎮 Games**: Gaming setup with controller and LED lights (red #ff6b6b border) - **📚 Books**: Reading in cozy library setting (brown #8b6f47 border) - **🎵 Music**: Joyful with headphones and urban nightscape (blue #74b9ff border) - **📺 Shows**: Relaxing with remote and theater curtains (pink #e84393 border) - **📖 Manga**: Reading manga with shelves background (teal #00b894 border) - **🎨 Art**: Art studio with paintbrush (yellow #fdcb6e border) ### ✨ Features - 120x120px circular avatars with themed colour borders - Smooth hover animations (scale + shadow effects) - Centered hero sections at top of each list view - Consistent styling across all media types - Perfect integration with existing colour themes ### 📊 Technical Details - All icons generated from source images at multiple resolutions - Static assets served with correct MIME types - Optimised image formats for performance - Responsive design with proper accessibility attributes ## Test Plan - [x] Verify navigation icon displays correctly in header - [x] Check favicon appears in browser tabs - [x] Test PWA icons on mobile devices - [x] Confirm home page hero avatar renders properly - [x] Verify all 6 media list avatars display with correct borders - [x] Test hover animations on all avatars - [x] Verify build succeeds - [x] Check static assets serve with correct MIME types 🌸 Created with love by Hikari 💖

hikari added 2 commits 2026-02-20 21:08:11 -08:00

feat: update branding with new library avatar 3a2e544638

Updated all branding assets to use Naomi's library avatar (with the playful "shh" gesture):
- Navigation icon in header
- Favicon for browser tabs
- All PWA icon sizes (72x72 through 512x512, including maskable icons)
- Hero avatar on home page between title and subtitle

The avatar features consistent styling across all uses:
- Circular display with elegant borders
- Hover animations for interactive elements
- Shadows for visual depth
- Perfectly integrated with the witch-purple theme

All icons generated from the source image at multiple resolutions for optimal display on all devices and contexts.

feat: add themed avatars to all media list views

Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m31s

Details

Node.js CI / CI (pull_request) Successful in 1m35s

Details

9023a8f200

Added custom avatars for each media type, appearing at the top of their respective list pages:
- Games: Gaming setup with controller and LED lights (red border)
- Books: Reading in the library with warm tones (brown border)
- Music: Joyful with headphones and urban nightscape (blue border)
- Shows: Relaxing on couch with remote and theater curtains (pink border)
- Manga: Reading manga surrounded by manga shelves (teal border)
- Art: Art studio with paintbrush and golden tones (yellow border)

Each avatar is:
- 120x120px circular display
- Themed border colour matching the media type
- Smooth hover animation with scale and shadow effects
- Positioned in a centered hero section above the header

All avatars showcase Naomi's personality and interests whilst maintaining consistent styling across the application.

naomi merged commit ff0ae73fa7 into main

2026-02-20 21:11:13 -08:00

naomi deleted branch feat/avatars

2026-02-20 21:11:14 -08:00

naomi referenced this issue from a commit

2026-02-20 21:11:15 -08:00

feat: themed avatars and branding updates (#67)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: nhcarrigan/library#67