skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 16:46:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make the active sidebar state actually visible on desktop

Browse Source 
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.
This commit is contained in:
Paul Bakaus
2026-04-08 11:53:43 -07:00
parent 6e12f215c8
commit 0d22c28733
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/sub-pages.css
+18 -12
View File
@@ -408,12 +408,9 @@ main#main {
letter-spacing: 0.14em;
color: var(--color-ash);
margin-bottom: 6px;
/* Links use margin-left: -14px + border (2) + padding-left (12) to
end with text at the column edge (0). Group titles have no border,
so a small left margin matches the link text position without the
extra padding math. */
padding: 0;
margin-left: 0;
/* Match the link text's 14px left inset (2 border + 12 padding) so
category titles and link labels start at the same x position. */
padding: 0 0 0 14px;
}
.skills-sidebar-list {
@@ -428,12 +425,14 @@ main#main {
.skills-sidebar-list a {
display: block;
/* Negative left margin pulls the 2px active accent into the layout
gutter, out from under the text. Padding-left then pushes the text
itself 12px further right for breathing room, so the text reads
with comfortable space from the active bar. */
/* Border sits inside the normal flow (no negative margin) because
the sidebar's `overflow-y: auto` coerces overflow-x to auto too
per CSS spec, which would clip any border hanging left of the
column. Text is inset 14px (2 border + 12 padding) from the column
edge; group titles above use the same 14px inset. Accepts a small
misalignment with the header logo in exchange for a visible
active-state accent. */
padding: 4px 0 4px 12px;
margin-left: -14px;
border-left: 2px solid transparent;
font-family: var(--font-mono);
font-size: 0.875rem;
@@ -442,17 +441,24 @@ main#main {
color: var(--color-charcoal);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.skills-sidebar-list a:hover {
color: var(--color-accent);
background: color-mix(in oklch, var(--color-accent-dim) 30%, transparent);
}
.skills-sidebar-list a[aria-current="page"] {
color: var(--color-ink);
font-weight: 600;
border-left-color: var(--color-accent);
background: var(--color-accent-dim);
}
.skills-sidebar-list a[aria-current="page"]:hover {
color: var(--color-ink);
}
/* ============================================