From 6930e033ff82a8b566433baa5fc719f74a14fd96 Mon Sep 17 00:00:00 2001 From: Zanie Blue Date: Fri, 15 Nov 2024 17:00:23 -0600 Subject: [PATCH] Update styles to support collapsible nav (#9095) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Screenshot 2024-11-13 at 12 45 49 PM After Screenshot 2024-11-13 at 12 45 29 PM However, with collapsible sections you can see the bugs we're addressing Before Screenshot 2024-11-13 at 12 48 19 PM After Screenshot 2024-11-13 at 12 47 30 PM --- docs/stylesheets/extra.css | 78 ++++++++++++++++++-------------------- 1 file changed, 36 insertions(+), 42 deletions(-) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 74c705543..978da4f32 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -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 */ -.md-nav__title { - display: none; -} -@media screen and (max-width: 1219px) { +@media screen and (min-width: 76.25em) { .md-nav__title { - display: flex ; + display: none; } } - -/* Reducing spacing between nav items to fit more content */ -.md-nav__link { - margin-top: 0.25em; -} -.md-nav__item--section { - margin: 0.75em 0; -} -/* Retain larger spacing for each top-level section in the nav */ -.md-nav__item--nested { - margin-top: 1em; -} -/* Retain larger spacing for the right-side table-of-contents nav */ -.md-nav--secondary .md-nav__link { - margin-top: 0.5em; -} -/* 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; +/* 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; + } + /* 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; + } + /* 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; + } + /* 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; + } } /* 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;