Add 3D book figure to ebook download pages

This commit is contained in:
Alex Cabal 2022-01-23 11:41:05 -06:00
parent 74d3272c37
commit 864d6836d3
3 changed files with 281 additions and 66 deletions

View file

@ -2061,6 +2061,141 @@ abbr.acronym{
font-variant: all-small-caps; font-variant: all-small-caps;
} }
.downloads-container{
display: flex;
}
.downloads-container figure + div{
padding-left: 1rem;
}
.ebook figure.small{
--size: 1rem;
}
.ebook figure,
.ebook figure.medium{
--size: 1.5rem;
}
.ebook figure.large{
--size: 2rem;
margin-top: 2rem;
}
.ebook figure.xlarge{
--size: 2.5rem;
margin-top: 2rem;
}
.ebook figure.xxlarge{
--size: 3rem;
margin-top: 2rem;
}
.ebook figure{
transform: skewY(-10deg) scale(.75);
font-size: 0;
width: 242px;
box-sizing: border-box;
margin-left: -2rem;
align-self: flex-start;
}
.ebook figure img{ /* cover */
/* override previous cascade */
width: auto;
border-radius: 0 3px 3px 0;
border: 2px solid #222;
border-left: none;
transition: transform .5s, filter .5s;
}
.ebook figure .spine{ /* spine */
content: '';
position: absolute;
width: var(--size);
height: 100%;
top: 0;
left: calc(-1 * var(--size));
background: #222;
transform-origin: right;
transform: skewY(45deg);
z-index: -1;
transition: transform .5s;
}
.ebook figure .spine::before{ /* spine logo */
content: '';
filter: invert(100%);
background: no-repeat center/calc(var(--size) - .5rem) var(--size) url('/images/logo-small.svg');
top: calc(50% - (2rem / 2));
position: absolute;
height: calc(var(--size) + .5rem);
width: var(--size);
}
.ebook figure .spine::after{ /* pages */
content: '';
position: absolute;
width: var(--size);
height: 235px;
background: url('/images/pages-texture.svg') #efefef;
background-size: .5rem; /* needed to prevent visual glitch in FF */
top: -234px;
left: 0;
transform-origin: bottom;
transform: skewX(-45deg);
border-left: 1px solid #222;
transition: none; /* prevent animation on load */
}
.ebook figure::after{ /* back board */
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #222;
top: 0;
left: calc(-1 * var(--size));
transform: translateY(calc(-1 * var(--size)));
z-index: -2;
border-top-right-radius: 3px;
transition: transform .5s;
}
.ebook figure::before{ /* shadow */
content: '';
background: rgba(0, 0, 0, .5);
position: absolute;
top: calc(353px - var(--size));
left: calc(-1 * var(--size));
height: calc(1.25rem + var(--size));
width: calc(100% + var(--size) + .25rem);
transform: skewX(45deg);
filter: blur(10px);
z-index: -1;
border-radius: 2rem;
transition: transform .5s;
}
.ebook .downloads-container:hover figure img{
filter: brightness(1.15);
transform: translateY(-.5rem);
}
.ebook .downloads-container:hover figure::after{
transform: translateY(calc(-1 * (var(--size) + .5rem)));
}
.ebook .downloads-container:hover figure .spine{
transform: skewY(45deg) translateY(-.5rem);
}
.ebook .downloads-container:hover figure::before{
transform: skewX(45deg) scale(1.05);
}
@media (hover: none) and (pointer: coarse){ /* target ipads and smartphones without a mouse */ @media (hover: none) and (pointer: coarse){ /* target ipads and smartphones without a mouse */
/* For iPad, unset the height so it matches the other elements */ /* For iPad, unset the height so it matches the other elements */
select[multiple]{ select[multiple]{
@ -2215,6 +2350,21 @@ abbr.acronym{
margin-left: 2rem; margin-left: 2rem;
padding-top: 0; padding-top: 0;
} }
.ebook figure{
transform: skewY(-10deg) scale(.5);
margin-top: -1rem;
}
.ebook figure.large,
.ebook figure.xlarge,
.ebook figure.xxlarge{
margin-top: 0;
}
.downloads-container figure + div{
padding-left: 0;
}
} }
@media(max-width: 900px){ @media(max-width: 900px){
@ -2396,6 +2546,12 @@ abbr.acronym{
} }
} }
@media(max-width: 580px){
.ebook figure{
display: none;
}
}
@media(max-width: 550px){ @media(max-width: 550px){
form[action="/ebooks"]{ form[action="/ebooks"]{
grid-template-columns: auto auto 1fr; grid-template-columns: auto auto 1fr;
@ -2685,7 +2841,27 @@ abbr.acronym{
input[type="search"]:focus, input[type="search"]:focus,
input[type="search"]:hover, input[type="search"]:hover,
select:focus, select:focus,
select:hover{ select:hover,
.ebook figure::before,
.ebook figure::after,
.ebook figure img,
.ebook figure .spine{
transition: none; transition: none;
} }
.ebook .downloads-container:hover figure img{
transform: none;
}
.ebook .downloads-container:hover figure::after{
transform: translateY(-1.5rem);
}
.ebook .downloads-container:hover figure .spine{
transform: skewY(45deg);
}
.ebook .downloads-container:hover figure::before{
transform: skewX(45deg);
}
} }

View file

@ -99,10 +99,11 @@ catch(InvalidEbookException $ex){
<picture> <picture>
<? if($ebook->HeroImage2xAvifUrl !== null){ ?><source srcset="<?= $ebook->HeroImage2xAvifUrl ?> 2x, <?= $ebook->HeroImageAvifUrl ?> 1x" type="image/avif"/><? } ?> <? if($ebook->HeroImage2xAvifUrl !== null){ ?><source srcset="<?= $ebook->HeroImage2xAvifUrl ?> 2x, <?= $ebook->HeroImageAvifUrl ?> 1x" type="image/avif"/><? } ?>
<source srcset="<?= $ebook->HeroImage2xUrl ?> 2x, <?= $ebook->HeroImageUrl ?> 1x" type="image/jpg"/> <source srcset="<?= $ebook->HeroImage2xUrl ?> 2x, <?= $ebook->HeroImageUrl ?> 1x" type="image/jpg"/>
<img src="<?= $ebook->HeroImage2xUrl ?>" role="presentation" alt="" height="439" width="1318" /> <img src="<?= $ebook->HeroImage2xUrl ?>" alt="" height="439" width="1318" />
</picture> </picture>
</header> </header>
<aside id="reading-ease"> <aside id="reading-ease">
<p><?= number_format($ebook->WordCount) ?> words (<?= $ebook->ReadingTime ?>) with a reading ease of <?= $ebook->ReadingEase ?> (<?= $ebook->ReadingEaseDescription ?>)</p> <p><?= number_format($ebook->WordCount) ?> words (<?= $ebook->ReadingTime ?>) with a reading ease of <?= $ebook->ReadingEase ?> (<?= $ebook->ReadingEaseDescription ?>)</p>
<? if($ebook->ContributorsHtml !== null){ ?> <? if($ebook->ContributorsHtml !== null){ ?>
@ -171,74 +172,87 @@ catch(InvalidEbookException $ex){
<?= $ebook->GenerateContributorsRdfa() ?> <?= $ebook->GenerateContributorsRdfa() ?>
<h2>Read free</h2> <h2>Read free</h2>
<p class="us-pd-warning">This ebook is only thought to be free of copyright restrictions in the United States. It may still be under copyright in other countries. If youre not located in the United States, you must check your local laws to verify that the contents of this ebook are free of copyright restrictions in the country youre located in before downloading or using this ebook.</p> <p class="us-pd-warning">This ebook is only thought to be free of copyright restrictions in the United States. It may still be under copyright in other countries. If youre not located in the United States, you must check your local laws to verify that the contents of this ebook are free of copyright restrictions in the country youre located in before downloading or using this ebook.</p>
<section id="download">
<h3>Download for ereaders</h3>
<ul>
<? /* Leave the @download attribute empty to have the browser use the target filename in the save-as dialog */ ?>
<? if($ebook->EpubUrl !== null){ ?>
<li property="schema:encoding" typeof="schema:MediaObject">
<meta property="schema:description" content="epub"/>
<meta property="schema:encodingFormat" content="application/epub+zip"/>
<p>
<span><a property="schema:contentUrl" href="<?= $ebook->EpubUrl ?>" class="epub" download="">Compatible epub</a></span> <span></span> <span>All devices and apps except Kindles and Kobos.</span>
</p>
</li>
<? } ?>
<? if($ebook->Azw3Url !== null){ ?> <div class="downloads-container">
<li property="schema:encoding" typeof="schema:MediaObject"> <figure class="<? if($ebook->WordCount < 100000){ ?>small<? }elseif($ebook->WordCount >= 100000 && $ebook->WordCount < 200000){ ?>medium<? }elseif($ebook->WordCount >= 200000 && $ebook->WordCount <= 300000){ ?>large<? }elseif($ebook->WordCount >= 300000 && $ebook->WordCount < 400000){ ?>xlarge<? }elseif($ebook->WordCount >= 400000){ ?>xxlarge<? } ?>">
<meta property="schema:encodingFormat" content="application/x-mobipocket-ebook"/> <picture>
<p> <source srcset="<?= $ebook->CoverImage2xAvifUrl ?> 2x, <?= $ebook->CoverImageAvifUrl ?> 1x" type="image/avif"/>
<span><a property="schema:contentUrl" href="<?= $ebook->Azw3Url ?>" class="amazon" download=""><span property="schema:description">azw3</span></a></span> <span></span> <span>Kindle devices and apps.<? if($ebook->KindleCoverUrl !== null){ ?> Also download the <a href="<?= $ebook->KindleCoverUrl ?>">Kindle cover thumbnail</a> to see the cover in your Kindles library. You may be interested in our <a href="/help/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? }else{ ?> Also see our <a href="/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? } ?></span> <source srcset="<?= $ebook->CoverImage2xUrl ?> 2x, <?= $ebook->CoverImageUrl ?> 1x" type="image/jpg"/>
</p> <img src="<?= $ebook->CoverImageUrl ?>" alt="" height="363" width="242"/>
</li> </picture>
<? } ?> <div class="spine" />
</figure>
<div>
<section id="download">
<h3>Download for ereaders</h3>
<ul>
<? /* Leave the @download attribute empty to have the browser use the target filename in the save-as dialog */ ?>
<? if($ebook->EpubUrl !== null){ ?>
<li property="schema:encoding" typeof="schema:MediaObject">
<meta property="schema:description" content="epub"/>
<meta property="schema:encodingFormat" content="application/epub+zip"/>
<p>
<span><a property="schema:contentUrl" href="<?= $ebook->EpubUrl ?>" class="epub" download="">Compatible epub</a></span> <span></span> <span>All devices and apps except Kindles and Kobos.</span>
</p>
</li>
<? } ?>
<? if($ebook->KepubUrl !== null){ ?> <? if($ebook->Azw3Url !== null){ ?>
<li property="schema:encoding" typeof="schema:MediaObject"> <li property="schema:encoding" typeof="schema:MediaObject">
<meta property="schema:encodingFormat" content="application/kepub+zip"/> <meta property="schema:encodingFormat" content="application/x-mobipocket-ebook"/>
<p> <p>
<span><a property="schema:contentUrl" href="<?= $ebook->KepubUrl ?>" class="kobo" download=""><span property="schema:description">kepub</span></a></span> <span></span> <span>Kobo devices and apps.</span> <span><a property="schema:contentUrl" href="<?= $ebook->Azw3Url ?>" class="amazon" download=""><span property="schema:description">azw3</span></a></span> <span></span> <span>Kindle devices and apps.<? if($ebook->KindleCoverUrl !== null){ ?> Also download the <a href="<?= $ebook->KindleCoverUrl ?>">Kindle cover thumbnail</a> to see the cover in your Kindles library. You may be interested in our <a href="/help/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? }else{ ?> Also see our <a href="/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? } ?></span>
</p> </p>
</li> </li>
<? } ?> <? } ?>
<? if($ebook->AdvancedEpubUrl !== null){ ?> <? if($ebook->KepubUrl !== null){ ?>
<li property="schema:encoding" typeof="schema:MediaObject"> <li property="schema:encoding" typeof="schema:MediaObject">
<meta property="schema:encodingFormat" content="application/epub+zip"/> <meta property="schema:encodingFormat" content="application/kepub+zip"/>
<p> <p>
<span><a property="schema:contentUrl" href="<?= $ebook->AdvancedEpubUrl ?>" class="epub" download=""><span property="schema:description">Advanced epub</span></a></span> <span></span> <span>An advanced format that uses the latest technology not yet fully supported by most ereaders.</span> <span><a property="schema:contentUrl" href="<?= $ebook->KepubUrl ?>" class="kobo" download=""><span property="schema:description">kepub</span></a></span> <span></span> <span>Kobo devices and apps.</span>
</p> </p>
</li> </li>
<? } ?>
<? if($ebook->AdvancedEpubUrl !== null){ ?>
<li property="schema:encoding" typeof="schema:MediaObject">
<meta property="schema:encodingFormat" content="application/epub+zip"/>
<p>
<span><a property="schema:contentUrl" href="<?= $ebook->AdvancedEpubUrl ?>" class="epub" download=""><span property="schema:description">Advanced epub</span></a></span> <span></span> <span>An advanced format that uses the latest technology not yet fully supported by most ereaders.</span>
</p>
</li>
<? } ?>
</ul>
<aside>
<p>Read about <a href="/help/how-to-use-our-ebooks#which-file-to-download">which file to download</a> and <a href="/help/how-to-use-our-ebooks#transferring-to-your-ereader">how to transfer them to your ereader</a>.</p>
</aside>
</section>
<? if($ebook->TextUrl !== null || $ebook->TextSinglePageUrl !== null){ ?>
<section id="read-online">
<h3>Read online</h3>
<ul>
<? if($ebook->TextUrl !== null){ ?>
<li>
<p>
<a href="<?= $ebook->TextUrl ?>" class="list">Start from the table of contents</a>
</p>
</li>
<? } ?>
<? if($ebook->TextSinglePageUrl !== null){ ?>
<li property="schema:encoding" typeof="schema:mediaObject">
<meta property="schema:description" content="XHTML"/>
<meta property="schema:encodingFormat" content="application/xhtml+xml"/>
<p>
<a property="schema:contentUrl" href="<?= $ebook->TextSinglePageUrl ?>" class="page">Read on one page</a>
</p>
</li>
<? } ?>
</ul>
</section>
<? } ?> <? } ?>
</ul> </div>
<aside> </div>
<p>Read about <a href="/help/how-to-use-our-ebooks#which-file-to-download">which file to download</a> and <a href="/help/how-to-use-our-ebooks#transferring-to-your-ereader">how to transfer them to your ereader</a>.</p>
</aside>
</section>
<? if($ebook->TextUrl !== null || $ebook->TextSinglePageUrl !== null){ ?>
<section id="read-online">
<h3>Read online</h3>
<ul>
<? if($ebook->TextUrl !== null){ ?>
<li>
<p>
<a href="<?= $ebook->TextUrl ?>" class="list">Start from the table of contents</a>
</p>
</li>
<? } ?>
<? if($ebook->TextSinglePageUrl !== null){ ?>
<li property="schema:encoding" typeof="schema:mediaObject">
<meta property="schema:description" content="XHTML"/>
<meta property="schema:encodingFormat" content="application/xhtml+xml"/>
<p>
<a property="schema:contentUrl" href="<?= $ebook->TextSinglePageUrl ?>" class="page">Read on one page</a>
</p>
</li>
<? } ?>
</ul>
</section>
<? } ?>
</section> </section>
<? } ?> <? } ?>

View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="8"
height="10"
viewBox="0 0 8 10"
version="1.1"
id="svg821"
xmlns="http://www.w3.org/2000/svg"
>
<path
style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.5,0 V 10"
/>
<path
style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 2.5,1.4e-4 v 10"
/>
<path
style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 6.5000001,0 V 10"
/>
<path
style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 0.5,0 V 10"/>
</svg>

After

Width:  |  Height:  |  Size: 993 B