diff --git a/design/desktop-draft.html b/design/desktop-draft.html index a40bde2..903030d 100644 --- a/design/desktop-draft.html +++ b/design/desktop-draft.html @@ -1180,7 +1180,11 @@ max-width: 72ch; } -.icon { width: 15px; height: 15px; flex: 0 0 auto; } +/* Every icon is a of a 24-unit symbol. The symbol carries the viewBox, + so these sizes scale the artwork instead of cropping it. flex-shrink must be + 0 on all three or a tight row squashes the glyph into an ellipse. */ +.icon, .icon-sm, .icon-lg { display: block; flex: 0 0 auto; } +.icon { width: 15px; height: 15px; } .icon-sm { width: 13px; height: 13px; } .icon-lg { width: 18px; height: 18px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @@ -1191,76 +1195,76 @@