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
-
+Ouvrir le dossier popsu_html2print dans Atom pour pouvoir faire des modifications dans le CSS.
-### Config
+Pour visualisez la mise en page, ouvrez une page web à l'adresse http://localhost:8080
-todo: faire un fichier de config scss pour les régages généraux type, format, grille, marge, fond perdu, etc
+##### ⚠️ 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 ??
+#### Parametres.scss
-
+Fichier utilisé pour réferencer des variables globales utilisables dans tout le projet.
-### d'autres choses a savoir ?
+*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 1563188246033
+export default 1563287951865

src/css/effets.scss

@@ -0,0 +1,6 @@
+// Coloriser
+
+.green {
+	background-blend-mode: screen;
+	background-color: green;
+}

src/css/gabarits.scss

@@ -1,50 +1,52 @@
 @import 'parametres';
 
+body {
+  font-size: $font-de-base;
+  counter-reset: footnote;
+}
 @media print {
   @page {
-		size: $largeur $hauteur;
+    size: $largeur $hauteur;
-		margin: $marge;
+    margin: $marge;
-	}
+  }
-	@page :left {
+
-		@bottom-left {
+  @page :left {
-			content: counter(page);
+    @bottom-left {
-			font-size: 12pt;
+      content: counter(page);
-			font-family: 'Duke POPSU';
+      font-size: 12pt;
-			transform: translateX(-1cm);
+      font-family: 'Duke POPSU';
-		}
+      transform: translateX(-1cm);
-	}
+    }
-	@page :right {
+  }
-		@bottom-right {
+
-			content: counter(page);
+  @page :right {
-			font-size: 12pt;
+    @bottom-right {
-			font-family: 'Duke POPSU';
+      content: counter(page);
-			transform: translateX(1cm);
+      font-size: 12pt;
-		}
+      font-family: 'Duke POPSU';
-	}
+      transform: translateX(1cm);
+    }
+  }
   @page imagecover {
     size: $largeur $hauteur;
-		margin: 0cm;
+    margin: 0cm;
     @bottom-left {
-			content: unset;
+      content: unset;
-		}
+    }
     @bottom-right {
-			content: unset;
+      content: unset;
-		}
+    }
+  }
 
-	}
+  @page nofolio :left {
+    @bottom-left {
+      content: unset;
+    }
+  }
 
-	@page nofolio :left {
+  @page nofolio :right {
-		@bottom-left {
+    @bottom-right {
-			content: unset;
+      content: unset;
-		}
+    }
-	}
+  }
-	@page nofolio :right {
-		@bottom-right {
-			content: unset;
-		}
-	}
-}
-
-.pagedjs_sheet{
-  overflow: visible;
 }

src/css/layout.scss

@@ -0,0 +1,72 @@
+.pagedjs_page_content > div {
+  height: 100%;
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.no-folio {
+  page: nofolio;
+}
+
+.blank-page {
+  page-break-after: always;
+}
+
+.image-bleed-left {
+  position: absolute;
+  width: calc(100% + 3mm);
+  height: calc(100% + 6mm);
+  margin-left: -3mm;
+  margin-top: -3mm;
+}
+
+.image-bleed-right {
+  position: absolute;
+  width: calc(100% + 3mm);
+  height: calc(100% + 6mm);
+  margin-top: -3mm;
+}
+
+.image-cover {
+  page: imagecover;
+  background-size: cover;
+  background-position: center;
+  background-color: lightgray;
+  background-repeat: no-repeat;
+}
+
+.cover-left {
+  background-position: 0 50%;
+}
+
+.cover-right {
+  background-position: -148mm 50%;
+}
+
+.grow {
+  flex: 1;
+}
+
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.canbreak {
+  page-break-before: always;
+}
+
+.v-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

src/css/print.scss

@@ -1,83 +1,8 @@
 @import 'parametres';
 @import 'font';
-@import 'screen';
 @import 'gabarits';
+@import 'layout';
 @import 'styles_de_paragraphes';
 @import 'styles_de_caracteres';
-
+@import 'effets';
-body {
+@import 'screen';
-	font-size: $font-de-base;
-	counter-reset: footnote;
-}
-.pagedjs_page_content>div {
-	height: 100%;
-}
-.layout {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-.grow{
-	flex:1;
-}
-.no-folio{
-	page: nofolio;
-}
-.blank-page{
-	page-break-after: always;
-}
-.column {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-}
-.justify-end {
-	justify-content: flex-end;
-}
-.canbreak{
-	page-break-before: always;
-}
-.image-bleed-left{
-	position: absolute;
-	width: calc(100% + 3mm);
-	height: calc(100% + 6mm);
-	margin-left: -3mm;
-	margin-top: -3mm;
-}
-.image-bleed-right{
-	position: absolute;
-	width: calc(100% + 3mm);
-	height: calc(100% + 6mm);
-	margin-top: -3mm;
-}
-.image-cover {
-	page: imagecover;
-	background-size: cover;
-	background-position: center;
-	background-color: lightgray;
-	background-repeat: no-repeat;
-}
-.cover-left{
-	background-position:0% 50%;
-}
-.cover-right{
-	background-position:-148mm 50%;
-}
-.green{
-	background-blend-mode:screen;
-	background-color: green;
-}
-.v-center{
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-[data-note] {
-	position: relative;
-	counter-increment: footnote;
-}
-[data-note]::after {
-	position: absolute;
-	content: counter(footnote);
-	transform: translateY(-10px);
-}

src/css/styles_de_caracteres.scss

@@ -11,3 +11,14 @@
 .center{
 	text-align: center;
 }
+// Notes de fin de chapitres
+[data-note] {
+	position: relative;
+	counter-increment: footnote;
+}
+
+[data-note]::after {
+	position: absolute;
+	content: counter(footnote);
+	transform: translateY(-10px);
+}