Guide de styles

 

Ci-dessous une liste de codes spécifiques à ce site, notamment pour les images. Toute la microtypographie du texte est traitée dans la charte typo.

Chapô - titraille

L’image sous le titre s’installe dans le surtitre. Il faut qu’elle soit de couleur relativement foncée pour que le titre blanc se voie bien.

Voici le code pour la signature de Marion :

<h4 class="text-right">{par Marion Lecoquierre}</h4>
<h5 class="text-right">géographe, doctorante à l'Institut universitaire européen de Florence (Italie)
_ Toutes les photographies sont de l'auteure.</h5>

On retrouve éventuellement la signature en bas de page, à droite et en petites caps, avec un gimmick graphique si l’on veut :
<p class="text-right caps">↬ Marion Lecoquierre.</p>

adapt at will…

Texte

Toute la microtypographie du texte est traitée dans la charte typo.

Quelques ajouts pour ce site :
– <p class=in> : mettre des petites caps sur la première ligne de ce paragraphe introductif ;
– <p class=off> : désactiver les petites caps sur ce paragraphe ;
– <div class=tight> resserrer les paragraphes entre eux, à la manière du formatage d’un livre classique.

Images

Pour les (belles) images de ce site, on tente une expérience, qui consiste à installer les fichiers sur notre compte Flickr. Pour les afficher, on emploie le « raccourci ressource », qui est simplement l’URL de l’image, mise entre crochets <https://farm8.staticflickr.com/7385/14002391166_f3dd98152b_c.jpg>.

Des options permettent de préciser si l’image doit être affichée en grand, très grand, en moyen ou petit, avec une légende à droite, etc.

Pour l’image « plein pot » utiliser le code class=fullwidth :
<https://farm8.staticflickr.com/7385/14002391166_f3dd98152b_c.jpg size=original class=fullwidth>

Pour les images géantes, qu’on veut traiter avec leaflet (système avancé de mise à l’échelle, zoom etc), on utilisera le raccourci
<leaflet|href=https://farm4.staticflickr.com/3700/13568014115_a47b12278e_b.jpg>
(pas encore parfaitement au point)

Pour une image de taille moyenne positionnée à droite du texte, utiliser right :
<https://farm8.staticflickr.com/7385/14002391166_f3dd98152b_c.jpg size=medium right>

Pour une grande image avec une légende, utiliser size=large :
<https://farm4.staticflickr.com/3700/13568014115_a47b12278e_b.jpg size=large caption="Khaled">

Pour une image de taille moyenne avec une légende sur la droite, utiliser class=caption-right :
<https://farm8.staticflickr.com/7349/13568083315_ea507a7222_b.jpg size=medium caption="Les arbres du Fonds national juif sur les terres d'Al-Araqib" class=caption-right>

Pour une petite image positionnée à gauche du texte, utiliser size=small left et mettre le texte après l’image. Utiliser .clearfix pour fermer le bloc :
<aside class=clearfix><https://farm8.staticflickr.com/7385/14002391166_f3dd98152b_c.jpg size=small left> Texte …</aside>

Pour rendre une image clicable, il faut lui définir un lien link, par exemple ainsi (exemple complet) :

<https://farm8.staticflickr.com/7404/13964894632_f583ea57cd_b.jpg
size=medium class=caption-right
title="Monde sanctuarisé : esquisse~1.0"
caption="Basée sur l'esquisse 0.3 et la carte 1.0, cette esquisse crayonnée qui reprend l'essentiel des informations a été intégré à un dispositif cartographique de vingt esquisses qui formait l'exposition {Frontières, migrants et réfugiés} présenté pour la première fois à l'université du Mans en mars 2007, dans le cadre des {Carrefours de la pensée.}"
credit="mars 2007"
link>
JPEG - 9.2 Mio
« Autoroute terroriste » : esquisse 0.0
Novembre 2007.

À noter, il est possible (mais rarement souhaitable) de mettre autre chose dans l’attribut link que l’image de départ, en précisant son adresse sous la forme link=https………

Pour les titre, légende et crédit, on utilisera les options suivantes :
… title="Titre." caption="Légende." credit="Ph. R." …

Penser à rester minimaliste sur ce point : si plusieurs images ont le même crédit, et sauf avis contraire de l’auteure, faire un crédit commun est plus léger. De même, éviter les titres longs.

Galeries d’images

Une galerie d’images, façon portfolio, doit être préparée sur Flickr, puis on se contente d’indiquer l’adresse du portfolio entre chevrons :
<https://www.flickr.com/photos/120248843@N05/sets/72157643306208733 title=" ">

À noter ci-dessus, on a explicitement demandé qu’il n’y ait pas de titre (title=" "), car par défaut le titre donné dans Flickr s’affiche.

Pour modifier le titre du portfolio, le plus simple est de le modifier dans Flickr. Mais parfois c’est impossible car ce titre est déjà utilisé ailleurs (par exemple dans une traduction) ; on utilisera alors title="Quelque chose de bien"

Parties & Intertitres

<h2>………</h2> définit une partie, comme ci-dessus ; un intertitre normal se fait avec le raccourci SPIP classique {{{ ……… }}}, ce qui donne ceci :

Intertitre

et la suite du texte…

Le raccourci intertitre permet aussi de créer une temporisation, avec des étoiles ou des caractères rigolos qu’on trouve dans le menu “Édition > Caractères spéciaux” du Mac. Mais la plupart du temps on voudra les centrer ; il faudra alors coder :
– <h3 class=text-center>* * *</h3>
– <h3 class=text-center>✪ ✪ ✪</h3>
– <h3 class=text-center> ❦ </h3>

Autre possibilité de temporisation, placer sur une ligne au moins quatre tirets : ----  ; ça crée un filet, comme suit. Je n’ai pas trouvé comment vraiment faire joli.

À noter ce filet n’est pas destiné à créer autre chose qu’une séparation dans un texte : il n’est pas recommandé de l’utiliser pour essayer d’habiller une image ou un paragraphe.

Blocs, citations et encadrés

Pour créer un encadré on peut utiliser
<quote>Un encadré de type QUOTE</quote>

Un encadré de type QUOTE

Ou bien encore :

<aside class="box">Un encadré de type BOX</aside>

Pour une citation, utiliser <blockquote> et <cite> pour indiquer la source :

<blockquote>On devrait pouvoir comprendre que les choses sont sans espoir,
et cependant être décidé à les changer...
<cite>Francis Scott Fitzgerald</cite></blockquote>
On devrait pouvoir comprendre que les choses sont sans espoir, et cependant être décidé à les changer... Francis Scott Fitzgerald

Pour créer un accordéon :

<div class="ui small fluid accordion">
<div class="title">
<i class="dropdown icon"></i>
Sources pour la carte
</div>
<div class="small content">
-* United for Intercultural Action, « [The Fatal Realities of Fortress Europe}->http://www.unitedagainstracism.org/campaigns/the-fatal-realities-of-fortress-europe/]
-* [Migreurop, observatoire des frontières->http://www.migreurop.org/rubrique266.html] et en particulier le remarquable [Atlas des migrants en Europe -- édition 2012->http://www.migreurop.org/article2271.html] 
</div>
</div>
Sources pour la carte