Guide de styles

Titre
{{{Ceci est un titre}}}

Ceci est un titre

Italique
Les {couleurs}
Les couleurs

Gras
Les plus belles {{projections}}
Les plus belles projections

Signature de bas de page
<p class="text-right caps">↬ Marion Lecoquierre.</p>

↬ Marion Lecoquierre.

<p class="text-left caps">↬ Marion Lecoquierre.</p>

↬ Marion Lecoquierre.

Texte

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

Mettre des petites caps sur la première ligne d’un paragraphe
<p class=in> ... </p>

Le matin, la ville s’éveille lentement, encore enveloppée d’une brume légère. Les rues se remplissent peu à peu de pas pressés, de conversations brèves et du bruit des moteurs. Dans les cafés, les premières tasses de café chaud diffusent une odeur rassurante. Les marchés de quartier s’animent, étalant des couleurs vives de fruits et de légumes fraîchement cueillis.

Désactiver les petites caps sur un paragraphe qui commence juste après un titre
<p class=off> ... </p>

Le matin, la ville s’éveille lentement, encore enveloppée d’une brume légère. Les rues se remplissent peu à peu de pas pressés, de conversations brèves et du bruit des moteurs. Dans les cafés, les premières tasses de café chaud diffusent une odeur rassurante. Les marchés de quartier s’animent, étalant des couleurs vives de fruits et de légumes fraîchement cueillis.

Resserrer les paragraphes entre eux, à la manière du formatage d’un livre classique
<p class=tight> ... </p>

Le matin, la ville s’éveille lentement, encore enveloppée d’une brume légère. Les rues se remplissent peu à peu de pas pressés, de conversations brèves et du bruit des moteurs. Dans les cafés, les premières tasses de café chaud diffusent une odeur rassurante. Les marchés de quartier s’animent, étalant des couleurs vives de fruits et de légumes fraîchement cueillis.

Au loin, le soleil perce les nuages et dore les façades encore froides. Ce moment suspendu, entre silence et agitation, donne à la ville une allure de respiration profonde. Il rappelle que chaque journée, même ordinaire, commence toujours par une promesse discrète.

Peu après, les enfants se dirigent vers l’école, cartable au dos et rires éclatants. Les vélos et scooters tissent des chemins rapides entre les voitures déjà impatientes.

URL

[loxodromique->https://fr.wikipedia.org/wiki/Loxodromie] C’est le cas par exemple de la projection de Mercator

loxodromique. C’est le cas par exemple de la projection de Mercator.

Citations

Parallèlement, en réponse au « slow disaster », Manuel Tironi propose
une recherche sur le « slow activism » :

<blockquote>
{the type of ethical response to pervasive chemical harm that emerges
through domestic practices.»}


(le type de réponse éthique à un mal chimique diffus 
qui émerge à travers des pratiques domestiques.)

— Manuel Tironi, 2018.
</blockquote>

On peut alors lire le type d’actions que les habitant.es 
mettent en avant dans les entretiens comme une forme

Parallèlement, en réponse au « slow disaster », Manuel Tironi propose
une recherche sur le « slow activism » :

the type of ethical response to pervasive chemical harm that emerges through domestic practices. »

(le type de réponse éthique à un mal chimique diffus
qui émerge à travers des pratiques domestiques.)

— Manuel Tironi, 2018.

On peut alors lire le type d’actions que les habitant.es
mettent en avant dans les entretiens comme une forme

Encadrés

<quote>

{{Quelques espaces de respiration mentionnés :}}

-* Un accès libre et gratuit à des espaces verts

-* Une belle vue : une vue dégagée par la fenêtre
 
</quote>
 

Quelques espaces de respiration mentionnés :
 

• Un accès libre et gratuit à des espaces verts

• Une belle vue : une vue dégagée par la fenêtre

 

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>

À 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’auteur·e, 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>

Modules

Un module est déterminé par le numéro d’un mot-clé, par exemple 13 pour Embodied ecologies. En utilisant le tag <module13> on obtient un tableau des articles liés à ce mot-clé et de leurs traductions, avec le premier tag dans la colonne de gauche, les auteurs, puis les liens (y compris les traductions).