generated from nhcarrigan/template
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:
@@ -18,6 +18,7 @@ import { ApiService } from '../../services/api.service';
|
|||||||
<header class="header">
|
<header class="header">
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="nav-brand">
|
<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>
|
<h1><a routerLink="/">Naomi's Library</a></h1>
|
||||||
@if (version()) {
|
@if (version()) {
|
||||||
<span class="version">v{{ version() }}</span>
|
<span class="version">v{{ version() }}</span>
|
||||||
@@ -94,6 +95,27 @@ import { ApiService } from '../../services/api.service';
|
|||||||
margin: 0 auto;
|
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 {
|
.nav-brand h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user