feat: add brand icon to navbar for visual elegance

Enhanced the navigation bar by adding Naomi's beautiful portrait icon next to the library title.

Visual Enhancements:
- Added 40x40px circular icon in nav-brand section
- Icon features purple border matching app theme
- Subtle purple shadow for depth and cohesion
- Smooth hover animation (scale + enhanced shadow)

Styling Details:
- Border: 2px solid witch-purple (#9d4edd)
- Box shadow: Purple glow matching theme
- Hover effect: 5% scale increase with stronger shadow
- Transition: Smooth 0.2s animation
- Border radius: 50% (perfect circle)
- Object-fit: cover (maintains aspect ratio)

Layout:
- Flexbox layout for nav-brand alignment
- 0.75rem gap between icon and title
- Icon, title, and version badge all properly aligned

The navbar now has a personal, elegant touch with Naomi's portrait greeting users at the top of every page! The circular presentation with the purple border perfectly complements the witchy aesthetic while adding warmth and personality to the interface.

 This enhancement was created by Hikari~ 🌸
This commit is contained in:
2026-02-20 00:54:09 -08:00
committed by Naomi Carrigan
parent 86b9090628
commit eebe20026c
@@ -18,6 +18,7 @@ import { ApiService } from '../../services/api.service';
<header class="header">
<nav class="navbar">
<div class="nav-brand">
<img src="/assets/icons/icon-72x72.png" alt="Naomi's Library" class="brand-icon" />
<h1><a routerLink="/">Naomi's Library</a></h1>
@if (version()) {
<span class="version">v{{ version() }}</span>
@@ -94,6 +95,27 @@ import { ApiService } from '../../services/api.service';
margin: 0 auto;
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.brand-icon {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--witch-purple);
box-shadow: 0 2px 8px rgba(157, 78, 221, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
}
.brand-icon:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(157, 78, 221, 0.5);
}
.nav-brand h1 {
margin: 0;
font-size: 1.5rem;