jason/breedr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update App.css — navbar active state uses brand gradient, settings icon alignment

Browse Source
This commit is contained in:
jason
2026-03-09 22:16:39 -05:00
parent 3e777772c3
commit 0573e154b1
1 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/App.css
View File

@@ -27,16 +27,16 @@
gap: 0.75rem; gap: 0.75rem;
color: var(--text-primary); color: var(--text-primary);
font-weight: 700; font-weight: 700;
font-size: 2.25rem; /* +30% from 1.5rem */ font-size: 2.25rem;
text-decoration: none; text-decoration: none;
transition: var(--transition); transition: var(--transition);
} }
.nav-brand:hover { .nav-brand:hover {
color: var(--primary-light); opacity: 0.9;
} }
/* Square logo: doubled from 2.5rem to 5rem */ /* Square logo */
.brand-logo { .brand-logo {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
@@ -45,7 +45,6 @@
display: block; display: block;
border-radius: 4px; border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
/* Subtle diffuse black drop shadow for depth */
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30)); drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
} }
@@ -58,7 +57,7 @@
height: 5rem; height: 5rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); box-shadow: 0 4px 12px rgba(194, 134, 42, 0.3);
} }
/* Title gradient: medium-dark gold → rusty dark red-gold */ /* Title gradient: medium-dark gold → rusty dark red-gold */
@@ -68,7 +67,6 @@
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
/* text-shadow doesn't work with background-clip:text — use filter instead */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.50)) filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.50))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30)); drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
} }
@@ -76,6 +74,7 @@
.nav-links { .nav-links {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
align-items: center;
} }
.nav-link { .nav-link {
@@ -99,9 +98,22 @@
} }
.nav-link.active { .nav-link.active {
background: var(--primary); background: linear-gradient(135deg, rgba(201,148,10,0.2) 0%, rgba(139,37,0,0.2) 100%);
color: white; color: var(--primary-light);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); border-color: rgba(194, 134, 42, 0.4);
box-shadow: 0 2px 8px rgba(194, 134, 42, 0.15);
}
/* Settings link — slightly different treatment, sits at end */
.nav-link-settings {
margin-left: 0.5rem;
padding: 0.5rem;
border-radius: var(--radius-sm);
color: var(--text-muted);
}
.nav-link-settings:hover {
color: var(--primary-light);
} }
.main-content { .main-content {
@@ -114,10 +126,9 @@
} }
.nav-brand { .nav-brand {
font-size: 1.625rem; /* +30% from 1.25rem */ font-size: 1.625rem;
} }
/* Scale square logo down on mobile (doubled from 2rem) */
.brand-logo { .brand-logo {
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;