Clarification du css, Changement Readme

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.

src/.temp/now.js

@@ -1 +1 @@
-export default 1563287951865
+export default 1563353261725

src/css/gabarits.scss

@@ -8,6 +8,7 @@ body {
   @page {
     size: $largeur $hauteur;
     margin: $marge;
+    bleed:$fond-perdu;
   }
 
   @page :left {

src/css/layout.scss

@@ -18,17 +18,17 @@
 
 .image-bleed-left {
   position: absolute;
-  width: calc(100% + 3mm);
+  width: calc(100% + #{$fond-perdu});
-  height: calc(100% + 6mm);
+  height: calc(100% + #{$fond-perdu} * 2);
-  margin-left: -3mm;
+  margin-left: -$fond-perdu;
-  margin-top: -3mm;
+  margin-top: -$fond-perdu;
 }
 
 .image-bleed-right {
   position: absolute;
-  width: calc(100% + 3mm);
+  width: calc(100% + #{$fond-perdu});
-  height: calc(100% + 6mm);
+  height: calc(100% + #{$fond-perdu} * 2);
-  margin-top: -3mm;
+  margin-top: -$fond-perdu;
 }
 
 .image-cover {

src/css/parametres.scss

@@ -3,3 +3,4 @@ $largeur: 148mm;
 $hauteur: 210mm;
 $marge: 2cm;
 $font-de-base: 10pt;
+$fond-perdu: 3mm;

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;
+	}
 }

src/pages/Index.vue

@@ -38,10 +38,13 @@
           <VueMarkdown lang="fr" class="chapter-content justify">{{edge.node.contenu}}</VueMarkdown>
       </div>
       <!-- Notes de fin de document -->
+      <h3 class="section-title">NOTES</h3>
         <ol v-for="note in footnote">
           <li>{{note}}</li>
         </ol>
       <!-- Pleine pages avant les sections -->
+      <div class="blank-page no-folio"></div>
+
       <div class="column image-cover cover-left green image-bleed-left" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
       </div>
       <div class="column image-cover cover-right green image-bleed-right" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>