joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(nav): active-link dot + 0.5px vertical divider before user name

Browse source 
- Active link no longer carries a background fill or pill. Instead, a
  4px terracotta dot is centred 22px below the link via ::after. Quieter,
  more confident, and survives the cream/white surface change without
  needing a hover-area redesign.
- Vertical divider before the user's name shifts from the existing ghost-
  border colour to a solid rgba(0,0,0,0.15) line, 18px tall with 18px
  padding either side (replacing the prior --space-2 / 8px). Still a
  scaled-1px element rather than a pipe character.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 10:47:10 +02:00
parent 9ae8422527
commit a4df2b4982
1 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/layouts/AppLayout.astro
View file

@ -165,14 +165,15 @@ const year = new Date().getFullYear();
display: inline-block; display: inline-block;
width: 1px; width: 1px;
height: 18px; height: 18px;
background: var(--ghost-border-color); background: rgba(0, 0, 0, 0.15);
margin: 0 var(--space-2); margin: 0 18px;
transform: scaleX(0.5); transform: scaleX(0.5);
transform-origin: center; transform-origin: center;
} }
.nav-logout-form { display: inline-flex; } .nav-logout-form { display: inline-flex; }
.nav-link { .nav-link {
position: relative;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: var(--text-label-md); font-size: var(--text-label-md);
font-weight: 500; font-weight: 500;
@ -183,17 +184,26 @@ const year = new Date().getFullYear();
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border-bottom: none; border-bottom: none;
transition: color var(--duration-fast) var(--ease-standard), transition: color var(--duration-fast) var(--ease-standard);
background var(--duration-fast) var(--ease-standard);
} }
.nav-link:hover { .nav-link:hover {
color: var(--on-surface); color: var(--on-surface);
background: var(--surface-container-low);
border-bottom: none; border-bottom: none;
} }
.nav-link.active { .nav-link.active {
color: var(--on-surface); color: var(--on-surface);
background: var(--surface-container); }
/* 4px terracotta dot under the active link, 22px below its baseline. */
.nav-link.active::after {
content: '';
position: absolute;
left: 50%;
bottom: -22px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--pigment-terracotta);
transform: translateX(-50%);
} }
/* ── User zone ──────────────────────────────────────────────────── */ /* ── User zone ──────────────────────────────────────────────────── */