Files
uv/docs/stylesheets/extra.css
T
Zanie Blue 189cf6ead2 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">
2024-11-19 19:53:25 +00:00

204 lines
5.8 KiB
CSS

:root {
--black: #261230;
--white: #ffffff;
--radiate: #d7ff64;
--flare: #6340ac;
--rock: #78876e;
--galaxy: #261230;
--space: #30173d;
--comet: #6f5d6f;
--cosmic: #de5fe9;
--sun: #ffac2f;
--electron: #46ebe1;
--aurora: #46eb74;
--constellation: #5f6de9;
--neutron: #cff3cf;
--proton: #f6afbc;
--nebula: #cdcbfb;
--supernova: #f1aff6;
--starlight: #f4f4f1;
--lunar: #fbf2fc;
--asteroid: #e3cee3;
--crater: #f0dfdf;
}
[data-md-color-scheme="astral-light"] {
--md-default-bg-color--dark: var(--black);
--md-primary-fg-color: var(--galaxy);
--md-typeset-a-color: var(--flare);
--md-accent-fg-color: var(--cosmic);
}
[data-md-color-scheme="astral-dark"] {
--md-default-bg-color: var(--galaxy);
--md-default-fg-color: var(--white);
--md-default-fg-color--light: var(--white);
--md-default-fg-color--lighter: var(--white);
--md-primary-fg-color: var(--space);
--md-primary-bg-color: var(--white);
--md-accent-fg-color: var(--cosmic);
--md-typeset-color: var(--white);
--md-typeset-a-color: var(--radiate);
--md-typeset-mark-color: var(--sun);
--md-code-fg-color: var(--white);
--md-code-bg-color: var(--space);
--md-code-hl-comment-color: var(--asteroid);
--md-code-hl-punctuation-color: var(--asteroid);
--md-code-hl-generic-color: var(--supernova);
--md-code-hl-variable-color: var(--starlight);
--md-code-hl-string-color: var(--radiate);
--md-code-hl-keyword-color: var(--supernova);
--md-code-hl-operator-color: var(--supernova);
--md-code-hl-number-color: var(--electron);
--md-code-hl-special-color: var(--electron);
--md-code-hl-function-color: var(--neutron);
--md-code-hl-constant-color: var(--radiate);
--md-code-hl-name-color: var(--md-code-fg-color);
--md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
--md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
--md-typeset-table-color: hsla(0, 0%, 100%, 0.12);
--md-typeset-table-color--light: hsla(0, 0%, 100%, 0.035);
}
[data-md-color-scheme="astral-light"] img[src$="#only-dark"],
[data-md-color-scheme="astral-light"] img[src$="#gh-dark-mode-only"] {
display: none; /* Hide dark images in light mode */
}
[data-md-color-scheme="astral-light"] img[src$="#only-light"],
[data-md-color-scheme="astral-light"] img[src$="#gh-light-mode-only"] {
display: inline; /* Show light images in light mode */
}
[data-md-color-scheme="astral-dark"] img[src$="#only-light"],
[data-md-color-scheme="astral-dark"] img[src$="#gh-light-mode-only"] {
display: none; /* Hide light images in dark mode */
}
[data-md-color-scheme="astral-dark"] img[src$="#only-dark"],
[data-md-color-scheme="astral-dark"] img[src$="#gh-dark-mode-only"] {
display: inline; /* Show dark images in dark mode */
}
/* See: https://github.com/squidfunk/mkdocs-material/issues/175#issuecomment-616694465 */
.md-typeset__table {
min-width: 100%;
}
.md-typeset table:not([class]) {
display: table;
}
/* See: https://github.com/astral-sh/ruff/issues/8519 */
[data-md-color-scheme="astral-dark"] details summary a {
color: var(--flare);
}
/* See: https://github.com/astral-sh/ruff/issues/9046 */
[data-md-color-scheme="astral-dark"] div.admonition {
color: var(--md-code-fg-color);
background-color: var(--md-code-bg-color);
}
/* Prevent the shadow from the nav title from blurring the top link.
The box shadow isn't really doing anything anyway.
This is a consequence of the reduced nav spacing below. */
.md-nav--primary .md-nav__title {
box-shadow: none;
}
/* Omits the nav title "uv" entirely unless on a small screen, in which case
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;
}
}
/* 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 {
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 */
.md-nav__link--active {
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;
margin-bottom: 0.5em;
}
.cli-reference dd p {
margin-block-start: 0.2em;
margin-block-end: 0.3em;
}
.cli-reference ul {
margin-bottom: 0.1em;
}
h3.cli-reference {
font-size: 1.1em;
margin: 0 0 0 0;
}
/* Styling for anchor link headers */
.toclink {
color: unset !important;
}
.toclink:hover {
color: var(--md-accent-fg-color) !important;
}