From 282909ef6a9521ce0dc3953087c023d19f0213d2 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Mon, 11 Jul 2022 10:42:25 -0500
Subject: [PATCH] Add captions to hero images

---
 www/bulk-downloads/index.php         |  2 +-
 www/css/core.css                     | 27 +++++++++++++++++++++++++++
 www/donate/index.php                 |  6 +++---
 www/feeds/index.php                  |  2 +-
 www/newsletter/subscriptions/new.php |  2 +-
 www/polls/index.php                  |  2 +-
 6 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/www/bulk-downloads/index.php b/www/bulk-downloads/index.php
index cb969fdd..08e41470 100644
--- a/www/bulk-downloads/index.php
+++ b/www/bulk-downloads/index.php
@@ -10,7 +10,7 @@ if($GLOBALS['User'] !== null && $GLOBALS['User']->Benefits->CanBulkDownload){
 <main>
 	<section class="narrow has-hero">
 		<h1>Bulk Ebook Downloads</h1>
-		<picture>
+		<picture data-caption="The Shop of the Bookdealer Pieter Meijer Warnars. Johannes Jelgerhuis, 1820">
 			<source srcset="/images/the-shop-of-the-bookdealer@2x.avif 2x, /images/the-shop-of-the-bookdealer.avif 1x" type="image/avif"/>
 			<source srcset="/images/the-shop-of-the-bookdealer@2x.jpg 2x, /images/the-shop-of-the-bookdealer.jpg 1x" type="image/jpg"/>
 			<img src="/images/the-shop-of-the-bookdealer@2x.jpg" alt="A gentleman in regency-era dress buys books from a bookseller."/>
diff --git a/www/css/core.css b/www/css/core.css
index a1a65eeb..d57cc134 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -255,6 +255,33 @@ main > section.narrow.has-hero > picture{
 	max-width: none;
 }
 
+main > section.narrow.has-hero > picture{
+	position: relative;
+	width: auto;
+}
+
+picture[data-caption]:hover::before{
+	opacity: 1;
+	transition: none;
+}
+
+picture[data-caption]::before{
+	transition: all .25s;
+	opacity: 0;
+	position: absolute;
+	right: .25rem;
+	bottom: .25rem;
+	content: attr(data-caption);
+	display: block;
+	background: rgba(0, 0, 0, .5);
+	color: #fff;
+	text-shadow: 1px 1px 0 solid #222;
+	font-size: .6rem;
+	padding: .25rem .5rem;
+	font-style: italic;
+	border-radius: .25rem;
+}
+
 main > section.narrow > *,
 main > article > *{
 	width: 100%;
diff --git a/www/donate/index.php b/www/donate/index.php
index e89a7aa1..a62487ea 100644
--- a/www/donate/index.php
+++ b/www/donate/index.php
@@ -2,14 +2,14 @@
 require_once('Core.php');
 ?><?= Template::Header(['title' => 'Donate', 'highlight' => 'donate', 'description' => 'Donate to Standard Ebooks.']) ?>
 <main>
-	<article class="donate has-hero">
+	<section class="donate narrow has-hero">
 		<hgroup>
 			<h1>Donate to Standard Ebooks</h1>
 			<h2>and help bring the beauty of literature to the digital age</h2>
 		</hgroup>
 		<?= Template::DonationCounter(['autoHide' => false, 'showDonateButton' => false]) ?>
 		<?= Template::DonationProgress(['autoHide' => false, 'showDonateButton' => false]) ?>
-		<picture>
+		<picture data-caption="The Quiet Hour. Albert Chevallier Tayler, 1925">
 			<source srcset="/images/the-quiet-hour@2x.avif 2x, /images/the-quiet-hour.avif 1x" type="image/avif"/>
 			<source srcset="/images/the-quiet-hour@2x.jpg 2x, /images/the-quiet-hour.jpg 1x" type="image/jpg"/>
 			<img src="/images/the-quiet-hour@2x.jpg" alt="An oil painting of a women reading a book by a writing desk at twilight."/>
@@ -154,6 +154,6 @@ require_once('Core.php');
 		<aside>
 			<p>Standard Ebooks is a sponsored project of <a href="https://www.fracturedatlas.org/">Fractured Atlas</a>, a non-profit arts service organization. Contributions for the charitable purposes of Standard Ebooks must be made payable to “Fractured Atlas” only and are tax-deductible to the extent permitted by law.</p>
 		</aside>
-	</article>
+	</section>
 </main>
 <?= Template::Footer() ?>
diff --git a/www/feeds/index.php b/www/feeds/index.php
index 7bc2dc33..3805b85c 100644
--- a/www/feeds/index.php
+++ b/www/feeds/index.php
@@ -5,7 +5,7 @@ require_once('Core.php');
 <main>
 	<section class="narrow has-hero">
 		<h1>Ebook Feeds</h1>
-		<picture>
+		<picture data-caption="New York Daily News. William Michael Harnett, 1888">
 			<source srcset="/images/new-york-daily-news@2x.avif 2x, /images/new-york-daily-news.avif 1x" type="image/avif"/>
 			<source srcset="/images/new-york-daily-news@2x.jpg 2x, /images/new-york-daily-news.jpg 1x" type="image/jpg"/>
 			<img src="/images/new-york-daily-news@2x.jpg" alt="A mug next to a pipe and a newspaper."/>
diff --git a/www/newsletter/subscriptions/new.php b/www/newsletter/subscriptions/new.php
index 244ec3ed..db458cc1 100644
--- a/www/newsletter/subscriptions/new.php
+++ b/www/newsletter/subscriptions/new.php
@@ -20,7 +20,7 @@ if($exception){
 			<h1>Subscribe to the Newsletter</h1>
 			<h2>to receive missives from the vanguard of digital literature</h2>
 		</hgroup>
-		<picture>
+		<picture data-caption="The Newsletter. William John Wainwright, 1888">
 			<source srcset="/images/the-newsletter@2x.avif 2x, /images/the-newsletter.avif 1x" type="image/avif"/>
 			<source srcset="/images/the-newsletter@2x.jpg 2x, /images/the-newsletter.jpg 1x" type="image/jpg"/>
 			<img src="/images/the-newsletter@2x.jpg" alt="An old man in Renaissance-era costume reading a sheet of paper."/>
diff --git a/www/polls/index.php b/www/polls/index.php
index 040d9d65..b0c3e1b4 100644
--- a/www/polls/index.php
+++ b/www/polls/index.php
@@ -12,7 +12,7 @@ $openPolls = Db::Query('select * from Polls where (End is null or utc_timestamp(
 			<h1>Vote in Our Polls</h1>
 			<h2>and decide the direction of the Standard Ebooks catalog</h2>
 		</hgroup>
-		<picture>
+		<picture data-caption="County Election. John Sartain after George Caleb Bingham, 1854">
 			<source srcset="/images/county-election@2x.avif 2x, /images/county-election.avif 1x" type="image/avif"/>
 			<source srcset="/images/county-election@2x.jpg 2x, /images/county-election.jpg 1x" type="image/jpg"/>
 			<img src="/images/county-election@2x.jpg" alt="Voters step up to cast votes in a county poll."/>