Explication de la @page Geoformat:first
Je vais vous expliquer à quoi correspond chaque élément dans le CSS pour la page Geoformat:first (cf. image ci-dessous).
La page se nomme @page Geoformat:first 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 ——————— */
/* k. Nos pages geoformat —————*/
Le compteur de page correspond à @bottom-center.
@page Geoformat {
margin : 15mm 5mm 15mm ;
@bottom-center {
font-size : 15pt ;
font-family : var(–texte-font) ;
color : var(–couleur-trois) ;
text-align : center ;
}
}
@page Geoformat:first {
@bottom-center {
content : counter(page) !important ;
}
}
Regardons maintenant cette partie :
/* 4. Le design du livre grâce à Paged.js ——————— */
/* j. Nos pages geoformat : l’introduction —————*/
L’inscription “Geoformat” en haut à gauche de la page correspond à @top-left. J’ai défini sa police de caractère (font-family : var(–texte-font) ; ), sa couleur (color : var(–couleur-trois) ; ) et sa taille (font-size : 8pt ; ). J’ai choisi ses proportions (width et height) et sa position (transform, position, top et right).
@page Geoformat:left {
@top-left {
content : “Geoformat” ;
width : 28mm ;
height : 5mm ;
transform : rotate(-90deg) ;
transform-origin : top left ;
position : relative ;
top : 29mm ;
font-size : 8pt ;
font-family : var(–texte-font) ;
color : var(–couleur-trois) ;
}
Observons cette partie :
/* 6. Les éléments de nos pages ——————————————————– */
/* Geoformat section ——————————*/
Le titre correspond à section.section header h2. J’ai choisi sa position (avec les margin), sa taille de police (font-size : var(–geoformat-chapitre-titre-taille) ; ) et son interlignage (line-height : var(–geoformat-chapitre-titre-interligne) ; )
section.section header h2 {
margin-top : 0px ;
margin-left : 15mm ;
margin-right : 15mm ;
font-size : var(–geoformat-chapitre-titre-taille) ;
line-height : var(–geoformat-chapitre-titre-interligne) ;
}
L’image correspond à section.section header img. Ses proportions sont définies ici.
section.section header img {
width : 138mm ;
height : auto ;
max-height : 170mm ;
}
Pour finir, penchons-nous sur cette partie :
/* 5. Notre style général : ——————————————————– */
/* b. Les caractères ————————————————- */
La légende de la photo correspond à figcaption et section.geoformat figcaption. J’ai désigné la taille de la police (font-size : 0.58em ; ), sa couleur (color : var(–geoformat-text-couleur) ; ), son style (font-style : italic ; ) et sa position (margin-top : 4px ; ).
section.geoformat p,
section.geoformat pre,
section.geoformat figcaption {
font-family : var(–geoformat-text-font) ;
color : var(–geoformat-text-couleur) ;
}
pre,
figcaption {
padding-left : 0px !important ;
font-size : 0.58em ;
margin-top : 4px ;
font-style : italic ;
width : 120 % ;
}
