Tweak sidebar, footers, etc.

_static/custom_html.css

@@ -127,6 +127,7 @@ div.sphinxsidebarwrapper div.logo img.logo {
 /* Footer(s) */
 
 div.pre-footer {
+	margin: 20px auto 0 auto;
 	padding: 4px;
 	font-size: 16px;
 	text-align: center;
@@ -137,16 +138,6 @@ div.pre-footer a {
 	color: #444;
 }
 
-div.pre-footer-wide {
-	width: 940px;
-	margin: 20px auto 0 auto;
-}
-
-div.pre-footer-narrow {
-	display: none;
-	margin: 30px auto 0 auto;
-}
-
 /* Fix display on very narrow screens */
 
 div.body {
@@ -168,19 +159,30 @@ div.body {
 		left: -3.2rem;
 	}
 	
-	/* Sidebar text colour */
+	/* Sidebar */
+	
+	div.sphinxsidebar {
+		/* Use alternative way of calculating width/position to avoid white bar at right side */
+		position: absolute;
+		width: 100%;
+		box-sizing: border-box;
+		left: 0;
+		margin-left: 0;
+	}
 	
 	div.sphinxsidebar ul {
 		color: #fff;
 	}
+}
+
+@media screen and (min-width: 875px) {
+	/* Use alternative calculations: fix sidebar display in combination with .nav-page-holder */
 	
-	/* Footer(s) */
-	
-	div.pre-footer-wide {
-		display: none;
-	}
-	div.pre-footer-narrow {
-		display: block;
+	div.sphinxsidebar {
+		position: absolute;
+		top: 30px;
+		left: calc(50% - 470px);
+		margin-left: 0;
 	}
 }
 

potheme_html/layout.html

@@ -3,7 +3,9 @@
 {%- block document %}
       {{ super() }}
       
-      <div class="pre-footer pre-footer-narrow">
+      <div style="clear:both;"></div> {# Fix interaction with floating .sphinxsidebar #}
+      
+      <div class="pre-footer">
         <a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
       </div>
       
@@ -18,10 +20,6 @@
 {%- endblock %}
 
 {%- block footer %}
-    <div class="pre-footer pre-footer-wide">
-      <a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
-    </div>
-    
     <div class="footer">
       Edition {{ release }} | Copyright &copy; {{ copyright }} | <a href="introduction.html#copyright">CC BY-SA 4.0 / GFDL 1.3</a>
       {%- if show_source and has_source and sourcename %}