Commit 0db33b1ad1
0db33b1ad160bda8a1fd2900e84c654ba25f1218
parent: eec36526d2
Verified · cmc ci/build: success
cmc <hello@cleberg.net> · 2026-08-26T22:37:25Z
web: left-align table headers, and keep the avatar out of the hover underline
tr.cols is the shared header-row idiom, but the rule was scoped to
table.tree, so key and member tables fell through to the browser default
and centred their headers over left-aligned values.
The avatar underline needed a different fix than the one that shipped: a
descendant cannot cancel an ancestor's text-decoration, so the link
carries none and the username draws its own.
internal/web/static/style.css
+10 −5
| @@ -279,8 +279,10 @@ ul.raillist.wide .owner { font-size: var(--fs-0); } |
| 279 | 279 | } |
| 280 | 280 | .railfoot a { color: var(--shell-fg); } |
| 281 | 281 | a.railuser { display: inline-flex; align-items: center; gap: var(--sp-2); } |
| 282 | | /* the square is a graphic, not text: the link's hover underline stops at it */ |
| 283 | | a.railuser:hover .avatar { text-decoration: none; } |
| 282 | /* a descendant cannot cancel an ancestor's underline, so the link carries |
| 283 | none and the name draws its own — the avatar square stays undecorated */ |
| 284 | a.railuser:hover { text-decoration: none; } |
| 285 | a.railuser:hover .uname { text-decoration: underline; } |
| 284 | 286 | .railfoot .railsettings { color: var(--shell-muted); display: inline-flex; } |
| 285 | 287 | .railfoot .railsettings:hover { color: var(--shell-fg); } |
| 286 | 288 | .railfoot form { margin-left: auto; } |
| @@ -494,7 +496,7 @@ table.tree td, table.refs td { |
| 494 | 496 | } |
| 495 | 497 | table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; } |
| 496 | 498 | table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); } |
| 497 | | table.tree tr.cols th { |
| 499 | tr.cols th { |
| 498 | 500 | text-align: left; |
| 499 | 501 | font-weight: 500; |
| 500 | 502 | font-size: var(--fs-1); |
| @@ -503,10 +505,10 @@ table.tree tr.cols th { |
| 503 | 505 | border-bottom: 1px solid var(--line); |
| 504 | 506 | background: var(--bg); |
| 505 | 507 | } |
| 506 | | table.tree tr.cols:hover th { background: var(--bg); } |
| 508 | tr.cols:hover th { background: var(--bg); } |
| 507 | 509 | /* right-aligned columns keep their header with their values; this needs to |
| 508 | 510 | outrank the tr.cols th rule above, which is why it names both */ |
| 509 | | table.tree tr.cols th.age, table.tree tr.cols th.size { text-align: right; } |
| 511 | tr.cols th.age, tr.cols th.size { text-align: right; } |
| 510 | 512 | table.tree th.size { text-align: right; } |
| 511 | 513 | table.tree td.name { width: 100%; } |
| 512 | 514 | table.tree td.name a { color: var(--fg); } |
| @@ -825,6 +827,9 @@ form.logfilter input { flex: 1; min-width: 12rem; max-width: 28rem; } |
| 825 | 827 | |
| 826 | 828 | /* account settings */ |
| 827 | 829 | table.keys td { padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; } |
| 830 | /* these tables sit flush with the page text, so the header row drops the |
| 831 | left padding the card-style listings use */ |
| 832 | table.keys tr.cols th { padding-left: 0; background: transparent; } |
| 828 | 833 | table.keys td.mono, .mono { font-family: var(--mono); font-size: var(--fs-1); overflow-wrap: anywhere; } |
| 829 | 834 | table.keys td.act { text-align: right; } |
| 830 | 835 | ul.plain { list-style: none; margin: 0 0 var(--sp-3); padding: 0; } |
internal/web/templates/layout.html
+1 −1
| @@ -43,7 +43,7 @@ |
| 43 | 43 | {{if .Viewer}}<li><a {{if eq (str . "Tab") "account"}}aria-current="page" {{end}}href="/settings">Settings</a></li>{{end}} |
| 44 | 44 | </ul> |
| 45 | 45 | <div class="railfoot"> |
| 46 | | {{if .Viewer}}<a class="railuser" href="/{{.Viewer}}"><span class="avatar">{{initial .Viewer}}</span>{{.Viewer}}</a> |
| 46 | {{if .Viewer}}<a class="railuser" href="/{{.Viewer}}"><span class="avatar">{{initial .Viewer}}</span><span class="uname">{{.Viewer}}</span></a> |
| 47 | 47 | <form method="post" action="/logout"><button type="submit" class="linklike">Log out</button></form> |
| 48 | 48 | {{else}}<a href="/login">Sign in</a>{{end}} |
| 49 | 49 | </div> |