display active link differently, smol changes to hover styles
vi did:web:vt3e.cat
Sat, 25 Jul 2026 20:23:02 +0100
3 files changed,
49 insertions(+),
2 deletions(-)
M
src/components/Project.astro
→
src/components/Project.astro
@@ -124,11 +124,21 @@ gap: 0.2rem;
border-radius: 5rem; padding: 0.2rem; background-color: hsla(var(--mantle) / 1); + + outline-width: 3px; + &:has(:focus-visible) { + outline-color: hsla(var(--accent) / 1); + } } a { --interior-radii: 1rem; outline: none; + + &:focus-visible { + background-color: hsla(var(--accent) / 1); + color: hsl(var(--on-accent)); + } &:first-child { border-top-left-radius: 2rem;
M
src/css/index.css
→
src/css/index.css
@@ -113,6 +113,8 @@ text-decoration: none;
will-change: transform; background: hsla(var(--surface0) / 1); + outline-width: 3px; + outline-offset: 0px; &::after { content: attr(data-text) / "";@@ -133,6 +135,19 @@ &:active {
background: hsla(var(--surface1) / 0.65); } } + + &.active { + font-weight: 900; + background: hsla(var(--accent) / 0.9); + color: hsl(var(--on-accent)); + &:hover, + &:focus-visible { + background: hsla(var(--accent) / 1); + &:active { + background: hsla(var(--accent) / 0.8); + } + } + } } .left nav {@@ -148,10 +163,18 @@ border-radius: 5rem;
background-color: hsl(var(--base)); + outline-width: 2px; + &:has(:focus-visible) { + background-color: hsla(var(--surface1) / 1); + outline-color: hsl(var(--accent)); + } + a.link { display: inline-flex; align-items: center; justify-content: center; border-radius: 5rem; + outline-offset: 0px; + outline-width: 3px; } }
M
src/layouts/Layout.astro
→
src/layouts/Layout.astro
@@ -1,10 +1,19 @@
--- import "../css/index.css"; +const pathname = Astro.url.pathname; +const isActive = (href: string) => + href === "/" ? pathname === "/" : pathname.startsWith(href); + const navLinks = [ { label: "home", href: "/" }, { label: "glorpify", href: "/glorpify" }, ]; + +const hydratedLinks = navLinks.map((link) => ({ + ...link, + isActive: isActive(link.href), +})); --- <!doctype html>@@ -22,8 +31,13 @@ <div class="viewport">
<aside class="left panel"> <nav> { - navLinks.map((link) => ( - <a class="link" data-text={link.label} href={link.href}> + hydratedLinks.map((link) => ( + <a + class:list={["link", { active: link.isActive }]} + data-text={link.label} + href={link.href} + aria-current={link.isActive ? "page" : undefined} + > {link.label} </a> ))