Explication de la @page marqueur 2
Je vais vous expliquer à quoi correspond chaque élément dans le CSS pour la page marqueur (cf. image ci-dessous).
La page se nomme @page marqueur dans le CSS.
Dans un premier temps, nous allons nous intéresser aux éléments de cette partie :
/* 4. Le design du livre grâce à Paged.js ——————— */
/* i. Nos pages marqueurs-carte —————*/
Le texte en haut de la page à gauche “Un itinéraire de tendresse” correspond à @page marqueur:right. J’ai choisi sa police de caractère (font-family : var(–texte-font) ; ), sa taille (font-size : 8pt ; ) et sa couleur (color : var(–couleur-trois) ; ).
@page marqueur:right {
@top-right {
content : string(LaGrandeCarte) ;
font-size : 8pt ;
font-family : var(–texte-font) ;
color : var(–couleur-trois) ;
}
Examinons les éléments de cette partie :
/* 4. Le design du livre grâce à Paged.js ——————— */
/* d. Nos pages de gauche —————*/
Le compteur de page correspond à @bottom-center.
@page:right {
@bottom-center {
content : “#” string(TitleRun) ” • ” counter(page) ;
font-size : 8pt ;
font-family : var(–texte-font) ;
color : var(–couleur-trois) ;
text-align : right ;
}
}
Penchons-nous maintenant sur cette partie :
/* 6. Les éléments de nos pages ——————————————————– */
/* c. Les éléments des pages marqueurs : section.map-marker ——————————————– */
Les paragraphes correspondent à section.marker .content p et section.marker .content. J’ai choisi la taille de la police (font-size : 11px ; ), justifié le texte (text-align : justify ; ) et appliqué le nombre de colonne de paragraphe que je voulais (columns : var(–marqueur-texte-nb-colonne) ; ).
section.marker .content p {
text-align : justify ;
font-size : 11px ;
}
section.marker .content{
columns : var(–marqueur-texte-nb-colonne) ;
}
L’image correspond à section.marker .content img. J’ai déterminé ses proportions.
section.marker .content img {
width : 118mm ;
height : auto ;
max-height : 170mm ;
}
Regardons cette partie :
/* 5. Notre style général : ——————————————————– */
/* b. Les caractères ————————————————- */
La légende sous la photo correspond à figcaption et section.marker figure figcaption. J’ai décidé de la taille de la police
(font-size : 0.58em ; ), de son style (font-style : italic ;) ou encore de ses proportions (max-width : 118mm ; ).
pre,
figcaption {
padding-left : 0px !important ;
font-size : 0.58em ;
margin-top : 4px ;
font-style : italic ;
width : 120 % ;
}
p,
pre,
figcaption {
font-family : var(–texte-font) ;
}
section.marker figure figcaption {
max-width : 118mm ;
}
Pour finir, analysons cette partie :
/* 5. Notre style général : ——————————————————– */
/* c. Les éléments de mise en page général ———————————– */
J’ai appliqué un filtre de couleur sur l’image qu’on trouve dans section.marker .content img.
section.marker .content img {
-webkit-filter : invert(30 %) grayscale(150 %) sepia(70 %) brightness(100 %) contrast(1) ;
filter : invert(30 %) grayscale(150 %) sepia(70 %) brightness(100 %) contrast(1) ;
}
