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

@@ -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
 ^^^^^^^^^^^^^^^

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%;

pydoctor/themes/base/footer.html

@@ -1,7 +1,7 @@
 <footer xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" class="navbar navbar-default">
 
-  <meta name="pydoctor-template-version" content="2" />
-  <div class="container">
+  <meta name="pydoctor-template-version" content="3" />
+  <div class="container-fluid">
     <a href="index.html">API Documentation</a> for <t:slot name="project" />,
   generated by <a href="https://github.com/twisted/pydoctor/">pydoctor</a>
     <t:slot name="pydoctor_version" /> at <t:slot name="buildtime" />.

pydoctor/themes/readthedocs/footer.html

@@ -1,8 +1,8 @@
 <footer xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" class="navbar navbar-default">
     <hr />
-    <meta name="pydoctor-template-version" content="2" />
+    <meta name="pydoctor-template-version" content="3" />
 
-    <div class="container">
+    <div class="container-fluid">
       <a href="index.html">API Documentation</a> for <t:slot name="project" />,
     generated by <a href="https://github.com/twisted/pydoctor/">pydoctor</a>
       <t:slot name="pydoctor_version" /> at <t:slot name="buildtime" />.

pydoctor/themes/readthedocs/readthedocstheme.css

@@ -11,7 +11,32 @@ body {
 }
 
 .container-fluid {
-    max-width: 960px;
+    max-width: 1030px;
+}
+
+body > footer {
+    margin-top: 0px!important;
+    max-width: 1030px;
+    margin-left: 300px!important;
+}
+
+@media only screen and (max-width: 1850px) {
+    .container-fluid {
+        max-width: 980px;
+    }
+    body > footer {
+        max-width: 980px;
+    }
+}
+
+/* For laptop displays */
+@media only screen and (max-width: 1750px) {
+    .container-fluid {
+        max-width: 880px;
+    }
+    body > footer {
+        max-width: 880px;
+    }
 }
 
 body > nav {
@@ -31,20 +56,13 @@ body > nav::-webkit-scrollbar{
     width: 0;
 }
 
-body > div, body > footer {
+body > .container-fluid, body > footer {
     margin-left: 300px!important;
     padding: 0 40px 0 40px;
     background-color: rgb(252, 252, 252)!important;
     width: calc(100% - 380px)!important;
 }
 
-body > footer {
-    /* border-top: 1px solid rgb(210, 220, 216); */
-    margin-top: 0px!important;
-    max-width: 960px;
-    margin-left: 300px!important;
-}
-
 body > footer > hr {
     border: 0;
     border-bottom: 1px solid rgb(210, 220, 216);
@@ -667,7 +685,7 @@ nav.sidebar > div:nth-child(1) li li .tocChildrenToggle:checked ~ .expandableCon
         width: auto!important;
     }
 
-    body > div, body > footer {
+    body > .container-fluid, body > footer {
         margin-left: 0!important;
         width: auto!important;
         padding: 5px 15px 5px 15px;