Ajout readme, Correction CSS

README.md

@@ -5,49 +5,56 @@ npm install
 gridsome develop
 ```
 pour lancer le serveur de développement à l'adresse `http://localhost:8080`
-
 # En détail
-
 ## Installation
-
 ### 1 Cloner le projet
-
 Ouvrez un terminal et deplacez vous à l'endroit désiré. *(ex: le bureau)*
 ```sh
 cd Desktop/
 git clone https://figureslibres.io/gogs/thibaud_goiffon/popsu_html2print.git
 ```
-
 ### 2 Rentrer dans le projet
-
 Le projet vient d'être cloné dans un dossier sur le bureau, mais le terminal se trouve toujours sur le bureau.
-Il faut maintenant se deplacer à la racine du projet.
+Il faut maintenant se déplacer à la racine du projet.
 ```sh
 cd popsu_html2print/
 ```
-
 ### 3 Installer les dépendances
 ```sh
 npm install
 ```
-
 ### 4 Installer gridsome
 ```sh
 sudo npm install --g @gridsome/cli
 ```
-
 ### 5 lancer le serveur
 ```sh
 gridsome develop
 ```
-pour lancer le serveur de développement à l'adresse http://localhost:8080
-
+Pour visualisez la mise en page, cliquez sur ce lien http://localhost:8080.
+## Fonctionnement
+1. Les contenus sont rentrés par le client via Strapi (https://popsu.strapi.figli.io/admin)
+  - **Nom d'utilisateur** : dev
+  - **Mot de Passe** : 7SqHtx4XCSNLKS5b
+2. Gridsome recupere le contenu texte et l'integre dans le modèle HTML
+3. Le modèle HTML est habillé avec le css.
 ## Utilisation
-
-### Config
-todo: faire un fichier de config scss pour les régages généraux type, format, grille, marge, fond perdu, etc
-
+Ouvrir le dossier popsu_html2print dans Atom pour pouvoir faire des modifications dans le CSS.
+Pour visualisez la mise en page, ouvrez une page web à l'adresse http://localhost:8080
+##### ⚠️ Important
+- Ouvrez toujours la page d'aperçu dans Chromium.
+- Il faut laisser Gridsome tourner dans le terminal, sans ça vous ne pourrez pas afficher l'aperçu sur http://localhost:8080
+- Rechargez la page pour visionnier les changements après modifications et sauvegarde dans les fichiers css.
+- Relancez gridsome si des modifications sont apportées dans Strapi
+```sh
+CTRL+C
+gridsome develop
+```
 ### Styles
-quels fichiers scss peut-on éditer pour la mise en page ??
-
-### d'autres choses a savoir ?
+#### Parametres.scss
+Fichier utilisé pour réferencer des variables globales utilisables dans tout le projet.
+*Ex: les marges, tailles du document, gouttieres, taille de police.*
+#### Ajouter une police
+Pour ajouter une nouvelle font, ajouter le fichier dans le dossier src/fonts, puis referencez la dans le fichier css (src/css/fonts.scss)
+#### Screen.scss
+Sert à afficher les pages en vis-à-vis dans le navigateur.