tests mise en page
This commit is contained in:
sarahgarcin1
parent
581d60f883
commit
bc350af540
52 changed files with 961 additions and 72 deletions
|
|
@ -49,11 +49,11 @@ h3{
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
h2 + h3{
|
||||
/*h2 + h3{
|
||||
margin-top: 0.5em;
|
||||
opacity: 0.8;
|
||||
font-weight: normal;
|
||||
}
|
||||
}*/
|
||||
|
||||
h5, h6{
|
||||
font-size: var(--textSize);
|
||||
|
|
@ -155,6 +155,7 @@ figure[data-crop="false"] img {
|
|||
}
|
||||
|
||||
.print-image .print-red{
|
||||
position: relative;
|
||||
background: var(--rouge);
|
||||
}
|
||||
|
||||
|
|
@ -331,3 +332,6 @@ header .mobile__menu_btn .rotate-bottom {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -436,13 +436,13 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
}
|
||||
|
||||
/* -------- FOOTNOTES ---------- */
|
||||
span.footnote {
|
||||
/*span.footnote {
|
||||
float: footnote;
|
||||
}
|
||||
|
||||
.footnote::footnote-call {
|
||||
content: counter(footnote, decimal) " ";
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,53 +2,346 @@
|
|||
|
||||
/* --------- Paramètres de base ---------- */
|
||||
@page{
|
||||
size: 165mm 240mm
|
||||
size: 165mm 240mm;
|
||||
/* bleed: 6mm;
|
||||
marks: crop;*/
|
||||
}
|
||||
|
||||
@page :left {
|
||||
margin: 16mm 25mm 10mm 10mm;
|
||||
@top-left-corner {
|
||||
margin: 20mm 36mm 18mm 12mm;
|
||||
/* @top-left-corner {
|
||||
content: counter(page);
|
||||
font-size: 7pt;
|
||||
font-size: 11pt;
|
||||
text-align: center;
|
||||
font-family: var(--fontFamily);
|
||||
}
|
||||
font-family: "Bilzig Trial";
|
||||
}*/
|
||||
@top-center{
|
||||
content: string(title);
|
||||
font-size: 7pt;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
width: 105%;
|
||||
margin-left: 0%;
|
||||
font-family: var(--fontFamily);
|
||||
content: "D6cor > essai";
|
||||
font-size: 8pt;
|
||||
color: var(--bleu);
|
||||
text-align: left;
|
||||
margin-top: 4mm;
|
||||
/*text-align: center;*/
|
||||
/*text-transform: uppercase;*/
|
||||
/*width: 105%;*/
|
||||
/*margin-left: 0%;*/
|
||||
}
|
||||
@bottom-left{
|
||||
font-family: var(--fontFamily);
|
||||
content: counter(page);
|
||||
font-size: 11pt;
|
||||
color: var(--vert);
|
||||
margin-top:-5mm;
|
||||
margin-left: 8mm;
|
||||
}
|
||||
}
|
||||
|
||||
@page :right {
|
||||
margin: 16mm 10mm 10mm 25mm;
|
||||
@top-right-corner {
|
||||
margin: 20mm 12mm 18mm 36mm;
|
||||
/*@top-right-corner {
|
||||
content: counter(page);
|
||||
font-size: 7pt;
|
||||
text-align: center;
|
||||
font-family: var(--fontFamily);
|
||||
}
|
||||
}*/
|
||||
@top-center{
|
||||
content: string(chapter);
|
||||
font-size: 7pt;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
width: 105%;
|
||||
margin-left: -9%;
|
||||
font-family: var(--fontFamily);
|
||||
font-size: 8pt;
|
||||
color: var(--bleu);
|
||||
text-align: right;
|
||||
margin-top: 4mm;
|
||||
}
|
||||
@bottom-right{
|
||||
font-family: var(--fontFamily);
|
||||
content: counter(page);
|
||||
font-size: 11pt;
|
||||
color: var(--vert);
|
||||
margin-top:-5mm;
|
||||
margin-right: 8mm;
|
||||
}
|
||||
}
|
||||
|
||||
.chapter{
|
||||
break-before: right;
|
||||
counter-reset: callNote_marginNote markerNote_marginNote;
|
||||
}
|
||||
|
||||
.chapter h2{
|
||||
page-break-after: always;
|
||||
/* borders */
|
||||
.pagedjs_margin-top-left-corner-holder:before{
|
||||
content: " ";
|
||||
background: var(--vert);
|
||||
width: 100%;
|
||||
height: var(--border);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pagedjs_margin-left:before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top:0;
|
||||
background: var(--bleu);
|
||||
width: var(--border);
|
||||
height: var(--pagedjs-height);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .pagedjs_margin-left:before{
|
||||
content: none;
|
||||
}
|
||||
|
||||
.pagedjs_margin-right:after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 0;
|
||||
background: var(--bleu);
|
||||
width: var(--border);
|
||||
height: var(--pagedjs-height);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .pagedjs_margin-right:after{
|
||||
content: none;
|
||||
}
|
||||
|
||||
.pagedjs_margin-bottom:after{
|
||||
content: " ";
|
||||
background: var(--rouge);
|
||||
width: 100%;
|
||||
height: var(--border);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ---- INTERPAGES ------ */
|
||||
|
||||
.interpage figure{
|
||||
height: calc(var(--pagedjs-height) - (var(--border) * 2)) !important;
|
||||
margin-top: calc(var(--border) + 3mm);
|
||||
}
|
||||
|
||||
/* ---- PAGE DE TITRE ------ */
|
||||
|
||||
.chapter-title{
|
||||
page: chapterTitle;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@page chapterTitle{
|
||||
background: var(--bleu);
|
||||
margin: 12mm 0mm;
|
||||
@top-left-corner {content: none;}
|
||||
@top-left {content: none;}
|
||||
@top-center {content: none;}
|
||||
@top-right {content: none;}
|
||||
@top-right-corner {content: none;}
|
||||
@left-top {content: none;}
|
||||
@left-middle {content: none;}
|
||||
@left-bottom {content: none;}
|
||||
@right-top {content: none;}
|
||||
@right-middle {content: none;}
|
||||
@right-bottom {content: none;}
|
||||
@bottom-left-corner {content: none;}
|
||||
@bottom-left {content: none;}
|
||||
@bottom-center {content: none;}
|
||||
@bottom-right {content: none;}
|
||||
@bottom-right-corner {content: none;}
|
||||
}
|
||||
|
||||
.chapter-title h2,
|
||||
.chapter-title h3,
|
||||
.chapter-title p {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: #FFF;
|
||||
font-size: var(--textSize);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ascii-fill : pas de flex:1, hauteur fixée par JS */
|
||||
.ascii-fill {
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
flex-shrink: 0;
|
||||
color: #FFF;
|
||||
font-size: var(--textSize);
|
||||
text-align: center;
|
||||
font-family: var(--fontFamily);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chapter-title,
|
||||
.biographie {
|
||||
font-family: var(--fontFamily);
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
/*padding: 30px;*/
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--fontFamily);
|
||||
font-size: var(--textSize);
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* ------- TITLES ------- */
|
||||
.chapter-content h3{
|
||||
/*width: calc(var(--pagedjs-width) - 12mm);*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chapter-content h3:before{
|
||||
content: "+------------------------------------------------+";
|
||||
display: block;
|
||||
margin-bottom: 2mm;
|
||||
}
|
||||
|
||||
.chapter-content h3:after{
|
||||
content: "+------------------------------------------------+";
|
||||
display: block;
|
||||
margin-top: 1mm;
|
||||
margin-bottom: 1mm;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .chapter-content h3{
|
||||
/*margin-left: calc((var(--pagedjs-margin-left) - 16mm) * -1);*/
|
||||
}
|
||||
|
||||
.chapter-content h4{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.chapter-content h4:before{
|
||||
content: "> > > > > > < < < < < < \a > > > > ";
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.chapter-content h4:after{
|
||||
content: " < < < < \a > > > > > > < < < < < <";
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* -------- IMAGES ------- */
|
||||
.float-image{
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
width: auto !important;
|
||||
float: right; /* ou left selon la position souhaitée */
|
||||
clear: right;
|
||||
width: 45% !important;
|
||||
|
||||
margin-top: 2mm;
|
||||
|
||||
}
|
||||
|
||||
.pagedjs_left_page .float-image{
|
||||
float: right;
|
||||
margin-right: calc(var(--pagedjs-margin-right) / 2 * -1);
|
||||
margin-left: 5mm;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .float-image{
|
||||
float: left;
|
||||
margin-left: calc(var(--pagedjs-margin-left) / 2 * -1);
|
||||
margin-right: 5mm;
|
||||
}
|
||||
|
||||
.float-image figcaption{
|
||||
position: relative;
|
||||
color: var(--bleu);
|
||||
font-size: 8.5pt;
|
||||
font-family: "Bilzig Trial";
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.float-image figcaption p{
|
||||
color: var(--bleu);
|
||||
font-size: 8.5pt;
|
||||
font-family: "Bilzig Trial";
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ------- NOTES ------- */
|
||||
|
||||
.margin-note{
|
||||
font-size: 8.5pt;
|
||||
line-height: 1.41;
|
||||
font-family: "Bilzig Trial";
|
||||
color: var(--bleu);
|
||||
text-align: left;
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
width: auto !important;
|
||||
float: right; /* ou left selon la position souhaitée */
|
||||
clear: right;
|
||||
|
||||
/* Largeur de la note dans le corps du texte */
|
||||
width: 45% !important;
|
||||
|
||||
padding: 1mm 3mm 0mm;
|
||||
|
||||
}
|
||||
|
||||
.pagedjs_left_page .margin-note {
|
||||
float: right;
|
||||
margin-right: calc(var(--pagedjs-margin-right) / 2 * -1);
|
||||
padding: 1mm 0mm 0mm 3mm;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .margin-note {
|
||||
float: left;
|
||||
margin-left: calc(var(--pagedjs-margin-left) / 2 * -1);
|
||||
text-align: right;
|
||||
padding: 1mm 3mm 0mm 0mm;
|
||||
}
|
||||
|
||||
.note-call_margin-note::before{
|
||||
content: "{";
|
||||
margin-right: 0.5mm;
|
||||
}
|
||||
|
||||
.note-call_margin-note::after{
|
||||
content: "}";
|
||||
margin-left: 0.5mm;
|
||||
}
|
||||
|
||||
.note-marker_margin-note{
|
||||
margin-right: 2mm;
|
||||
}
|
||||
|
||||
.note-marker_margin-note::before{
|
||||
content: "{";
|
||||
margin-right: 1mm;
|
||||
}
|
||||
|
||||
.note-marker_margin-note::after{
|
||||
content: "}";
|
||||
margin-left: 1mm;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
:root{
|
||||
--margin: 1em;
|
||||
|
||||
--fontFamily: sans-serif;
|
||||
--textSize: 17px;
|
||||
/*--fontFamily: "Routed Gothic";*/
|
||||
--fontFamily: "JetBrains Mono NL";
|
||||
/*--textSize: 11pt;*/
|
||||
--textSize: 9pt;
|
||||
--ratio : auto;
|
||||
|
||||
--rouge: #ff665e;
|
||||
--vert: #44d62c;
|
||||
--bleu: #0078bf;
|
||||
|
||||
--border: 4mm;
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue