Update README

README.md

@@ -1,3 +1,29 @@
-# mystic_forest
+# Mystic Forest
 
-Thème pour le portail SSOWat
+Thème pour le portail SSOWat
+
+
+## Description
+
+Un thème personnalisé pour le portail SSOWat qui tire grand profit des propriétés CSS Flex. La répartition des éléments est modifiée de la manière suivante :
+    1. Page d'identification : le logo est collé au formulaire. Avec une image sur mesure et quelques couleurs modifiée, cela rend plutôt bien.
+    2. Page du portail : la boîte utilisateur reprend la structure de la boîte d'identification. La liste des applications est placée en vis-à-vis de la boite utilisateur.
+
+## Personnaliser l'image
+
+Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran).
+Il ne devrait pas être trop difficile d'utiliser une image complètement différente. 
+
+**Voici quelques notes si vous souhaitez vous y essayer.**
+
+Nous avons conservé la taille originale de la boîte d'authentification, soit *21em ou 336px*. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc.
+L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.
+
+Une fois l'image modifiée, il faut adapter les dimensions de la boîte.
+  1. Renseigner la taille exacte `{ width: ...px, height: ...px }` pour la page d'identification et c'est bon.
+  2. Pour la boîte "utilisateur", c'est un peu plus complexe.
+      a. Changer l'url de l'image de fond et renseigner la hauteur de l'image dans l'attribut `padding-top` au lieu de `height`. Il faut également adapter la largeur de manière classique (`width`)
+      b. Il faut également modifier l'attribut `margin-left` des éléments de la boîte utilisateur. La valeur de celui-ci correspond à la distance entre le bord gauche de l'image de fond et le début de la ligne de base de 336px. Pour peu qu'elle soit bien centrée, ce qui est de toute façon nécessaire, c'est simplement 
+      ```(largeur de l'image - 336) / 2```
+      
+Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit.