rustdoc: clean up .logo-container layout CSS
#103990
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
|
Please add a GUI test with a bigger image to ensure the maximum size of the image doesn't grow beyond 45px as we originally specified please for mobile, and an equivalent test for non-mobile too. |
rustbot
added
the
T-rustdoc
|
Some changes occurred in HTML/CSS/JS. cc @GuillaumeGomez, @Folyd, @jsha |
There was a problem hiding this comment.
Since the image is imported like this, is there a need to add the tux.png one?
There was a problem hiding this comment.
No, it’s not needed.
notriddle
force-pushed
the
notriddle/logo-container
branch
from
2dafbcc to
2189480
Compare
GuillaumeGomez
approved these changes
Nov 5, 2022
|
Looks good to me, thanks! r=me once CI pass |
|
@bors r=GuillaumeGomez rollup |
bors
added
the
S-waiting-on-bors
matthiaskrgr
added a commit
to matthiaskrgr/rust
that referenced
this pull request
Nov 6, 2022
…, r=GuillaumeGomez
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
bors
added a commit
to rust-lang-ci/rust
that referenced
this pull request
Nov 6, 2022
…iaskrgr Rollup of 7 pull requests Successful merges: - rust-lang#103012 (Suggest use .. to fill in the rest of the fields of Struct) - rust-lang#103851 (Fix json flag in bootstrap doc) - rust-lang#103990 (rustdoc: clean up `.logo-container` layout CSS) - rust-lang#104002 (fix a comment in UnsafeCell::new) - rust-lang#104014 (Migrate test-arrow to CSS variables) - rust-lang#104016 (Add internal descriptions to a few queries) - rust-lang#104035 (Add 'closure match' test to weird-exprs.rs.) Failed merges: r? `@ghost` `@rustbot` modify labels: rollup
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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>isdisplay:inline. The CSS used to employ three different tricks to accomplish this:.sidebar .logo-containera flex container, the image becomes a flex item and is blockified, without synthesizing any inline boxes. No inline boxes means no descenders..mobile-topbar .logo-containera max-height exactly the same as the height of the image plus the padding, the descender area gets cut off..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.