Fix display of promotional footer on narrow screens

This commit is contained in:
RunasSudo 2021-02-23 22:32:32 +11:00
parent 75e1e55da2
commit 13a4fe2c89
Signed by: RunasSudo
GPG Key ID: 7234E476BF21C61A
2 changed files with 31 additions and 8 deletions

View File

@ -80,11 +80,9 @@ div.sphinxsidebarwrapper div.logo img.logo {
max-height: 10em; max-height: 10em;
} }
/* Footer */ /* Footer(s) */
div.pre-footer { div.pre-footer {
width: 940px;
margin: 20px auto 0 auto;
padding: 4px; padding: 4px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
@ -95,9 +93,19 @@ div.pre-footer a {
color: #444; color: #444;
} }
div.pre-footer-wide {
width: 940px;
margin: 20px auto 0 auto;
}
div.pre-footer-narrow {
display: none;
margin: 30px auto 0 auto;
}
/* Media queries */ /* Media queries */
@media screen and (max-width: 870px) { @media screen and (max-width: 875px) {
/* Override narrow window list formatting */ /* Override narrow window list formatting */
ul { ul {
@ -109,12 +117,19 @@ div.pre-footer a {
span.paragraph-num { span.paragraph-num {
left: -3.2rem; left: -3.2rem;
} }
}
@media screen and (max-width: 875px) {
/* Sidebar text colour */ /* Sidebar text colour */
div.sphinxsidebar ul { div.sphinxsidebar ul {
color: #fff; color: #fff;
} }
/* Footer(s) */
div.pre-footer-wide {
display: none;
}
div.pre-footer-narrow {
display: block;
}
} }

View File

@ -1,7 +1,15 @@
{%- extends "alabaster/layout.html" %} {%- extends "alabaster/layout.html" %}
{%- block document %}
{{ super() }}
<div class="pre-footer pre-footer-narrow">
<a href="https://gumroad.com/l/KErDHC">Buy the ebook: Pay what you want</a>
</div>
{%- endblock %}
{%- block footer %} {%- block footer %}
<div class="pre-footer"> <div class="pre-footer pre-footer-wide">
<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>