Skip to content

Commit cb184bb

Browse files
committed
rustdoc: clean up .logo-container layout CSS
This commit should result in no appearance changes. To make the logo container exactly the desired height, you want to get rid of the part of the box used for typographic descenders (you know, the part of g, y, and j that descends below the baseline). After all, it contains no text, but the space is still left open in the layout by default, because `<img>` is `display:inline`. The CSS used to employ three different tricks to accomplish this: * By making `.sidebar .logo-container` a flex container, the image becomes a flex item and is [blockified], without synthesizing any inline boxes. No inline boxes means no descenders. * By giving `.mobile-topbar .logo-container` a max-height exactly the same as the height of the image plus the padding, the descender area gets cut off. * By setting `.sub-logo-container { line-height: 0 }`, we ensure that the only box that contributes to the height of the line box is the image itself, and not any zero-content text boxes that neighbor it. See the [logical height algorithm]. This commit gets rid of the first two hacks, leaving only the third, since it requires only one line of code to accomplish and doesn't require setting the value based on math. [blockified]: https://drafts.csswg.org/css-flexbox-1/#flex-items [logical height algorithm]: https://www.w3.org/TR/css-inline-3/#inline-height
1 parent c2a5c3a commit cb184bb

File tree

1 file changed

+3
-7
lines changed

1 file changed

+3
-7
lines changed

src/librustdoc/html/static/css/rustdoc.css

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,8 @@ img {
367367
overflow: visible;
368368
}
369369

370-
.sub-logo-container {
370+
.sub-logo-container, .logo-container {
371+
/* zero text boxes so that computed line height = image height exactly */
371372
line-height: 0;
372373
}
373374

@@ -465,10 +466,9 @@ img {
465466
}
466467

467468
.sidebar .logo-container {
468-
display: flex;
469469
margin-top: 10px;
470470
margin-bottom: 10px;
471-
justify-content: center;
471+
text-align: center;
472472
}
473473

474474
.version {
@@ -1762,10 +1762,6 @@ in storage.js
17621762
white-space: nowrap;
17631763
}
17641764

1765-
.mobile-topbar .logo-container {
1766-
max-height: 45px;
1767-
}
1768-
17691765
.mobile-topbar .logo-container > img {
17701766
max-width: 35px;
17711767
max-height: 35px;

0 commit comments

Comments
 (0)