Python
/
uv
mirror of https://github.com/astral-sh/uv
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use the full screen height for the main content to stabilize the nav (#9153) 

On large screens, we require scrolling below the fold for the next page
/ prev page navigation footer. This dramatically improves visibility of
the left nav when looking at small pages like section overviews.
Critically, this stops the height of the navigation from jumping around
depending on the page you're on. On small screens, the positioning is
unchanged since the nav is in a hamburger menu and it'd be annoying to
scroll.

Eventually, we could move the next / prev nav out of the footer and into
the content, e.g., as in
https://github.com/astral-sh/uv/pull/9121#issuecomment-2479282706.

These images don't quite do the change in experience justice. It's the
consistency when changing pages that feels the most different.

Before

<img width="1484" alt="Screenshot 2024-11-15 at 10 16 30 AM"
src="https://github.com/user-attachments/assets/e0729691-31ea-46cc-9679-636fb144eab7">

After

<img width="1474" alt="Screenshot 2024-11-15 at 10 15 26 AM"
src="https://github.com/user-attachments/assets/d01ae5cd-1347-45de-a294-fbd56b2d6fb5">
This commit is contained in:
Zanie Blue 2024-11-19 13:53:25 -06:00 committed by GitHub
parent ca9aaf1c48
commit 189cf6ead2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/stylesheets/extra.css
View File

@ -123,6 +123,18 @@ See https://github.com/astral-sh/uv/issues/5130 */
}
}
/* Always take the full screen for content, require scrolling to see the footer
This stops the size of the nav from jumping around when you visit a page without
a lot of content (i.e., an overview page). We don't apply this to sma screens
because the nav is in a hamburger menu anyway
*/
@media screen and (min-width: 76.25em) {
.md-main {
min-height: 100vh;
}
}
/* Tweak the formatting of the primary nav on a large screen */
@media screen and (min-width: 76.25em) {
.md-nav--primary .md-nav {