docs: align the landing-page link with the menu bar's icons - #4
Merged
Merged
Conversation
The link sat above the icons beside it. An inline-flex box with an explicit height aligns on its own baseline rather than filling the line box, so it rode high against buttons that mdBook centers with a line-height of the menu bar's height. Align the box to the top of the line box, where its full-bar height makes it fill the bar, and let the flex row center the mark against the word inside it. Trim the right padding to 2px: the next button brings its own 8px on that side, so a symmetric 8px left a visibly wider gap there than between the icons. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
The landing-page link added in #3 sat slightly above the print and repository icons beside it, and its right-hand gap was wider than the gap between those icons.
Cause
The link was an inline-flex box with an explicit
height. An inline-level flex box aligns on its own baseline rather than filling the parent's line box, so it rode high next to buttons that mdBook centers withline-height: var(--menu-bar-height).What changed
The box aligns to the top of the line box, where its full-bar height makes it fill the bar exactly, and the flex row centers the mark against the word inside it. The right padding drops from 8px to 2px: the next button contributes its own 8px on that side, so a symmetric 8px left a visibly wider gap there than between the icons themselves.
Only
site/docs-brand.csschanges; the template from #3 is untouched.Verification
Checked against a local build of the book rather than by inspection: the position and spacing were confirmed in a browser at each step.
mdbook buildsucceeds and the link renders on all 18 reader-facing pages.