standardebooks/web
1
0
Fork 0
mirror of https://github.com/standardebooks/web.git synced 2025-07-14 10:31:59 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add captions to hero images

Browse source
This commit is contained in:
Alex Cabal 2022-07-11 10:42:25 -05:00
parent 9a72b27233
commit 282909ef6a
6 changed files with 34 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
www/bulk-downloads/index.php
View file

@ -10,7 +10,7 @@ if($GLOBALS['User'] !== null && $GLOBALS['User']->Benefits->CanBulkDownload){
<main> <main>
<section class="narrow has-hero"> <section class="narrow has-hero">
<h1>Bulk Ebook Downloads</h1> <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.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"/> <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."/> <img src="/images/the-shop-of-the-bookdealer@2x.jpg" alt="A gentleman in regency-era dress buys books from a bookseller."/>

27
www/css/core.css
View file

@ -255,6 +255,33 @@ main > section.narrow.has-hero > picture{
max-width: none; 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 > section.narrow > *,
main > article > *{ main > article > *{
width: 100%; width: 100%;

6
www/donate/index.php
View file

@ -2,14 +2,14 @@
require_once('Core.php'); require_once('Core.php');
?><?= Template::Header(['title' => 'Donate', 'highlight' => 'donate', 'description' => 'Donate to Standard Ebooks.']) ?> ?><?= Template::Header(['title' => 'Donate', 'highlight' => 'donate', 'description' => 'Donate to Standard Ebooks.']) ?>
<main> <main>
<article class="donate has-hero"> <section class="donate narrow has-hero">
<hgroup> <hgroup>
<h1>Donate to Standard Ebooks</h1> <h1>Donate to Standard Ebooks</h1>
<h2>and help bring the beauty of literature to the digital age</h2> <h2>and help bring the beauty of literature to the digital age</h2>
</hgroup> </hgroup>
<?= Template::DonationCounter(['autoHide' => false, 'showDonateButton' => false]) ?> <?= Template::DonationCounter(['autoHide' => false, 'showDonateButton' => false]) ?>
<?= Template::DonationProgress(['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.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"/> <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."/> <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> <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> <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> </aside>
</article> </section>
</main> </main>
<?= Template::Footer() ?> <?= Template::Footer() ?>

2
www/feeds/index.php
View file

@ -5,7 +5,7 @@ require_once('Core.php');
<main> <main>
<section class="narrow has-hero"> <section class="narrow has-hero">
<h1>Ebook Feeds</h1> <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.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"/> <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."/> <img src="/images/new-york-daily-news@2x.jpg" alt="A mug next to a pipe and a newspaper."/>

2
www/newsletter/subscriptions/new.php
View file

@ -20,7 +20,7 @@ if($exception){
<h1>Subscribe to the Newsletter</h1> <h1>Subscribe to the Newsletter</h1>
<h2>to receive missives from the vanguard of digital literature</h2> <h2>to receive missives from the vanguard of digital literature</h2>
</hgroup> </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.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"/> <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."/> <img src="/images/the-newsletter@2x.jpg" alt="An old man in Renaissance-era costume reading a sheet of paper."/>

2
www/polls/index.php
View file

@ -12,7 +12,7 @@ $openPolls = Db::Query('select * from Polls where (End is null or utc_timestamp(
<h1>Vote in Our Polls</h1> <h1>Vote in Our Polls</h1>
<h2>and decide the direction of the Standard Ebooks catalog</h2> <h2>and decide the direction of the Standard Ebooks catalog</h2>
</hgroup> </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.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"/> <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."/> <img src="/images/county-election@2x.jpg" alt="Voters step up to cast votes in a county poll."/>