dab/avtoambor
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style header nav as pill buttons with clearer active state

Browse Source 
Give nav links a visible translucent pill background and border so they
read as buttons by default, and make the active tab solid white with
the brand red text to clearly indicate the current page.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
David Beccue
2026-05-16 07:27:53 +05:00
parent f65fca09e4
commit 83030bff3a
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/lib/components/Header.svelte
View File

@ -64,32 +64,49 @@
}
.nav {
display: flex;
gap: 1rem;
gap: 0.5rem;
margin-left: 1rem;
flex: 1;
}
.nav a {
color: inherit;
text-decoration: none;
padding: 0.3rem 0.6rem;
border-radius: 4px;
opacity: 0.9;
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
font-weight: 500;
line-height: 1;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.nav a:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.nav a.active {
.nav a:hover {
background: rgba(255,255,255,0.22);
opacity: 1;
border-color: rgba(255,255,255,0.4);
}
.nav a:active { transform: translateY(1px); }
.nav a.active {
background: #fff;
color: #b00d27;
border-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.lang {
background: rgba(255,255,255,0.18);
background: rgba(255,255,255,0.12);
color: inherit;
border: 1px solid rgba(255,255,255,0.45);
padding: 0.35rem 0.85rem;
border-radius: 4px;
padding: 0.4rem 0.9rem;
border-radius: 999px;
font: inherit;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.lang:hover { background: rgba(255,255,255,0.28); }
.lang:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.6);
}
.lang:active { transform: translateY(1px); }
@media (max-width: 640px) {
.header { flex-wrap: wrap; }