Add previous/next navigation buttons to HTML reader

_static/custom_html.css

@@ -100,6 +100,30 @@ div.sphinxsidebarwrapper div.logo img.logo {
 	max-height: 10em;
 }
 
+/* Navigation */
+
+.nav-page-prev, .nav-page-next {
+	color: #888;
+	text-decoration: none;
+	
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+}
+
+.nav-page-prev .arrow, .nav-page-next .arrow {
+	font-size: 3rem;
+}
+
+.nav-page-prev:hover, .nav-page-next:hover {
+	background-color: #f6f6f6;
+	
+	color: #444;
+	text-decoration: none;
+}
+
 /* Footer(s) */
 
 div.pre-footer {
@@ -159,3 +183,52 @@ div.body {
 		display: block;
 	}
 }
+
+@media screen and (max-width: 1275px) {
+	/* Navigation */
+	
+	.nav-page-prev, .nav-page-next {
+		padding-bottom: 1em;
+		width: 50%;
+		max-width: 150px;
+	}
+	
+	.nav-page-prev {
+		float: left;
+	}
+	
+	.nav-page-next {
+		float: right;
+	}
+	
+	.nav-page-holder {
+		margin-top: 30px;
+	}
+	
+	.nav-page-holder::after {
+		content: "";
+		display: block;
+		clear: both;
+	}
+}
+
+@media screen and (min-width: 1275px) {
+	/* Navigation */
+	
+	.nav-page-prev, .nav-page-next {
+		position: fixed;
+		top: 0;
+		height: 100vh;
+		width: 150px;
+	}
+	
+	.nav-page-prev {
+		left: 0;
+		margin-right: 50px;
+	}
+	
+	.nav-page-next {
+		right: 0;
+		margin-left: 50px;
+	}
+}

potheme_html/layout.html

@@ -6,6 +6,15 @@
       <div class="pre-footer pre-footer-narrow">
         <a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
       </div>
+      
+      <div class="nav-page-holder">
+        {%- if prev %}
+        <a href="{{ prev.link|e }}" class="nav-page-prev"><span class="arrow">&lsaquo;</span><span>Prev</span></a>
+        {%- endif %}
+        {%- if next %}
+        <a href="{{ next.link|e }}" class="nav-page-next"><span class="arrow">&rsaquo;</span><span>Next</span></a>
+        {%- endif %}
+      </div>
 {%- endblock %}
 
 {%- block footer %}