diff --git a/README.md b/README.md
index 38c15c7..4068f96 100644
--- a/README.md
+++ b/README.md
@@ -7,37 +7,47 @@ gridsome develop
pour lancer le serveur de développement à l'adresse `http://localhost:8080`
# En détail
## Installation
-### 1 Cloner le projet
+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
+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 déplacer à la racine du projet.
```sh
cd popsu_html2print/
```
-### 3 Installer les dépendances
+3. ### Installer les dépendances
```sh
npm install
```
-### 4 Installer gridsome
+Un dossier "node_modules" vient d'être ajouté à votre clone du projet. Il est peuplé par les dependances définits dans le fichier "package.json".
+4. ### Installer gridsome
+L'installation de Gridsome de maniere globale sur votre systeme est nécessaire pour utiliser de nouvelles commandes dans le terminal.
```sh
sudo npm install --g @gridsome/cli
```
-### 5 lancer le serveur
+5. ### lancer le serveur
```sh
gridsome develop
```
+Après un court temps de construction, ce message devrait se présenter.
+```sh
+DONE Compiled successfully in 278ms 11:05:45
+ Site running at: http://localhost:8080/
+ Explore GraphQL data at: http://localhost:8080/___explore
+```
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
+2. Gridsome récupère le contenu texte et l'intègre dans le modèle HTML
3. Le modèle HTML est habillé avec le css.
+
## Utilisation
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
@@ -50,11 +60,12 @@ Pour visualisez la mise en page, ouvrez une page web à l'adresse http://localho
CTRL+C
gridsome develop
```
-### Styles
+
+## Styles
+#### 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)
#### 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.
diff --git a/src/.temp/now.js b/src/.temp/now.js
index 2ecf88b..14cca24 100644
--- a/src/.temp/now.js
+++ b/src/.temp/now.js
@@ -1 +1 @@
-export default 1563287951865
\ No newline at end of file
+export default 1563353261725
\ No newline at end of file
diff --git a/src/css/gabarits.scss b/src/css/gabarits.scss
index eadfb30..0744598 100644
--- a/src/css/gabarits.scss
+++ b/src/css/gabarits.scss
@@ -8,6 +8,7 @@ body {
@page {
size: $largeur $hauteur;
margin: $marge;
+ bleed:$fond-perdu;
}
@page :left {
diff --git a/src/css/layout.scss b/src/css/layout.scss
index 5c77c3d..b1afe54 100644
--- a/src/css/layout.scss
+++ b/src/css/layout.scss
@@ -18,17 +18,17 @@
.image-bleed-left {
position: absolute;
- width: calc(100% + 3mm);
- height: calc(100% + 6mm);
- margin-left: -3mm;
- margin-top: -3mm;
+ width: calc(100% + #{$fond-perdu});
+ height: calc(100% + #{$fond-perdu} * 2);
+ margin-left: -$fond-perdu;
+ margin-top: -$fond-perdu;
}
.image-bleed-right {
position: absolute;
- width: calc(100% + 3mm);
- height: calc(100% + 6mm);
- margin-top: -3mm;
+ width: calc(100% + #{$fond-perdu});
+ height: calc(100% + #{$fond-perdu} * 2);
+ margin-top: -$fond-perdu;
}
.image-cover {
diff --git a/src/css/parametres.scss b/src/css/parametres.scss
index 552a75b..71d7cfa 100644
--- a/src/css/parametres.scss
+++ b/src/css/parametres.scss
@@ -3,3 +3,4 @@ $largeur: 148mm;
$hauteur: 210mm;
$marge: 2cm;
$font-de-base: 10pt;
+$fond-perdu: 3mm;
diff --git a/src/css/screen.scss b/src/css/screen.scss
index 2ae1cd3..56cb243 100644
--- a/src/css/screen.scss
+++ b/src/css/screen.scss
@@ -18,4 +18,7 @@
flex: none;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
+ .pagedjs_bleed {
+ background-color: lightpink;
+ }
}
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 019fe7b..9454a2e 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -38,10 +38,13 @@