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

decor subtitles finish js

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 12:01:16 +01:00
parent 1c1a2b0a93
commit cc971f6152
6 changed files with 180 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,102 +2,118 @@
@page {
size: 165mm 240mm;
margin-top: 25mm;
margin-top: 22mm;
margin-bottom: 14mm;
bleed: 6mm;
marks: crop;
--symbol-top: 1px;
--running-top: 8mm;
}
@page:left {
margin-left: 18mm;
margin-right: 26mm;
@top-left {
content: element(decor);
vertical-align: top;
padding-top: calc(8mm - var(--symbol-top));
width: calc(var(--unit)*2);
font-size: var(--fs-subtitle);
color: var(--sign-color);
}
@top-center{
content: element(author);
vertical-align: top;
padding-top: calc(8mm - var(--symbol-top));
text-align: left;
white-space: nowrap;
padding-right: 1.5ch;
padding-left: 0.5ch;
font-size: var(--fs-subtitle);
color: var(--sign-color);
}
@top-right {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
vertical-align: top;
padding-top: 8mm;
width: 100%;
}
@top-left-corner {
content: var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
vertical-align: top;
padding-top: 8mm;
padding-top: var(--running-top);
text-align: left;
margin-left: 3mm;
}
@top-left {
content: element(decor);
vertical-align: top;
padding-top: calc(var(--running-top) - var(--symbol-top));
width: calc(var(--unit)*2);
font-size: var(--font-size);
color: var(--sign-color);
}
@top-center{
content: element(author);
vertical-align: top;
padding-top: calc(var(--running-top) - var(--symbol-top));
text-align: left;
white-space: nowrap;
padding-right: 1.5ch;
padding-left: 0.5ch;
font-size: var(--font-size);
color: var(--sign-color);
}
@top-right {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
vertical-align: top;
padding-top: var(--running-top);
width: 100%;
white-space: nowrap;
}
}
@page:right {
margin-left: 26mm;
margin-right: 18mm;
@top-left {
content: element(type);
width: 0px;
@top-left-corner {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
vertical-align: top;
padding-top: 8mm;
padding-top: var(--running-top);
text-align: left;
margin-left: 3mm;
}
@top-left {
content: element(title);
vertical-align: top;
padding-top: var(--running-top);
white-space: nowrap;
padding-right: 1.5ch;
font-size: var(--font-size);
color: var(--sign-color);
}
@top-right {
content: element(title);
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
vertical-align: top;
padding-top: calc(8mm + 20px);
/* padding-right: 11mm; */
text-align: left;
position: relative;
left: -11mm;
padding-top: var(--running-top);
width: 100%;
white-space: nowrap;
}
@top-right-corner {
content: counter(page);
width: 40px;
position: relative;
left: -40px;
text-align: right;
vertical-align: top;
padding-top: 8mm;
}
}
@ -159,7 +175,7 @@
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
@ -170,12 +186,22 @@
top: var(--symbol-top);
}
.pagedjs_left_page .pagedjs_margin-top{
width: calc(100% + var(--pagedjs-margin-right));
overflow: hidden;
}
/* DELETE BEFORE PRINT */
.pagedjs_margin-top-right-corner-holder{
/* .pagedjs_margin-top-right-corner-holder{
background-color: white;
width: 40px;
position: absolute;
right: -41px;
}
} */
/* DELETE BEFORE PRINT */