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:
Alex Cabal
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,6 +172,17 @@ 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>
|
||||||
|
|
||||||
|
<div class="downloads-container">
|
||||||
|
<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<? } ?>">
|
||||||
|
<picture>
|
||||||
|
<source srcset="<?= $ebook->CoverImage2xAvifUrl ?> 2x, <?= $ebook->CoverImageAvifUrl ?> 1x" type="image/avif"/>
|
||||||
|
<source srcset="<?= $ebook->CoverImage2xUrl ?> 2x, <?= $ebook->CoverImageUrl ?> 1x" type="image/jpg"/>
|
||||||
|
<img src="<?= $ebook->CoverImageUrl ?>" alt="" height="363" width="242"/>
|
||||||
|
</picture>
|
||||||
|
<div class="spine" />
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
<section id="download">
|
<section id="download">
|
||||||
<h3>Download for ereaders</h3>
|
<h3>Download for ereaders</h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -239,6 +251,8 @@ catch(InvalidEbookException $ex){
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<? } ?>
|
<? } ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</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