The .card-h link rule (margin-left: auto) is nested in a selector list with .rail h2, so it weighs as .rail h2 a and outweighed .doc-tabs a. The tab rule is now scoped as .card-h.doc-tabs. Checked in Chromium (Playwright): tabs start at the left, light and dark; the rail View all link stays on the right.
#36 fix(web): doc tabs side by side from the left
M internal/adapters/web/static/css/40-summary.css +3 -2
| @@ -13,9 +13,10 @@ | |||
| 13 | 13 | .list.commits .c-subject { overflow: hidden; text-overflow: ellipsis; } | |
| 14 | 14 | ||
| 15 | 15 | .readme .prose { padding: var(--s5) var(--s6) var(--s6); } | |
| 16 | - | .doc-tabs { | |
| 16 | + | /* .card-h.doc-tabs, not .doc-tabs: .card-h pushes its links to the right | |
| 17 | + | with :is(.card-h, .rail h2) a, which weighs as .rail h2 a */ | |
| 18 | + | .card-h.doc-tabs { | |
| 17 | 19 | display: flex; flex-wrap: wrap; gap: var(--s4); | |
| 18 | - | /* side by side from the left: .card-h pushes its links to the right */ | |
| 19 | 20 | & a { margin-left: 0; color: var(--ink-dim); } | |
| 20 | 21 | & a[aria-current] { color: var(--teal); text-decoration: underline; text-underline-offset: 5px; } | |
| 21 | 22 | } | |
| @@ -13,9 +13,10 @@ | |||||
| 13 | .list.commits .c-subject { overflow: hidden; text-overflow: ellipsis; } | 13 | .list.commits .c-subject { overflow: hidden; text-overflow: ellipsis; } | ||
| 14 | 14 | ||||
| 15 | .readme .prose { padding: var(--s5) var(--s6) var(--s6); } | 15 | .readme .prose { padding: var(--s5) var(--s6) var(--s6); } | ||
| 16 | - | .doc-tabs { | 16 | + | /* .card-h.doc-tabs, not .doc-tabs: .card-h pushes its links to the right |
| 17 | + | with :is(.card-h, .rail h2) a, which weighs as .rail h2 a */ | |||
| 18 | + | .card-h.doc-tabs { | |||
| 17 | display: flex; flex-wrap: wrap; gap: var(--s4); | 19 | display: flex; flex-wrap: wrap; gap: var(--s4); | ||
| 18 | - | /* side by side from the left: .card-h pushes its links to the right */ | |||
| 19 | & a { margin-left: 0; color: var(--ink-dim); } | 20 | & a { margin-left: 0; color: var(--ink-dim); } | ||
| 20 | & a[aria-current] { color: var(--teal); text-decoration: underline; text-underline-offset: 5px; } | 21 | & a[aria-current] { color: var(--teal); text-decoration: underline; text-underline-offset: 5px; } | ||
| 21 | } | 22 | } | ||
Comments0 open / 0
no comments yet.