289 lines
No EOL
6.3 KiB
CSS
289 lines
No EOL
6.3 KiB
CSS
@media print {
|
|
|
|
@page {
|
|
size: 165mm 240mm;
|
|
margin-top: 95px;
|
|
margin-bottom: 18mm;
|
|
bleed: 6mm;
|
|
marks: crop;
|
|
--symbol-top: 1px;
|
|
--running-top: 8mm;
|
|
--running-bottom: 6mm;
|
|
--running-left: 19px;
|
|
}
|
|
|
|
@page:left {
|
|
margin-left: 18mm;
|
|
margin-right: 26mm;
|
|
|
|
@top-left-corner {
|
|
content: var(--symbol) var(--symbol) var(--symbol);
|
|
font-size: var(--sign-size);
|
|
color: var(--sign-color);
|
|
letter-spacing: var(--sign-spacing);
|
|
font-family: var(--sign-family);
|
|
line-height: var(--sign-baseline);
|
|
vertical-align: top;
|
|
padding-top: var(--running-top);
|
|
text-align: left;
|
|
padding-left: var(--running-left);
|
|
|
|
}
|
|
|
|
|
|
@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);
|
|
font-family: var(--sign-family);
|
|
}
|
|
|
|
|
|
|
|
@top-center {
|
|
content: element(author);
|
|
vertical-align: top;
|
|
padding-top: calc(var(--running-top) - var(--symbol-top));
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
font-size: var(--font-size);
|
|
color: var(--sign-color);
|
|
font-family: var(--sign-family);
|
|
|
|
}
|
|
|
|
|
|
@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);
|
|
font-family: var(--sign-family);
|
|
line-height: var(--sign-baseline);
|
|
vertical-align: top;
|
|
padding-top: var(--running-top);
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
|
|
}
|
|
|
|
@bottom-left {
|
|
content: counter(page);
|
|
vertical-align: bottom;
|
|
padding-bottom: var(--running-bottom);
|
|
white-space: nowrap;
|
|
|
|
font-size: var(--sign-size);
|
|
color: var(--sign-color);
|
|
font-family: var(--sign-family);
|
|
|
|
z-index: 100;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
@page:right {
|
|
margin-left: 26mm;
|
|
margin-right: 18mm;
|
|
|
|
@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);
|
|
font-family: var(--sign-family);
|
|
line-height: var(--sign-baseline);
|
|
vertical-align: top;
|
|
padding-top: var(--running-top);
|
|
text-align: left;
|
|
padding-left: var(--running-left);
|
|
|
|
}
|
|
|
|
@top-left {
|
|
content: element(title);
|
|
vertical-align: top;
|
|
padding-top: var(--running-top);
|
|
white-space: nowrap;
|
|
padding-right: 1.5ch;
|
|
font-family: var(--sign-family);
|
|
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);
|
|
font-family: var(--sign-family);
|
|
line-height: var(--sign-baseline);
|
|
vertical-align: top;
|
|
padding-top: var(--running-top);
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
@bottom-right {
|
|
content: counter(page);
|
|
vertical-align: bottom;
|
|
padding-bottom: var(--running-bottom);
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
|
|
font-size: var(--sign-size);
|
|
color: var(--sign-color);
|
|
font-family: var(--sign-family);
|
|
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@page:blank {
|
|
@top-left {
|
|
content: none;
|
|
}
|
|
|
|
@top-left-corner {
|
|
content: none;
|
|
}
|
|
|
|
@top-right {
|
|
content: none;
|
|
}
|
|
|
|
@top-center {
|
|
content: none;
|
|
}
|
|
|
|
@bottom-center {
|
|
content: none;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.nav-title {
|
|
position: running(title);
|
|
}
|
|
|
|
.nav-author {
|
|
position: running(author);
|
|
}
|
|
|
|
.nav-type {
|
|
position: running(type);
|
|
}
|
|
|
|
.nav-decor {
|
|
position: running(decor);
|
|
}
|
|
|
|
.pagedjs_area {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after {
|
|
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);
|
|
font-family: var(--sign-family);
|
|
line-height: var(--sign-baseline);
|
|
/* padding-left: 1ch; */
|
|
width: calc(var(--unit) + var(--sub-unit));
|
|
position: relative;
|
|
top: var(--symbol-top);
|
|
padding-left: 11px;
|
|
}
|
|
|
|
.pagedjs_left_page .pagedjs_margin-top {
|
|
width: calc(100% + var(--pagedjs-margin-right) - 2ch);
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.pagedjs_right_page .pagedjs_margin-top{
|
|
width: calc(100% + var(--pagedjs-margin-left) - 4ch);
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after {
|
|
padding-left: 0.25ch;
|
|
padding-right: 1.25ch;
|
|
display: inline-block;
|
|
background-color: white;
|
|
min-width: 2ch;
|
|
}
|
|
|
|
|
|
|
|
.pagedjs_right_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after {
|
|
padding-left: 1.25ch;
|
|
padding-right: 0.25ch;
|
|
display: inline-block;
|
|
background-color: white;
|
|
min-width: 2ch;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
[data-chapter="essai"]{
|
|
--sign-color: var(--blue);
|
|
page: essai;
|
|
break-before: right;
|
|
}
|
|
|
|
|
|
@page essai{
|
|
--sign-color: var(--blue);
|
|
}
|
|
|
|
[data-chapter="entretien"]{
|
|
--sign-color: var(--red);
|
|
page: entretien;
|
|
break-before: right;
|
|
}
|
|
|
|
@page entretien{
|
|
--sign-color: var(--red);
|
|
}
|
|
|
|
[data-chapter="portfolio"]{
|
|
--sign-color: var(--green);
|
|
page: portfolio;
|
|
break-before: right;
|
|
}
|
|
|
|
@page portfolio{
|
|
--sign-color: var(--green);
|
|
} |