Add previous/next navigation buttons to HTML reader

This commit is contained in:
RunasSudo 2021-02-24 22:32:22 +11:00
parent 21d2e9e5c4
commit ffc33eb8bb
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 82 additions and 0 deletions

View File

@ -100,6 +100,30 @@ div.sphinxsidebarwrapper div.logo img.logo {
max-height: 10em; 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) */ /* Footer(s) */
div.pre-footer { div.pre-footer {
@ -159,3 +183,52 @@ div.body {
display: block; 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;
}
}

View File

@ -6,6 +6,15 @@
<div class="pre-footer pre-footer-narrow"> <div class="pre-footer pre-footer-narrow">
<a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a> <a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
</div> </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 %} {%- endblock %}
{%- block footer %} {%- block footer %}