Explication de la @page GeOverture:right
Je vais vous expliquer à quoi correspond chaque élément dans le CSS pour la page GeOverture:right (cf. image ci-dessous).
La page se nomme @page GeOverture:right 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 ——————— */
/* j. Nos pages geoformat : l’introduction —————*/
L’inscription “Geoformat” en haut à droite de la page correspond à @top-right. 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 : 28mm ;) et sa position (transform, position, top et right).
@page GeOverture:right {
@top-right {
content : “Geoformat” ;
width : 28mm ;
transform : rotate(90deg) ;
transform-origin : right ;
position : relative ;
top : 22mm ;
right : -3mm ;
font-size : 8pt ;
font-family : var(–texte-font) ;
color : var(–couleur-trois) ;
}
}
Vous pouvez ajouter une inscription dans l’élément @bottom-center. Pour cela, il faut écrire entre les guillemets dans content (content : “” ; ).
@page GeOverture:right {
@bottom-center {
content : “” ;
}
}
Regardons les éléments de cette page :
/* 5. Notre style général : ——————————————————– */
/* b. Les caractères ————————————————- */
Le titre correspond à section.geoformat h1. J’ai spécifié sa police de caractère (font-family : var(–geoformat-titre-font) ; ), sa couleur (color : var(–geoformat-titre-couleur) ; ), sa taille (font-size : var(–geoformat-titre-taille) ; ) et l’interlignage (line-height : var(–geoformat-titre-interligne) ; ).
section.geoformat h1 {
font-family : var(–geoformat-titre-font) ;
color : var(–geoformat-titre-couleur) ;
font-size : var(–geoformat-titre-taille) ;
line-height : var(–geoformat-titre-interligne) ;
}
Pour finir, observons les éléments de cette partie :
/* 6. Les éléments de nos pages ——————————————————– */
/* d. Les éléments des pages geoformat : .geoformat, .intro et .section ——————————*/
Le titre correspond aussi à section.geoformat h1. C’est ici que je décide de sa position sur la page.
section.geoformat h1 {
margin : 1.5em 0px 0.4em ;
text-align : left ;
}
