Commit ed734c0b70
ed734c0b70c72713ef80e474011b910af745e233
parent: 0b989acdeb
Verified · cmc ci/build: success ci/test: success
cmc <hello@cleberg.net> · 2026-09-18 19:52 UTC
web: the rail strip keeps the brand on its first row, a compact pinned row, and a + for new repository
New repository is now an icon-only "+" (aria-label/title carry the
name) at every width, so it fits the strip without pushing other
links off. Below 52rem the rail's align-items switches to
flex-start so the brand lines up with the search field on the first
row instead of being centered across both rows, and the pinned
group becomes a second, visibly shorter row: its label reappears
inline, the list scrolls independently, and the owner prefix is
dropped from each entry to save space.
Ref #220
internal/web/static/style.css
+38 −6
| @@ -306,6 +306,18 @@ ul.raillist a[aria-current] { |
| 306 | 306 | font-weight: 600; |
| 307 | 307 | } |
| 308 | 308 | ul.raillist .owner { color: var(--shell-muted); } |
| 309 | ul.raillist a.newrepo { |
| 310 | display: inline-flex; |
| 311 | width: 28px; |
| 312 | height: 28px; |
| 313 | align-items: center; |
| 314 | justify-content: center; |
| 315 | padding: 0; |
| 316 | border: 1px solid var(--shell-line); |
| 317 | border-radius: var(--r-ctl); |
| 318 | font-size: var(--fs-3); |
| 319 | font-weight: 600; |
| 320 | } |
| 309 | 321 | ul.raillist.wide a { white-space: normal; display: block; } |
| 310 | 322 | ul.raillist.wide b { display: block; font-weight: 500; font-size: var(--fs-1); } |
| 311 | 323 | ul.raillist.wide .owner { display: block; font-size: var(--fs-0); } |
| @@ -1461,28 +1473,48 @@ svg.icon { vertical-align: -0.125em; } |
| 1461 | 1473 | height: auto; |
| 1462 | 1474 | position: static; |
| 1463 | 1475 | flex-direction: row; |
| 1464 | | align-items: center; |
| 1476 | align-items: flex-start; |
| 1465 | 1477 | gap: var(--sp-2); |
| 1466 | 1478 | border-right: 0; |
| 1467 | 1479 | border-bottom: 1px solid var(--shell-line); |
| 1468 | 1480 | overflow-x: auto; |
| 1469 | 1481 | } |
| 1470 | | a.brand { padding: var(--sp-2) var(--sp-3); } |
| 1482 | a.brand { padding: var(--sp-2) var(--sp-3); min-height: 39px; display: flex; align-items: center; } |
| 1471 | 1483 | .railbody { flex: 1; overflow: visible; padding: 0; display: flex; flex-direction: column; } |
| 1472 | 1484 | .railtop { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; } |
| 1473 | 1485 | .railtop > * { flex-shrink: 0; } |
| 1474 | 1486 | form.railsearch { margin: 0 var(--sp-2); } |
| 1475 | 1487 | form.railsearch input[type="search"] { min-width: 8rem; } |
| 1476 | 1488 | /* the strip hides the review queue, reachable from the dashboard, and |
| 1477 | | shows pinned repositories as a second row of the strip */ |
| 1489 | shows pinned repositories as a second, quieter row of the strip */ |
| 1478 | 1490 | .railgroup { display: none; } |
| 1479 | 1491 | .railgroup.pinned { |
| 1480 | | display: block; |
| 1492 | display: flex; |
| 1493 | align-items: center; |
| 1494 | gap: var(--sp-2); |
| 1495 | width: 100%; |
| 1481 | 1496 | border-top: 1px solid var(--shell-line); |
| 1482 | 1497 | padding: 0 var(--sp-2); |
| 1498 | min-height: 32px; |
| 1499 | } |
| 1500 | .railgroup.pinned .raillabel { |
| 1501 | display: block; |
| 1502 | margin: 0; |
| 1503 | font-size: var(--fs-0); |
| 1504 | color: var(--shell-muted); |
| 1505 | text-transform: uppercase; |
| 1506 | letter-spacing: .08em; |
| 1507 | flex: none; |
| 1508 | } |
| 1509 | .railgroup.pinned ul.raillist { |
| 1510 | display: flex; |
| 1511 | overflow-x: auto; |
| 1512 | margin: 0; |
| 1513 | flex: 1; |
| 1514 | min-width: 0; |
| 1483 | 1515 | } |
| 1484 | | .railgroup.pinned .raillabel { display: none; } |
| 1485 | | .railgroup.pinned ul.raillist { overflow-x: auto; } |
| 1516 | .railgroup.pinned ul.raillist a { font-size: var(--fs-1); padding: var(--sp-1) var(--sp-2); } |
| 1517 | .railgroup.pinned ul.raillist a .owner { display: none; } |
| 1486 | 1518 | ul.raillist { display: flex; margin: 0; } |
| 1487 | 1519 | ul.raillist a { border-radius: 0; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-3); } |
| 1488 | 1520 | ul.raillist a[aria-current] { box-shadow: none; border-bottom-color: var(--shell-mark); } |
internal/web/templates/layout.html
+1 −1
| @@ -25,7 +25,7 @@ |
| 25 | 25 | <li><a {{if eq (str . "Tab") "explore"}}aria-current="page" {{end}}href="/explore">Explore</a></li> |
| 26 | 26 | {{if .Viewer}}<li><a {{if eq (str . "Tab") "notifications"}}aria-current="page" {{end}}href="/notifications">Notifications{{with .Rail.Unread}} <b class="count">{{.}}</b>{{end}}</a></li> |
| 27 | 27 | <li><a {{if eq (str . "Tab") "bookmarks"}}aria-current="page" {{end}}href="/bookmarks">Bookmarks</a></li> |
| 28 | | <li><a href="/new">New repository</a></li>{{end}} |
| 28 | <li><a class="newrepo" href="/new" aria-label="New repository" title="New repository">+</a></li>{{end}} |
| 29 | 29 | </ul> |
| 30 | 30 | </div> |
| 31 | 31 | {{with .Rail.Pinned}} |