The floor under bar_h was derived from the boxed icons, on the understanding that they were the tallest thing the menu bar carries. They were not. A lettered button is six units of type on a 1.25 line with two units of padding and a hairline each side, which is thirteen and a half against the icons' twelve, so BACK and INSTALL hung out of the strip at every upscale where the floor bites. BACK is a ghost with no border and so never looked wrong, and INSTALL carries a real one but only appears when the app can be installed, which is why this sat there unseen. A unit of padding rather than two makes a lettered button eleven and a half, puts it back under the icons, and makes the derivation true: the icons are the tallest thing in the bar, and the bar is as tall as the tallest thing it carries plus its air. Measured at six viewports from 375x667 to 1920x1080: every button of either kind now clears the rule by at least two units.
- commit
- 702e7a8fa3e6a7c818151045e906e1d36eea9a48
- parent
- e901cbd18ae2c001f94e51f10db659c85e1f11f4
- author
- Dami <dami.etoile@gmail.com>
| M | assets/ | 11 | ++++++++++- |
@@ -77,7 +77,16 @@ body {
7777 /* The menu bar is already white; a button background would punch a hole in its7878 rule. */7979 #top { justify-content: flex-start; gap: calc(5px * var(--s)); padding: 0 calc(8px * var(--s)); }80-#top button { background: none; padding: calc(2px * var(--s)) calc(4px * var(--s)); }80+/* A unit of air above and below the word, not two. Six units of type on a 1.2581+ line, a unit of padding each side and the hairline each side is eleven and a82+ half — which puts the lettered buttons back under the boxed icons, and leaves83+ the icons the tallest thing the bar carries. At two they were thirteen and a84+ half and the tallest, so the bar's floor was derived from a box that was not85+ in fact the one setting it, and BACK and INSTALL hung out of the strip at the86+ upscales where the floor bites. BACK is a ghost with no border and never87+ looked wrong; INSTALL carries a real one and only appears when the app can be88+ installed, which is why it stayed hidden. */89+#top button { background: none; padding: calc(1px * var(--s)) calc(4px * var(--s)); }8190 #top .spacer { flex: 1; }8291 8392 /* A boxed icon: square, hard-ruled, with the glyph struck inside it. The box is