Taken off the padding rather than the glyph. The glyph is drawn on a 9-unit grid and only stays on whole pixels while its box is a whole multiple of 9, so shrinking the glyph is what would have made the strokes uneven. Both the box and the menu bar's rule are drawn in ink, and a box within a pixel of a line of the same colour stops reading as a box near a line. Clearance below is now 4 units rather than 3, symmetric with the space above.
- commit
- 3e863fc48a5cf924530cdea40c9f4d860feee466
- parent
- 0148132b9ba649646b5c9fd0e40fb762d30a3e84
- author
- Dami <dami.etoile@gmail.com>
| M | mockup/ | 11 | ++++++++++- |
@@ -73,7 +73,16 @@ body {
7373 the rectangle every time. */7474 .iconbtn {7575 display: flex; align-items: center; justify-content: center;76- padding: calc(2.5px * var(--s)) ;76+ /* Two units smaller than it wants to be, taken off the padding rather than77+ the glyph: the glyph is drawn on a 9-unit grid and only stays on whole78+ pixels while its box is a whole multiple of 9, so shrinking it is what79+ would make the strokes uneven.80+81+ The two units buy clearance from the menu bar's own rule below. Both are82+ drawn in ink, and a box that comes within a pixel of a line of the same83+ colour stops reading as a box near a line and starts reading as one shape84+ that has gone wrong. */85+ padding: calc(1.5px * var(--s)) ;7786 border-color: var(--ink) ;7887 }7988 .iconbtn svg {