118 lines
2.4 KiB
CSS
118 lines
2.4 KiB
CSS
:root{
|
|
--bleed-images: 3mm;
|
|
--pagedjs-fold: 0px;
|
|
}
|
|
|
|
.pagedjs_portfolio_page .pagedjs_sheet{
|
|
overflow: visible !important;
|
|
}
|
|
|
|
[data-chapter="portfolio"] p{
|
|
color: #FFF;
|
|
}
|
|
|
|
.pagedjs_portfolio_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after,
|
|
.pagedjs_portfolio_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after{
|
|
background-color: black;
|
|
color: white;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* ------ DOUBLE PAGE ------- */
|
|
|
|
.spread{
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
|
|
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
|
|
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
|
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
|
|
}
|
|
|
|
.spread-inner{
|
|
position: relative;
|
|
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
|
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
|
|
}
|
|
|
|
.spread__left{
|
|
margin: 0;
|
|
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
|
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
break-after: page;
|
|
/*break-before: left;*/
|
|
}
|
|
.spread__right{
|
|
margin: 0;
|
|
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
|
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.spread-content{
|
|
margin: 0;
|
|
width: calc(var(--pagedjs-pagebox-width)*2 + var(--bleed-images)*2);
|
|
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.spread__left .spread-content{
|
|
left: calc(var(--pagedjs-fold)*-1);
|
|
}
|
|
.spread__right .spread-content{
|
|
left: calc((var(--pagedjs-pagebox-width) + var(--bleed-images))*-1 + var(--pagedjs-fold));
|
|
}
|
|
|
|
.spread-content img{
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.spread .image__top{
|
|
z-index: 9000;
|
|
position: absolute;
|
|
/*overflow: hidden;*/
|
|
}
|
|
|
|
.spread .image__top img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.spread .image__top.topleft{
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.spread .image__top.topright{
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.spread .image__top.bottomleft{
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.spread .image__top.bottomright{
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.spread .image__top.center{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|