mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rustdoc: clean up .logo-container layout CSS

Browse Source 
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
This commit is contained in:
Michael Howell 2022-11-04 15:13:13 -07:00
parent c2a5c3a50f
commit cb184bb023
1 changed files with 3 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/librustdoc/html/static/css/rustdoc.css
View File

@ -367,7 +367,8 @@ img {
overflow: visible;
}
.sub-logo-container {
.sub-logo-container, .logo-container {
/* zero text boxes so that computed line height = image height exactly */
line-height: 0;
}
@ -465,10 +466,9 @@ img {
}
.sidebar .logo-container {
display: flex;
margin-top: 10px;
margin-bottom: 10px;
justify-content: center;
text-align: center;
}
.version {
@ -1762,10 +1762,6 @@ in storage.js
white-space: nowrap;
}
.mobile-topbar .logo-container {
max-height: 45px;
}
.mobile-topbar .logo-container > img {
max-width: 35px;
max-height: 35px;