small cosmetic changes, updates readme

README.md

@@ -16,18 +16,20 @@ J'ai défini des variables afin de faciliter l'utilisation d'une image différen
 
 ### Explication des variables
 
-(...)
+```
-Une fois l'image modifiée, il faut adapter les dimensions de la boîte.
+    --background-color: couleur d'arrière-plan du document
-  1. Renseigner la taille exacte `{ width: ...px, height: ...px }` pour la page d'identification et c'est bon.
+    --primary-color: couleur utilisée pour le fond des blocs et les boutons avec la classe .classic
-  2. Pour la boîte "utilisateur", c'est un peu plus complexe.
+    --primary-hover-color: couleur de survol pour les boutons concernés
-      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`)
+    --logo-url: chemin vers l'image utilisée comme entête (defaut: url("./forest.png"))
-      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 
+    --logo-width: largeur de l'image
-      ```(largeur de l'image - 336) / 2```
+    --logo-height: hauteur de l'image
-      
+    --box-width: largeur des boîtes (defaut: 21em)
+```
 
 ### Notes sur l'image
 
 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.
+De plus, il sera nécessaire d'adapter la couleur du bloc (--primary-color).
 
 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.

mystic_forest/custom_portal.css

@@ -15,6 +15,10 @@
     --box-width: 21em;
 }
 
+/*
+    Global styling
+*/
+
 .ynh-user-portal {
 	display: flex;
 	flex-flow: column nowrap;
@@ -38,7 +42,9 @@
 }
 
 
-/* Styling specific to portal view */
+/* 
+    Styling specific to portal view 
+*/
 
 .logged .content {
 	display: flex;
@@ -79,7 +85,9 @@
     margin: 4%; 
 }
 
-/* Styling specific to the login view */
+/* 
+    Styling specific to the login view 
+*/
 
 .content { 
 	width: var(--box-width);
@@ -110,8 +118,10 @@
     margin-top: 0.4em; 
 }
 
-/* End of custom theme
+/* 
-   Tiles colors are copied from default theme */
+   End of custom theme
+   Tiles colors are copied from default theme 
+*/
 
 .bluebg {
     background: #3498DB!important;