Serve <div> instead of <aside> to Kindle browser to avoid it rendering as an undismissable popup

This commit is contained in:
Alex Cabal 2022-11-28 13:43:47 -06:00
parent 2eba3974b7
commit 52f47c828b
3 changed files with 34 additions and 24 deletions

View file

@ -1,6 +1,16 @@
<? if($GLOBALS['User'] === null){ ?>
<aside class="donation">
<? if($GLOBALS['User'] === null){
// The Kindle browsers renders <aside> as an undismissable popup. Serve a <div> to Kindle instead. See https://github.com/standardebooks/web/issues/204
$element = 'aside';
if(stripos($_SERVER['HTTP_USER_AGENT'] ?? '', 'kindle') !== false){
$element = 'div';
}
?>
<<?= $element ?> class="donation">
<p>We rely on your support to help us keep producing beautiful, free, and unrestricted editions of literature for the digital age.</p>
<p>Will you <a href="/donate">support our efforts with a donation</a>?</p>
</aside>
</<?= $element ?>>
<? } ?>

View file

@ -2188,8 +2188,8 @@ h1 + ul.message,
text-align: center;
}
aside.donation,
article.ebook section aside.donation{
.donation,
article.ebook section .donation{
position: relative;
border: 1px dashed var(--body-text);
color: var(--body-text);
@ -2205,7 +2205,7 @@ article.ebook section aside.donation{
box-sizing: border-box;
}
aside.donation::before{
.donation::before{
content: "";
display: block;
position: absolute;
@ -2220,7 +2220,7 @@ aside.donation::before{
background: rgba(0, 0, 0, .4);
}
aside.donation::after{
.donation::after{
content: "";
display: block;
position: absolute;
@ -2235,13 +2235,13 @@ aside.donation::after{
background: #dda82a;
}
aside.donation.closable::before,
aside.donation.closable::after{
.donation.closable::before,
.donation.closable::after{
display: none;
}
article.ebook section aside.donation p::before,
article.ebook section aside.donation p::after{
article.ebook section .donation p::before,
article.ebook section .donation p::after{
display: none;
}
@ -3131,22 +3131,22 @@ ul.feed p{
display: none;
}
aside.donation,
article.ebook section aside.donation{
.donation,
article.ebook section .donation{
text-align: justify;
}
aside.donation .flipboard{
.donation .flipboard{
text-align: center;
}
aside.donation .flipboard span{
.donation .flipboard span{
margin-bottom: 1rem;
}
aside.donation p:last-child,
article.ebook section aside.donation p:last-child,
aside.donation header p{
.donation p:last-child,
article.ebook section .donation p:last-child,
.donation header p{
text-align: center;
}
@ -3366,7 +3366,7 @@ ul.feed p{
grid-gap: 2rem;
}
aside.donation .flipboard{
.donation .flipboard{
font-size: 1rem;
}
}

View file

@ -44,13 +44,13 @@ main.front-page > section > h2::after{
border-color: var(--border-light);
}
aside.donation,
article.ebook section aside.donation{
.donation,
article.ebook section .donation{
background: rgba(0, 0, 0, .25);
}
aside.donation,
article.ebook section aside.donation{
.donation,
article.ebook section .donation{
box-shadow: none;
}
@ -88,7 +88,7 @@ aside button.close{
filter: invert(1);
}
aside.donation .flipboard span{
.donation .flipboard span{
border-color: rgba(255,255,255,.5);
box-shadow: none;
}