From 794bc6ee9e136756202204fac83bb0efc272def2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Wed, 9 May 2018 15:00:24 +0200
Subject: [PATCH] nancy-2017: add documentation for custom styles

---
 static/nancy-2017/_custom.scss | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/static/nancy-2017/_custom.scss b/static/nancy-2017/_custom.scss
index 8eee3fb..267625c 100644
--- a/static/nancy-2017/_custom.scss
+++ b/static/nancy-2017/_custom.scss
@@ -430,6 +430,17 @@ $category_items: ((accueil-commerce-entreprise, accueil),
 		  (contactez-nous, divers)
 		);
 
+//* Catégories
+//
+// Différentes icônes de catégories sont disponibles, elles seront utilisées
+// sur les cellules de type "formulaires d'une catégorie" en fonction de
+// l'identifiant associé à la catégorie.
+//
+// Les identifiants reconnus sont : accueil-commerce-entreprise,
+// culture-et-loisirs, dechets-et-nettoiement, papiers-citoyennete,
+// sante-social, securite-police-municipale, vie-pratique,
+// voirie-et-espace-public, stationnement-circulation-transport,
+// famille-et-enfance et contactez-nous.
 @each $category_slug, $category_icon in $category_items {
 	#content div.cell.wcsformsofcategorycell .wcs-forms-of-category-#{$category_slug} h2:first-child::before {
 		background-image: url(pictos/cat-#{$category_icon}.png);
@@ -486,6 +497,16 @@ ul#evolutions li:first-child {
 	min-width: 200px;
 }
 
+//* Page d'accueil
+//
+// La page d'accueil contient une première zone (fond gris) servant à mettre en
+// évidence une démarche ou une information.
+//
+// Pour indiquer qu'une cellule doit se trouver dans cette zone, il suffit de
+// lui assigner "in-heading" comme classe CSS.
+//
+// Pour le petit texte de bienvenue qui apparait à la droite de cette zone,
+// il faut également donner à la cellule l'identifiant "bienvenue".
 #content .heading div.cell.bienvenue {
 	background: $red;
 	padding: 80px 20px 20px;
@@ -497,6 +518,12 @@ ul#evolutions li:first-child {
 	background: inherit;
 }
 
+//*
+// Pour le bloc "À la une", il faut donner à la cellule texte l'identifiant
+// "a-la-une".  Comme contenu elle doit avoir une image (400px de large et
+// 365px de haut) puis une série de paragraphes et généralement un lien final.
+// Attention à la longueur de ces éléments textuels, idéalement le paragraphe
+// central ne devrait pas dépasser 150 signes.
 #content div.cell.a-la-une {
 	float: left;
 	@media screen and (max-width: $mobile-limit) {
-- 
2.17.0