CategoryNav.astro (2089B)
1 --- 2 import { CATEGORIES } from '../lib/taxonomy'; 3 import { url } from '../lib/url'; 4 interface Props { active?: string } 5 const { active } = Astro.props; 6 --- 7 <!-- Twelve chips over a 1px ink ground, so the row reads as one ruled 8 strip rather than as twelve floating pills — the same construction as 9 the domain grid on the home page. Styling lives in global.css 10 (`.cat-nav` / `.cat-chip`) because the sheet pages use it too. --> 11 <nav class="cat-nav" aria-label="Categories"> 12 {CATEGORIES.map((c) => ( 13 <a 14 href={url(c.slug)} 15 class="cat-chip corners" 16 style={`--acc: var(--${c.accent});`} 17 aria-current={active === c.slug ? 'page' : undefined} 18 > 19 <span class="cat-chip__tag">{c.tag}</span>{c.title} 20 </a> 21 ))} 22 </nav> 23 24 <style> 25 /* ---- Cyberdeck chrome for the chips ------------------------------------ 26 Each chip carries `.corners`, but twelve always-on bracket sets read as 27 clutter (the same call the record rows made), so the ticks stay clipped 28 until the chip is under the pointer — or always on for the current page, 29 where the bracket is the active marker's frame. Each chip's brackets 30 take its own domain accent via `--bracket`. */ 31 .cat-chip { 32 --bracket: var(--acc); 33 font-family: var(--font-term, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace); 34 } 35 .cat-chip::before, 36 .cat-chip::after { 37 opacity: 0; 38 transition: opacity 180ms ease; 39 } 40 .cat-chip:hover::before, 41 .cat-chip:hover::after, 42 .cat-chip[aria-current='page']::before, 43 .cat-chip[aria-current='page']::after { 44 opacity: 1; 45 } 46 /* The active chip is filled with its accent, so its own accent would 47 vanish as a bracket colour — the frame flips to the page ground. */ 48 .cat-chip[aria-current='page'] { --bracket: var(--base); } 49 /* Hover sharpens the tag's hairline underlay: the tag keeps its accent 50 and picks up the stronger rule weight the rest of the site uses for 51 active edges. */ 52 .cat-chip:hover .cat-chip__tag { text-decoration: underline; text-underline-offset: 3px; } 53 </style>