From bc101b444ef1d70c5e9ba762444f56597909edb5 Mon Sep 17 00:00:00 2001 From: tristanlatr <19967168+tristanlatr@users.noreply.github.com> Date: Fri, 25 Oct 2024 19:17:27 -0400 Subject: [PATCH] Adjust CSS for adds injected by ReadTheDocs (#829) * Fix #828 * Change the base theme to be aligned with the left of page. This improve the UX (because the main div is somewhat more in the middle of the screen because the sidebar takes the left side of the screen) as well as give more chances to the reader not to be bothered by the overlapping readthedocs add that is injected at a fixed point bottom right of the screen. * Makes the main div of the readthedocs theme slightly more thin as well. * Give the themes more flexibility with medium and large screens. The main div width is adjusted up to a certain point. --- README.rst | 4 +- pydoctor/themes/base/apidocs.css | 18 ++++++++- pydoctor/themes/base/footer.html | 4 +- pydoctor/themes/readthedocs/footer.html | 4 +- .../themes/readthedocs/readthedocstheme.css | 38 ++++++++++++++----- 5 files changed, 50 insertions(+), 18 deletions(-) diff --git a/README.rst b/README.rst index bdd799947..680679920 100644 --- a/README.rst +++ b/README.rst @@ -89,8 +89,8 @@ in development Pydoctor should now run on windows without the need to be administrator. * Adjust the sphinx extension to support Sphinx 8.1. The entries dynamically added to the intersphinx config from the ``pydoctor_url_path`` config option now includes a project name which defaults to 'main' (instead of putting None), - use mapping instead of a list define your own project name. - + use mapping instead of a list to define your own project name. +* Improve the themes so the adds injected by ReadTheDocs are rendered with the correct width and do not overlap too much with the main content. pydoctor 24.3.3 ^^^^^^^^^^^^^^^ diff --git a/pydoctor/themes/base/apidocs.css b/pydoctor/themes/base/apidocs.css index 537c3ba5c..98d734d3c 100644 --- a/pydoctor/themes/base/apidocs.css +++ b/pydoctor/themes/base/apidocs.css @@ -5,11 +5,25 @@ body { overflow-y: scroll; } -.container-fluid{ - max-width: 1380px; +.container-fluid { + max-width: 1400px; width: 100%; flex: auto; + margin-left: 0; +} + +/* For laptop displays */ +@media only screen and (max-width: 1850px) { + .container-fluid { + max-width: 1350px; + } } +@media only screen and (max-width: 1750px) { + .container-fluid { + max-width: 1250px; + } +} + nav.navbar { width:100%; diff --git a/pydoctor/themes/base/footer.html b/pydoctor/themes/base/footer.html index 45a5acd95..76e92babd 100644 --- a/pydoctor/themes/base/footer.html +++ b/pydoctor/themes/base/footer.html @@ -1,7 +1,7 @@