Les styles du site

En plus des possibilités du kramdown et de l'HTML, nous avons développé des styles uniques pour le site de la DINSIC.

Exemple de fonctionnement

Ces styles sont appliqués à l'aide de classes que l'on applique à un élément. La plupart des styles s'appliquent à des blocs de textes.

Par exemple:

> Mon texte
{: .mon-style role="presentation" }

De cette façon on applique le style mon-style au texte mon texte

De cette façon, on peut ajouter n'importe quel style, et même plusieurs à un texte ou une images

mon texte
{: .style1 .style2}

![texte alternatif](Lien vers l'image)
{: .style-image}

Les différents styles

Le chapeau

C'est le style appliqué par défaut à tous les chapeaux

.chapeau

La citation

<div class="citation">contenue</div>

auteur-citation

A placé sous une citation pour ajouter l'auteur

.auteur-citation

L'encadré

<div class="encadre">contenue</div>

La mise en exergue

<div class="exergue">contenue</div>

Le lien important

Ce style ajoute des triangles de chaque cotés d'un lien

.lien-important

La video

Ce style enlève la bordure autour d'une video

.video

Marge sur un contenu

Ajoute de la marge sur n'importe quel contenu, paragraphe, titre etc

Ecrire .margin si vous voulez une marge tout autour ou suivie de bottom, top, left, ou right puis d'un chiffre allant de '0' (pour aucune marge) à '3'

exemples :

.margin-1
.margin-left-3
.margin-top-0

Couleur du texte

.bleue
.noir

Centrer un contenu

.text-center

Mettre une couleur de fond sur du texte

**Acteurs**
{: .titre-couleur .fond-orange}


<style>
.titre-couleur > strong {
color: #fff;
padding-right: 5px;
padding-left: 5px;
}
.fond-orange > strong {
background: #FF6326
}
</style>

Taille de police

Pour une taille normale ajouter la classe .font-size-normal