artus/mystic_forest
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

small cosmetic changes, updates readme

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-26 15:06:17 +02:00
parent 66e6402ebb
commit 5de0aabaec
2 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@@ -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.
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```
```
--background-color: couleur d'arrière-plan du document
--primary-color: couleur utilisée pour le fond des blocs et les boutons avec la classe .classic
--primary-hover-color: couleur de survol pour les boutons concernés
--logo-url: chemin vers l'image utilisée comme entête (defaut: url("./forest.png"))
--logo-width: largeur de l'image
--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.