From 52f47c828bf4e8b55bad86cbd5520fe5517a9653 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Mon, 28 Nov 2022 13:43:47 -0600
Subject: [PATCH] Serve <div> instead of <aside> to Kindle browser to avoid it
 rendering as an undismissable popup

---
 templates/DonationAlert.php | 16 +++++++++++++---
 www/css/core.css            | 32 ++++++++++++++++----------------
 www/css/dark.css            | 10 +++++-----
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/templates/DonationAlert.php b/templates/DonationAlert.php
index ea96143b..e14cc840 100644
--- a/templates/DonationAlert.php
+++ b/templates/DonationAlert.php
@@ -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 ?>>
+
 <? } ?>
diff --git a/www/css/core.css b/www/css/core.css
index 51754a59..b720722f 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -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;
 	}
 }
diff --git a/www/css/dark.css b/www/css/dark.css
index 2e9098a6..8e4f12cc 100644
--- a/www/css/dark.css
+++ b/www/css/dark.css
@@ -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;
 }