diff --git a/README.md b/README.md index b2c161f01..2e07a69de 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # The PyData Sphinx Theme -[![License](https://img.shields.io/badge/License-BSD_3--Clause-yellow?logo=opensourceinitiative&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/blob/main/LICENSE) -[![PyPI](https://img.shields.io/pypi/v/pydata-sphinx-theme?logo=python&logoColor=white&color=orange)](https://pypi.org/project/pydata-sphinx-theme/) -[![conda-forge](https://img.shields.io/conda/vn/conda-forge/pydata-sphinx-theme.svg?logo=anaconda&logoColor=white&color=orange)](https://anaconda.org/conda-forge/pydata-sphinx-theme) -[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/pydata/pydata-sphinx-theme/tests.yml?logo=github&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/actions/workflows/tests.yml) +[![License badge](https://img.shields.io/badge/License-BSD_3--Clause-yellow?logo=opensourceinitiative&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/blob/main/LICENSE) +[![PyPI version badge](https://img.shields.io/pypi/v/pydata-sphinx-theme?logo=python&logoColor=white&color=orange)](https://pypi.org/project/pydata-sphinx-theme/) +[![conda-forge license badge](https://img.shields.io/conda/vn/conda-forge/pydata-sphinx-theme.svg?logo=anaconda&logoColor=white&color=orange)](https://anaconda.org/conda-forge/pydata-sphinx-theme) +[![GitHub Workflow Status - build](https://img.shields.io/github/actions/workflow/status/pydata/pydata-sphinx-theme/tests.yml?logo=github&logoColor=white)](https://github.com/pydata/pydata-sphinx-theme/actions/workflows/tests.yml) [![Read the Docs (version)](https://img.shields.io/readthedocs/pydata-sphinx-theme/latest?logo=readthedocs&logoColor=white)](https://readthedocs.org/projects/pydata-sphinx-theme/builds/) -[![Codecov](https://img.shields.io/codecov/c/github/pydata/pydata-sphinx-theme?logo=codecov&logoColor=white)](https://codecov.io/gh/pydata/pydata-sphinx-theme) +[![Codecov badge](https://img.shields.io/codecov/c/github/pydata/pydata-sphinx-theme?logo=codecov&logoColor=white)](https://codecov.io/gh/pydata/pydata-sphinx-theme) A clean, three-column, Bootstrap-based Sphinx theme by and for the [PyData community](https://pydata.org). @@ -13,7 +13,7 @@ A clean, three-column, Bootstrap-based Sphinx theme by and for the [PyData commu - :bulb: Examples: https://pydata-sphinx-theme.readthedocs.io/en/stable/examples - :raised_hands: Contribute: https://pydata-sphinx-theme.readthedocs.io/en/stable/community -[![Example documentation with this theme](./docs/_static/theme_landing.png)](https://pydata-sphinx-theme.readthedocs.io/en/stable) +[![PyData theme - Configure the search position demo image showcasing both the light and dark theme in a single image.](./docs/_static/theme-demo-screenshot.png)](https://pydata-sphinx-theme.readthedocs.io/en/stable) ## Installation and usage @@ -22,7 +22,7 @@ and use as follows: - Install the `pydata-sphinx-theme` in your doc build environment: - ``` + ```bash pip install pydata-sphinx-theme # or conda install pydata-sphinx-theme --channel conda-forge @@ -31,7 +31,7 @@ and use as follows: - Then, in the `conf.py` of your sphinx docs, you update the `html_theme` configuration option: - ``` + ```python html_theme = "pydata_sphinx_theme" ``` @@ -46,7 +46,7 @@ And that's it! ## Contribute to and develop the theme Contributions are very welcome! Installing the development version, building -the example docs and developing the css/js of the theme, etc, is explained in +the example docs and developing the `CSS/JS` of the theme, etc., is explained in more detail in the contributing section of the documentation: - [Community and contributing documentation](https://pydata-sphinx-theme.readthedocs.io/en/latest/community/index.html) diff --git a/docs/_static/contributors.yaml b/docs/_static/contributors.yaml index 229e469ff..115e3b959 100644 --- a/docs/_static/contributors.yaml +++ b/docs/_static/contributors.yaml @@ -22,3 +22,6 @@ - header: "@12rambau" image: https://avatars.githubusercontent.com/u/12596392 website: https://github.com/12rambau +- header: "@trallard" + image: https://avatars.githubusercontent.com/u/23552331 + website: https://github.com/trallard diff --git a/docs/_static/theme-demo-screenshot.png b/docs/_static/theme-demo-screenshot.png new file mode 100644 index 000000000..682637805 Binary files /dev/null and b/docs/_static/theme-demo-screenshot.png differ diff --git a/docs/_static/theme_landing.png b/docs/_static/theme_landing.png deleted file mode 100644 index 9761c7662..000000000 Binary files a/docs/_static/theme_landing.png and /dev/null differ diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss index 875a6252b..f3fe96be1 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss @@ -20,7 +20,7 @@ $link-underline-offset: 0.1578em !default; // - 0.1875rem, if it's thicker than 3px because the user has changed the text // size in their browser // - 0.12em (relative to the link's text size) -$link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; +$link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default; // Ensures links have an underline decoration by default - needed to meet // WCAG SC 1.4.1 @@ -39,8 +39,8 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; // Ensures links have an underline decoration on hover - distinct from the // default behaviour @mixin link-decoration-hover { - @if $link-hover-underline-thickness { - text-decoration-thickness: $link-hover-underline-thickness; + @if $link-hover-decoration-thickness { + text-decoration-thickness: $link-hover-decoration-thickness; // Disable ink skipping on underlines on hover. Browsers haven't // standardised on this part of the spec yet, so set both properties text-decoration-skip-ink: none; // Chromium, Firefox @@ -132,12 +132,13 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; // Adds a vertical line on the left hand side of the link to indicate that // it's the current page. Note this is distinct from an active state. // Used on the primary sidebar and the TOC. +// We want the side box shadow to have the same thickness as the hover underline @mixin link-sidebar-current { font-weight: 600; color: var(--pst-color-primary); - @if $link-underline-thickness { + @if $link-hover-decoration-thickness { box-shadow: inset - $link-underline-thickness + $link-hover-decoration-thickness 0px 0px var(--pst-color-primary); @@ -148,19 +149,30 @@ $link-hover-underline-thickness: unquote("max(3px, .1875rem, .12em)") !default; // // Adds a bottom underline, this leaves enough space for the hover state without // cluttering the navbar. +// We want the side box shadow to have the same thickness as the hover underline @mixin link-navbar-current { font-weight: 600; - border-bottom: $link-hover-underline-thickness solid var(--pst-color-primary); color: var(--pst-color-primary); + @if $link-hover-decoration-thickness { + border-bottom: $link-hover-decoration-thickness + solid + var(--pst-color-primary); + } } // Navigation bar icon links hover styles // // Adds a bottom box-shadow - since there is no text we cannot use text-decoration +// We want the side box shadow to have the same thickness as the hover underline @mixin icon-navbar-hover { &:hover { color: var(--pst-color-link-hover); - box-shadow: 0px $link-underline-thickness 0px var(--pst-color-hover); + @if $link-hover-decoration-thickness { + box-shadow: 0px + $link-hover-decoration-thickness + 0px + var(--pst-color-link-hover); + } } } diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss index 6deeefdfd..fd53a3dd4 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss @@ -141,10 +141,12 @@ color: var(--pst-color-text-muted); padding: 0.5em; - &:hover, - &:focus { + &:hover { background-color: var(--pst-color-surface); - border-color: var(--pst-color-primary); + border: 2px solid var(--pst-color-link-hover); + } + &:focus-visible { + border: 2px solid var(--pst-color-accent); } // The keyboard shotcut text diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html index 554166717..01744a812 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html @@ -40,7 +40,7 @@ {% endfor %} {% if not remove_sidebar_secondary %} -