Explication de la @page marqueur
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:left. J’ai déterminé la police de caractère (font-family : var(–texte-font) ; ), sa taille (font-size : 8pt ; ) et sa couleur (color : var(–couleur-trois) ; ).
@page marqueur:left {
@top-left {
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:left {
@bottom-center {
content : counter(page) ” • ” “#” string(TitleRun) ;
font-size : 0pt ;
font-family : var(–texte-font) ;
color : var(–couleur-trois) ;
text-align : left ;
}
}
Regardons les éléments de cette partie :
/* 6. Les éléments de nos pages ——————————————————– */
/* c. Les éléments des pages marqueurs : section.map-marker ——————————————– */
La carte correspond à .map-container. Je choisis sa largeur (width : 440px ; ) et sa hauteur (height : 440px ; ).
.map-container {
width : 440px ;
height : 440px ;
}
Les données de la latitude et de la longitude correspondent à section.marker .marker p. La police utilisée (font-family : var(–texte-font) !important ; ) et sa taille (font-size : 0.8em ; ) sont précisées.
section.marker .marker p {
font-family : var(–texte-font) !important ;
font-size : 0.8em ;
margin : 0px ;
}
Obervons les éléments de cette partie :
/* 5. Notre style général : ——————————————————– */
/* b. Les caractères ————————————————- */
Le titre de mon marqueur “La maison familiale” correspond à h2. J’ai choisi la police de caractère (font-family : var(–titre-font) ; ), sa taille (font-size : 35px ; ) et son épaisseur (font-weight : normal ; ).
h2 {
font-family : var(–titre-font) ;
font-size : 35px ;
font-weight : normal ;
}
Penchons-nous désormais sur 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 la carte qu’on trouve dans .map-container.
.map-container {
-webkit-filter : grayscale(0) brightness(65 %) sepia(65 %) hue-rotate(-20deg) saturate(20 %) contrast(2) ;
filter : grayscale(0) brightness(65 %) sepia(65 %) hue-rotate(-20deg) saturate(20 %) contrast(2) ;
}
L’image du marqueur en dessous de la carte correspond à img[alt=”Marqueur”]. Je lui ai appliqué un filtre noir.
img[alt=”Marqueur”] {
-webkit-filter : invert(30 %) grayscale(100 %) brightness(70 %) contrast(4) ;
filter : invert(30 %) grayscale(100 %) brightness(70 %) contrast(4) ;
