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

Update styles to support collapsible nav (#9095) 

In preparation for adding collapsible sections, cleans up the CSS
styling we apply to the nav.

The differences here are very subtle without collapsible sections
enabled. Note these screenshots show an increase in the secondary nav
font size (table of contents) which I subsequently fixed.

Before

<img width="1169" alt="Screenshot 2024-11-13 at 12 45 49 PM"
src="https://github.com/user-attachments/assets/10ea345f-73d3-430c-a6f0-8448e2471b60">

After

<img width="1169" alt="Screenshot 2024-11-13 at 12 45 29 PM"
src="https://github.com/user-attachments/assets/6c1af159-1684-4d00-b33d-c0a88b5e0aa9">

However, with collapsible sections you can see the bugs we're addressing

Before

<img width="1169" alt="Screenshot 2024-11-13 at 12 48 19 PM"
src="https://github.com/user-attachments/assets/7902791f-6c4d-4c84-b366-ba9c4bd96214">

After

<img width="1169" alt="Screenshot 2024-11-13 at 12 47 30 PM"
src="https://github.com/user-attachments/assets/6e0c4c7c-4a41-4dd5-a9f1-beabff965dbb">
This commit is contained in:
Zanie Blue 2024-11-15 17:00:23 -06:00 committed by GitHub
parent e21227504b
commit 6930e033ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
docs/stylesheets/extra.css
View File

@ -117,52 +117,41 @@ the nav title is needed for backwards navigation in the collapsible
nav variant.
See https://github.com/astral-sh/uv/issues/5130 */
@media screen and (min-width: 76.25em) {
.md-nav__title {
display: none;
}
@media screen and (max-width: 1219px) {
.md-nav__title {
display: flex ;
}
}
/* Reducing spacing between nav items to fit more content */
.md-nav__link {
margin-top: 0.25em;
/* Tweak the formatting of the primary nav on a large screen */
@media screen and (min-width: 76.25em) {
.md-nav--primary .md-nav {
font-size: 0.75rem;
}
.md-nav__item--section {
margin: 0.75em 0;
/* Remove the bold from the section headings, use a larger font instead */
.md-nav__item--section > .md-nav__link {
font-weight: normal;
font-size: 0.85rem;
}
/* Retain larger spacing for each top-level section in the nav */
.md-nav__item--nested {
/* Reducing spacing between nav items to fit more content
First, disable `nav__link` spacing then use `nav__item` to enforce margins this reduces inconsistencies in the spacing. */
.md-nav--primary .md-nav__link {
margin: 0;
}
.md-nav--primary .md-nav__item {
margin-top: 0.35em;
}
/* Use larger spacing for the sections headings */
.md-nav--primary .md-nav__item--section {
margin-bottom: 0.75em;
margin-top: 1em;
}
/* Retain larger spacing for the right-side table-of-contents nav */
.md-nav--secondary .md-nav__link {
margin-top: 0.5em;
/* Increase the size of the first nav item to match the sections
It has no children, so it is not considered a section */
.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {
font-size: 0.85rem;
margin-bottom: 0.75em;
}
/* See: https://mkdocstrings.github.io/recipes/#prevent-selection-of-prompts-and-output-in-python-code-blocks */
.highlight .gp, .highlight .go { /* Generic.Prompt, Generic.Output */
user-select: none;
}
/* Increase the size of the sections headings, remove the bold */
.md-nav__container > .md-nav__link:first-child {
font-size: 17.5px;
font-weight: normal;
margin-bottom: 0.1em;
}
/* Increase the size of the index nav item to match the sections */
.md-nav--primary .md-nav__item:first-child {
font-size: 17.5px;
font-weight: normal;
}
/* But do not increase the size of other nav items */
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item {
font-size: 15px;
font-weight: normal;
}
/* Bold the active nav link for accessibility */
@ -170,6 +159,11 @@ See https://github.com/astral-sh/uv/issues/5130 */
font-weight: bold;
}
/* See: https://mkdocstrings.github.io/recipes/#prevent-selection-of-prompts-and-output-in-python-code-blocks */
.highlight .gp, .highlight .go { /* Generic.Prompt, Generic.Output */
user-select: none;
}
/* Styling for the generated CLI reference page */
.cli-reference dd {
margin-top: 0.1em;