portfolio iyo bissek
This commit is contained in:
parent
fc85403e3a
commit
044ce3f76b
147 changed files with 218 additions and 38 deletions
|
|
@ -49,6 +49,10 @@ figure[data-crop="false"] img {
|
|||
|
||||
|
||||
/* --- INTERPAGE ---- */
|
||||
|
||||
.interpage{
|
||||
break-before: left;
|
||||
}
|
||||
.interpage figure {
|
||||
/*background-color: var(--copper);*/
|
||||
background-color: var(--silver);
|
||||
|
|
|
|||
|
|
@ -3,8 +3,33 @@
|
|||
--pagedjs-fold: 0px;
|
||||
}
|
||||
|
||||
.portfolio{
|
||||
page: portfolio;
|
||||
--margin: 8mm;
|
||||
}
|
||||
|
||||
@page portfolio:first{
|
||||
|
||||
@top-left { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@top-right-corner { content: none;}
|
||||
@top-left-corner { content: none; display: none; }
|
||||
}
|
||||
|
||||
@page portfolio:nth(2){
|
||||
|
||||
@top-left { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@top-right-corner { content: none;}
|
||||
@top-left-corner { content: none; display: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pagedjs_portfolio_page .pagedjs_sheet{
|
||||
overflow: visible !important;
|
||||
/* overflow: visible !important; */
|
||||
}
|
||||
|
||||
[data-chapter="portfolio"] p{
|
||||
|
|
@ -19,6 +44,114 @@
|
|||
}
|
||||
|
||||
|
||||
.portfolio .chapter-header{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
|
||||
.portfolio img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.intro-portfolio{
|
||||
width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
|
||||
position: absolute;
|
||||
left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
|
||||
top: calc(var(--pagedjs-margin-top)*-1 + var(--margin));
|
||||
|
||||
}
|
||||
|
||||
.portfolio-simple-paysage{
|
||||
width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
|
||||
position: relative;
|
||||
left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
|
||||
}
|
||||
|
||||
|
||||
.portfolio-full-page{
|
||||
break-before: page;
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
.portfolio-full-page figure{
|
||||
position: absolute;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images)*2);
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2);
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
.portfolio-spread-left{
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
.portfolio-spread-right{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
.portfolio-spread figure{
|
||||
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);
|
||||
}
|
||||
|
||||
.portfolio-spread-right figure{
|
||||
left: calc(var(--pagedjs-pagebox-width)*-1 - var(--pagedjs-margin-left) - var(--bleed-images));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* IYO BISSECK -------------------------------------------- */
|
||||
|
||||
#fig-iyo-bisseck-3{
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
|
||||
#fig-iyo-bisseck-4 img{
|
||||
object-fit: contain;
|
||||
width: 80%;
|
||||
object-position: calc(var(--margin) + var(--bleed-images)) calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* #fig-iyo-bisseck-5 img{
|
||||
position: relative;
|
||||
width: 80%;
|
||||
left: calc(20% - var(--bleed-images));
|
||||
object-fit: contain;
|
||||
object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
} */
|
||||
|
||||
#fig-iyo-bisseck-5 img{
|
||||
object-fit: contain;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
left: calc(10% - var(--bleed-images));
|
||||
|
||||
}
|
||||
|
||||
#fig-iyo-bisseck-6, #fig-iyo-bisseck-7{
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ------ DOUBLE PAGE ------- */
|
||||
|
||||
.spread{
|
||||
|
|
@ -45,7 +178,6 @@
|
|||
left: 0;
|
||||
overflow: hidden;
|
||||
break-after: page;
|
||||
/*break-before: left;*/
|
||||
}
|
||||
.spread__right{
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -72,9 +72,13 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
--pagedjs-full-page: spread;
|
||||
}
|
||||
|
||||
|
||||
.block-type-fullpageimage{
|
||||
break-before: page;
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
.full-bleed-image{
|
||||
break-before: left;
|
||||
page-break-after: always;
|
||||
position: absolute;
|
||||
top: calc(var(--pagedjs-margin-top)*-1 - var(--pagedjs-bleed-top));
|
||||
height: var(--pagedjs-height);
|
||||
|
|
@ -220,7 +224,7 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
}
|
||||
|
||||
|
||||
.spread-image figure.full-width img;
|
||||
.spread-image figure.full-width img,
|
||||
.full-bleed-image figure.full-width img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -166,11 +166,11 @@
|
|||
|
||||
|
||||
@page:blank {
|
||||
@top-left { content: none;}
|
||||
/* @top-left { content: none;}
|
||||
@top-left-corner { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@bottom-center { content: none; }
|
||||
@bottom-center { content: none; } */
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue