mirror of
https://github.com/standardebooks/web.git
synced 2025-07-08 07:40:39 -04:00
Add 3D book figure to ebook download pages
This commit is contained in:
parent
74d3272c37
commit
864d6836d3
3 changed files with 281 additions and 66 deletions
178
www/css/core.css
178
www/css/core.css
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 you’re 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 you’re 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 you’re 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 you’re 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 Kindle’s 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 Kindle’s 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>
|
||||||
<? } ?>
|
<? } ?>
|
||||||
|
|
||||||
|
|
25
www/images/pages-texture.svg
Normal file
25
www/images/pages-texture.svg
Normal 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 |
Loading…
Add table
Add a link
Reference in a new issue