mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 07:36:50 +03:00
Paul Bakaus
0d22c28733
The previous attempt put the active-state border at margin-left: -14px so it would sit in the layout gutter while keeping the link text aligned with the header logo. Problem: .skills-sidebar uses overflow-y: auto, and per CSS spec that coerces overflow-x from visible to auto too, which clips any content outside the column. The border was being painted and then clipped, so the user saw nothing. Rework: - Border now sits inside the normal flow. padding: 4px 0 4px 12px with a 2px border-left means link text is 14px inset from the column edge. Group titles pick up the same 14px padding-left so the two align vertically. - Add a subtle accent-dim background on the active item (not just the border) so the cell reads as highlighted, not just marked. - Add a hover background tint so items feel interactive. - Remove the duplicate .skills-sidebar-list a[aria-current] block that was left over from the previous rewrite. Trade-off: links are now 14px to the right of where the header logo sits (before, they aligned). Worth it: the active state is now clearly visible on both desktop and mobile.