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

style(nav): active link is colour + weight only — drop bullet, italic, case swap

Browse source 
.nav-link.active was carrying four overlapping cues from earlier passes:
terracotta colour, serif italic, sentence case, leading '·' bullet, and
a 15px size bump. The spec's 'option 4' is colour-only. Strip the rest:

  .nav-link.active {
    color: var(--pigment-terracotta);
    font-weight: 500;
  }

That's it. Same sans uppercase as inactive links, just terracotta with
a touch more weight. The bullet ::before is gone; nothing floats below
the link.

Sign out (.logout-btn) is already --on-surface-muted with --on-surface
on hover from a prior pass — exactly the muted treatment the new spec
asks for, so no change needed. The 'Sign out is currently terracotta'
line in the spec didn't match the codebase; flagged in the audit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 14:53:11 +02:00
parent 3917070dab
commit 73dc656257
2 changed files with 5 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.claude/settings.local.json
View file

@ -46,7 +46,8 @@
"Bash(curl -s -c /tmp/jar.txt -d \"email=lars@virk2.dk&password=cab123\" http://localhost:4321/login -o /dev/null -i)",
"Bash(curl -s -c /tmp/jar.txt -d \"email=lars@virk2.dk&password=cab123\" http://localhost:4321/login -o /dev/null)",
"Bash(curl -s -b /tmp/jar.txt http://localhost:4321/roadmap)",
"Bash(grep -nE \"\\\\.rr-fade-left, \\\\.rr-fade-right|rr-fade-left \\\\{|rr-fade-right \\\\{\" src/components/RoadmapRoute.astro)"
"Bash(grep -nE \"\\\\.rr-fade-left, \\\\.rr-fade-right|rr-fade-left \\\\{|rr-fade-right \\\\{\" src/components/RoadmapRoute.astro)",
"Bash(awk -F: '{print $1}')"
]
}
}

19
src/layouts/AppLayout.astro
View file

@ -200,24 +200,11 @@ const year = new Date().getFullYear();
color: var(--on-surface);
border-bottom: none;
}
/* Active nav link: terracotta color + a serif italic "·" bracket. The
prefix dot acts as a 'you are here' marker without floating below
the link the way the previous indicator did. Switching from sans
uppercase to terracotta serif italic also doubles as a typography
cue, so the active state reads even before colour processes. */
/* Active nav link: terracotta + slightly heavier weight. Colour alone
is the indicator — no badge, bullet, italic, or family swap. */
.nav-link.active {
color: var(--pigment-terracotta);
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: var(--tracking-snug);
text-transform: none;
font-size: 15px;
}
.nav-link.active::before {
content: '·';
margin-right: 6px;
color: var(--pigment-terracotta);
font-weight: 500;
}
/* ── User zone ──────────────────────────────────────────────────── */