Commit 7353d620de
Verified · cmc
internal/web/static/style.css +19 −46
| @@ -1452,60 +1452,27 @@ svg.icon { vertical-align: -0.125em; } | ||
| 1452 | 1452 | } |
| 1453 | 1453 | |
| 1454 | 1454 | @media (max-width: 52rem) { |
| 1455 | /* the rail becomes a single strip, not a wall of links */ | |
| 1455 | /* the rail becomes one row of the same glyphs: fixed squares, no | |
| 1456 | wrapping and no scrolling. The squares narrow a step further below | |
| 1457 | 30rem, where eleven of them would not otherwise fit a phone. */ | |
| 1456 | 1458 | .shell { display: block; } |
| 1457 | 1459 | .rail { |
| 1458 | 1460 | width: auto; |
| 1459 | height: auto; | |
| 1461 | height: var(--rail-strip-h); | |
| 1460 | 1462 | position: static; |
| 1461 | 1463 | flex-direction: row; |
| 1462 | align-items: flex-start; | |
| 1463 | gap: var(--sp-2); | |
| 1464 | align-items: center; | |
| 1465 | gap: 0; | |
| 1466 | padding: 0 var(--sp-1); | |
| 1464 | 1467 | border-right: 0; |
| 1465 | 1468 | border-bottom: 1px solid var(--shell-line); |
| 1466 | overflow-x: auto; | |
| 1467 | } | |
| 1468 | a.brand { padding: var(--sp-2) var(--sp-3); min-height: 39px; display: flex; align-items: center; } | |
| 1469 | .railbody { flex: 1; overflow: visible; padding: 0; display: flex; flex-direction: column; } | |
| 1470 | .railtop { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; } | |
| 1471 | .railtop > * { flex-shrink: 0; } | |
| 1472 | form.railsearch { margin: 0 var(--sp-2); } | |
| 1473 | form.railsearch input[type="search"] { min-width: 8rem; } | |
| 1474 | /* the strip hides the review queue, reachable from the dashboard, and | |
| 1475 | shows pinned repositories as a second, quieter row of the strip */ | |
| 1476 | .railgroup { display: none; } | |
| 1477 | .railgroup.pinned { | |
| 1478 | display: flex; | |
| 1479 | align-items: center; | |
| 1480 | gap: var(--sp-2); | |
| 1481 | width: 100%; | |
| 1482 | border-top: 1px solid var(--shell-line); | |
| 1483 | padding: 0 var(--sp-2); | |
| 1484 | min-height: 32px; | |
| 1485 | } | |
| 1486 | .railgroup.pinned .raillabel { | |
| 1487 | display: block; | |
| 1488 | margin: 0; | |
| 1489 | font-size: var(--fs-0); | |
| 1490 | color: var(--shell-muted); | |
| 1491 | text-transform: uppercase; | |
| 1492 | letter-spacing: .08em; | |
| 1493 | flex: none; | |
| 1469 | overflow: visible; | |
| 1494 | 1470 | } |
| 1495 | .railgroup.pinned ul.raillist { | |
| 1496 | display: flex; | |
| 1497 | overflow-x: auto; | |
| 1498 | margin: 0; | |
| 1499 | flex: 1; | |
| 1500 | min-width: 0; | |
| 1501 | } | |
| 1502 | .railgroup.pinned ul.raillist a { font-size: var(--fs-1); padding: var(--sp-1) var(--sp-2); } | |
| 1503 | .railgroup.pinned ul.raillist a .owner { display: none; } | |
| 1504 | ul.raillist { display: flex; margin: 0; } | |
| 1505 | ul.raillist a { border-radius: 0; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-3); } | |
| 1506 | ul.raillist a[aria-current] { box-shadow: none; border-bottom-color: var(--shell-mark); } | |
| 1507 | .railfoot { border-top: 0; padding: var(--sp-2); } | |
| 1508 | .railpinned { border-top: 0; padding: 0; } | |
| 1471 | a.brand { width: var(--rail-mark-box); height: var(--rail-strip-h); } | |
| 1472 | ul.raillist, .railfoot { flex-direction: row; gap: 0; } | |
| 1473 | .railicon, a.railuser { height: var(--rail-strip-h); border-radius: 0; } | |
| 1474 | /* the current item is marked along the bottom edge in a row */ | |
| 1475 | .railicon[aria-current] { box-shadow: inset 0 -2px 0 var(--shell-mark); } | |
| 1509 | 1476 | main.content { padding: var(--sp-4) var(--sp-4) var(--sp-5); } |
| 1510 | 1477 | footer { padding: var(--sp-4); } |
| 1511 | 1478 | .repohead { padding: var(--sp-3) var(--sp-4) 0; } |
| @@ -1537,3 +1504,9 @@ svg.icon { vertical-align: -0.125em; } | ||
| 1537 | 1504 | ul.loglist li { flex-wrap: wrap; } |
| 1538 | 1505 | ul.loglist .commitside { width: 100%; justify-content: flex-start; } |
| 1539 | 1506 | } |
| 1507 | ||
| 1508 | /* eleven squares at 40px overrun a phone; 32px keeps the row whole and | |
| 1509 | the 48px height keeps the target big enough to hit */ | |
| 1510 | @media (max-width: 30rem) { | |
| 1511 | :root { --rail-hit: 32px; } | |
| 1512 | } | |