Julie/decor-6-expe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

portfolio

Browse source
This commit is contained in:
Julie Blanc 2026-03-20 13:44:43 +01:00
parent 1867e54400
commit 5560df8f21
16 changed files with 361 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

18
maquette-tests/assets/css/03_layout.css
View file

@ -280,10 +280,26 @@
[data-chapter="portfolio"]{
--sign-color: var(--green);
--sign-color: white;
page: portfolio;
break-before: right;
break-before: left;
}
@page portfolio{
--sign-color: var(--green);
--sign-color: white;
}
[data-chapter="portfolio-bis"]{
--sign-color: var(--green);
page: portfolioBis;
break-before: left;
}
@page portfolioBis{
--sign-color: var(--green);
}

220
maquette-tests/assets/css/portfolio.css Normal file
View file

@ -0,0 +1,220 @@
:root{
--bleed-images: 3mm;
--pagedjs-fold: 0px;
}
[data-chapter="portfolio"] p{
color: white;
}
.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;
}
[data-chapter="portfolio"] .chapter-header h2 span,
[data-chapter="portfolio"] .chapter-header .author span{
color: black;
padding-right: 0.75ch;
}
/* DOUBLE */
.spread{
position: relative;
z-index: -1;
}
.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: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
overflow: hidden;
break-after: page;
}
.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: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
left: calc(var(--pagedjs-margin-left)*-1);
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));
}
/* SPECIFIC */
#josefa-1 .spread-content img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: -310px 10px;
}
#josefa-2 .spread__left{
top: -280px;
}
#josefa-2 .spread-content img{
width: 100%;
height: 120%;
object-fit: cover;
object-position: -1700px 0px;
}
#josepha-2__1{
z-index: 100;
width: 140mm;
height: 190mm;
position: absolute;
left: -15mm;
overflow: hidden;
}
#josepha-2__1 img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: -900px 0px;
}
#josefa-3{
break-before: left;
}
#josefa-3 .background{
width: 100%;
height: 120%;
object-fit: cover;
object-position: -1800px 0px;
}
#josepha-3__1_left{
z-index: 100;
width: 100%;
height: 156mm;
position: absolute;
top: -100px;
overflow: hidden;
}
#josepha-3__1_left img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: -900px 0px;
}
#josepha-3__1_right{
z-index: 100;
width: calc(var(--pagedjs-pagebox-width)*0.4);
height: 156mm;
position: absolute;
top: -100px;
overflow: hidden;
}
#josepha-3__1_right img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: calc(var(--pagedjs-pagebox-width)*-1 - var(--bleed-images) - 900px) 0px;
}
#josefa-4{
break-before: left;
}
#josefa-4 .background{
width: 100%;
height: 120%;
object-fit: cover;
object-position: -1900px -200px;
}
#josepha-4_inside{
z-index: 100;
width: 140mm;
height: 190mm;
position: absolute;
bottom: -5mm;
right: -5mm;
overflow: hidden;
}
#josepha-4_inside img{
width: 100%;
height: 100%;
object-fit: cover;
/* object-position: -900px 0px; */
}
#josefa-5{
break-before: left;
}
#josefa-5 figure{
/* background-color: black; */
}
#josefa-5 .background{
width: 100%;
height: 100%;
object-fit: cover;
/* object-position: -1900px -200px; */
}
.josepha-grid-1{
break-before: left;
}
.josepha-grid{
width: 100%;
}
.josepha-grid img{
width: 100%;
margin-bottom: calc(var(--baseline)*0.5);
}