website: reserve room for the fixed navbar when scrolling to an anchor - #4462
opensource-joe wants to merge 1 commit into
Conversation
The navbar is position: fixed from the md breakpoint up, and nothing compensated for it, so following an in-page anchor or a table of contents entry put the target heading underneath it. Closes: kubeflow#4460 Signed-off-by: Joe Castle <joecastleengineering@gmail.com>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
Hi @opensource-joe. Thanks for your PR. I'm waiting for a kubeflow member to verify that this patch is reasonable to test. If it is, they should reply with Once the patch is verified, the new status will be reflected by the I understand the commands that are listed here. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
|
🚫 This command cannot be processed. Only organization members or owners can use the commands. |
4 participants
Description of Changes
.td-navbarisposition: fixedfrom themdbreakpoint up, and nothing compensated for it, so following any in-page anchor scrolled the target heading underneath the navbar.One declaration in
assets/scss/_variables_project.scss, next to the existinghtml.smooth-scrollrule, scoped to the same breakpoint at which the navbar becomes fixed.Measured on
/docs/started/introduction/#what-is-kubeflow, before and after:Also checked the table of contents path from the issue: clicking "Why Kubeflow Pipelines?" on
/docs/components/pipelines/overview/now lands the heading at 125.2px instead of 0.2px.Two notes for reviewers:
min-width: 768pxbecause the navbar is only fixed there. Below that it scrolls away with the page and needs no compensation, so an unscoped rule would add dead space on mobile._variables_project.scss._docsy_main.scssand_styles_project.scssare imported inside the[data-theme=...]blocks inmain.scss, so anhtmlrule in either would compile to[data-theme=light] htmland never match. That file is imported before Bootstrap's mixins, hence the written-out breakpoint instead ofmedia-breakpoint-up(md).Tested against a local build at
476e4c1with Hugo extended 0.124.1, the version pinned innetlify.toml.hugo --gc --minifybuilds clean.Related Issues
Closes: #4460
Checklist