374 lines
8.8 KiB
CSS
374 lines
8.8 KiB
CSS
@media print {
|
|
|
|
@page {
|
|
size: 165mm 240mm;
|
|
margin-top: 95px;
|
|
margin-bottom: 18mm;
|
|
/*bleed: 6mm;*/
|
|
/*marks: crop;*/
|
|
--symbol-top: 1px;
|
|
--symbol2-top: 0px;
|
|
--running-top: 6mm;
|
|
--running-bottom: 6mm;
|
|
--running-left: 19px;
|
|
--running-left-bottom: 55px;
|
|
}
|
|
|
|
@page:left {
|
|
margin-left: 18mm;
|
|
margin-right: 26mm;
|
|
|
|
@top-left-corner {
|
|
content: var(--symbol2) var(--symbol2) var(--symbol2);
|
|
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);
|
|
position: relative;
|
|
top: var(--symbol2-top);
|
|
}
|
|
|
|
|
|
@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);
|
|
/*margin-left: -12px;*/
|
|
|
|
}
|
|
|
|
|
|
@top-right {
|
|
content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
|
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: 15px;
|
|
position: relative;
|
|
top: var(--symbol2-top);
|
|
}
|
|
|
|
@bottom-left-corner {
|
|
content: counter(page) " (";
|
|
vertical-align: bottom;
|
|
padding-bottom: var(--running-bottom);
|
|
white-space: nowrap;
|
|
|
|
font-size: var(--sign-size);
|
|
font-size: 12px;
|
|
color: var(--sign-color);
|
|
font-family: var(--sign-family);
|
|
text-align: left;
|
|
margin-left: 5mm;
|
|
|
|
z-index: 100;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
@page:right {
|
|
margin-left: 26mm;
|
|
margin-right: 18mm;
|
|
|
|
@top-left-corner {
|
|
content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
|
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);
|
|
position: relative;
|
|
top: var(--symbol2-top);
|
|
}
|
|
|
|
@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(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
|
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;
|
|
position: relative;
|
|
top: var(--symbol2-top);
|
|
}
|
|
|
|
|
|
@bottom-right-corner {
|
|
content: ") " counter(page);
|
|
vertical-align: bottom;
|
|
padding-bottom: var(--running-bottom);
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
|
|
font-size: var(--sign-size);
|
|
font-size: 12px;
|
|
color: var(--sign-color);
|
|
font-family: var(--sign-family);
|
|
margin-right: 5mm;
|
|
|
|
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, .nav-author, .nav-type, .nav-decor{
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.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(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
|
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(--symbol2-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;
|
|
}
|
|
|
|
.pagedjs_page.pagedjs_named_page.pagedjs_essai_page.pagedjs_essai_first_page .pagedjs_margin-top-left-corner>.pagedjs_margin-content::after,
|
|
.pagedjs_page.pagedjs_named_page.pagedjs_entretien_page.pagedjs_entretien_first_page .pagedjs_margin-top-left-corner>.pagedjs_margin-content::after{
|
|
content: none !important;
|
|
}
|
|
|
|
|
|
[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);
|
|
--sign-color: white;
|
|
page: portfolio;
|
|
break-before: left;
|
|
}
|
|
|
|
@page portfolio{
|
|
--sign-color: var(--green);
|
|
--sign-color: white;
|
|
background-color: #000;
|
|
}
|
|
|
|
/* ------- TABLE OF CONTENTS --------- */
|
|
.toc{
|
|
break-before: left;
|
|
font-family: var(--fontTitle);
|
|
text-align: left;
|
|
font-size: var(--font-size);
|
|
page: toc;
|
|
}
|
|
|
|
@page toc{
|
|
margin-top: 10mm;
|
|
margin-bottom: 10mm;
|
|
@top-left { content: none;}
|
|
@top-left-corner { content: none;}
|
|
@top-right { content: none; }
|
|
@top-center { content: none;}
|
|
@bottom-center { content: none; }
|
|
@bottom-right-corner { content: none; }
|
|
}
|
|
|
|
.toc h2{
|
|
font-family: var(--fontTitle);
|
|
text-align: left;
|
|
font-size: var(--font-size);
|
|
margin-bottom: var(--baseline);
|
|
}
|
|
|
|
/* counters */
|
|
#list-toc-generated{
|
|
counter-reset: counterTocLevel1;
|
|
list-style: none;
|
|
overflow-x: visible !important;
|
|
}
|
|
|
|
#list-toc-generated .toc-element-level-1{
|
|
counter-increment: counterTocLevel1;
|
|
margin-bottom: calc(var(--baseline) * 1);
|
|
}
|
|
|
|
.toc-essai a span{
|
|
color: var(--blue);
|
|
}
|
|
|
|
.toc-entretien a span{
|
|
color: var(--red);
|
|
}
|
|
|
|
.toc-portfolio a span{
|
|
color: var(--green);
|
|
}
|
|
|
|
#list-toc-generated a{
|
|
display: block;
|
|
text-decoration: none;
|
|
margin-left: 70px;
|
|
width: calc(100% - 70px);
|
|
}
|
|
|
|
#list-toc-generated .toc-element a::before{
|
|
content: target-counter(attr(href), page);
|
|
position: absolute;
|
|
left:0;
|
|
text-align: left;
|
|
}
|
|
|
|
#list-toc-generated li span{
|
|
display: block;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#list-toc-generated li span::before{
|
|
content: "//////// essai //////////////////////////////////////////";
|
|
display: block;
|
|
font-size: 0.8em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#list-toc-generated .toc-element a span::after{
|
|
content: "— Auteur du texte";
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
|