param.JSON

@@ -11,6 +11,7 @@
   "search": [
     "introductions",
     "chapitres",
-    "sections"
+    "sections",
+    "credits"
   ]
 }

src/css/effets.scss

@@ -6,21 +6,25 @@
 }
 
 .fill-green {
-	background-color: rgb(0,161,154);
-	width: calc(#{$largeur} + #{$fond-perdu} * 2);
-	height: calc(#{$hauteur} + #{$fond-perdu} * 2);
 	position: absolute;
-	margin-left: calc(-2cm - #{$fond-perdu});
-	margin-top: calc(-2cm - #{$fond-perdu});
+	background-color: rgb(0,161,154);
+	width: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  height: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  margin-left: calc(-#{$marge} - #{$fond-perdu} );
+  margin-top: calc(-#{$marge} - #{$fond-perdu}) !important;
+  left:0;
+  top:0;
 }
 
 .fill-motif {
-	background-size: 0.4cm;
-	width: calc(#{$largeur} + #{$fond-perdu} * 2);
-	height: calc(#{$hauteur} + #{$fond-perdu} * 2);
 	position: absolute;
-	margin-left: calc(-2cm - #{$fond-perdu});
-	margin-top: calc(-2cm - #{$fond-perdu});
+	background-size: 0.4cm;
+	width: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  height: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  margin-left: calc(-#{$marge} - #{$fond-perdu} );
+  margin-top: calc(-#{$marge} - #{$fond-perdu}) !important;
+  left:0;
+  top:0;
 	padding: 2cm;
 }
 

src/css/layout.scss

@@ -24,10 +24,12 @@
 
 .image-bleed {
   position: absolute;
-  width: calc(100% + #{$fond-perdu} * 6);
-  height: calc(100% + #{$fond-perdu} * 6);
-  margin-left: -$fond-perdu - 24;
-  margin-top: -$fond-perdu - 16;
+  width: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  height: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  margin-left: calc(-#{$marge} - #{$fond-perdu} );
+  margin-top: calc(-#{$marge} - #{$fond-perdu}) !important;
+  left:0;
+  top:0;
 }
 
 .image-cover {
@@ -38,14 +40,6 @@
   background-repeat: no-repeat;
 }
 
-.cover-left {
-  background-position: 0 50%;
-}
-
-.cover-right {
-  background-position: -$largeur 50%;
-}
-
 .grow {
   flex: 1;
 }
@@ -66,6 +60,12 @@
 .breakBefore{
   page-break-before: always;
 }
+.breakBeforeRight{
+  page-break-before: right;
+}
+.breakBeforeLeft{
+  page-break-before: left;
+}
 .breakAfter{
   page-break-after: always;
 }
@@ -93,3 +93,12 @@
   left:0;
   object-position: calc(-276mm / 2) 0;
 }
+
+.layout *:first-child{
+  margin-top: 0;
+}
+
+.layout p:first-child:empty{
+  margin: 0;
+  margin-top: -1em;
+}

src/css/parametres.scss

@@ -3,8 +3,8 @@ $largeur: 148mm;
 $hauteur: 210mm;
 $marge: 2cm;
 $font-de-base: 10pt;
-$fond-perdu: 8mm;
-$traits-de-coupes: true;
+$fond-perdu: 0mm;
+$traits-de-coupes: false;
 @if $traits-de-coupes {
   .pagedjs_bleed-top::after {
     box-sizing: border-box;

src/css/styles_de_paragraphes.scss

@@ -60,11 +60,11 @@
 	line-height: 25pt;
 	margin: 0;
 
-
 	a {
 		display: block;
 		text-decoration: none;
 		color: inherit;
+		margin-bottom: 0.2em;
 		& p{
 			margin: 0;
 		}
@@ -82,6 +82,11 @@
 	font-size: 9pt;
 	margin-bottom: 6pt;
 
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: 100%;
+
 	h4 {
 		font-family: "TextaAlt";
 		text-transform: uppercase;
@@ -102,6 +107,7 @@
 	line-height: 34pt;
 	text-align: right;
 	margin-bottom: 20mm;
+	margin-top: 0;
 }
 
 .chapter-title:after {
@@ -134,8 +140,9 @@
 	font-weight: 800;
 	font-size: 12pt;
 	text-transform: uppercase;
+	text-align: left;
 }
-.layout:nth-child(odd) .section-title:not(.still){
+.pagedjs_right_page .section-title:not(.still){
 	text-align: right;
 }
 
@@ -193,19 +200,23 @@ p img{
 }
 
 .legend{
+	position: absolute;
+	bottom: 0;
 	font-size: 9.5pt;
 	font-family: "Texta";
 	line-height: 9pt;
 }
 
 blockquote{
+	position: absolute;
 	background-image: url("/motifs/croix.png");
 	background-size: 0.4cm;
-	width: calc(#{$largeur} + #{$fond-perdu} * 2);
-	height: calc(#{$hauteur} + #{$fond-perdu} * 2);
-	position: absolute;
-	margin-left: calc(-2cm - #{$fond-perdu});
-	margin-top: calc(-2cm - #{$fond-perdu});
+	width: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  height: calc(100% + (#{$marge} + #{$fond-perdu})*2);
+  margin-left: calc(-#{$marge} - #{$fond-perdu} );
+  margin-top: calc(-#{$marge} - #{$fond-perdu}) !important;
+  left:0;
+  top:0;
 	padding: 2cm;
 	break-before: always;
 	break-after: always;

src/pages/Index.vue

@@ -48,17 +48,17 @@
       </span>
     </div>
   </div>
-  <div class="blank-page no-folio" />
   <!-- Chapitres -->
   <div v-for="(edge,index) in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
+    <div class="blank-page no-folio breakBeforeLeft" />
     <div v-if="edge.node.Rubrique">
-      <div class="section-title" :class="{breakBefore: index != 0}">
+      <div class="section-title">
         {{edge.node.Rubrique}}
       </div>
       <h2 :id="`chapitres${edge.node.id}`" class="chapter-title ">{{edge.node.Titre}}</h2>
     </div>
     <div v-else>
-      <h2 :id="`chapitres${edge.node.id}`" class="chapter-title breakBefore">{{edge.node.Titre}}</h2>
+      <h2 :id="`chapitres${edge.node.id}`" class="chapter-title">{{edge.node.Titre}}</h2>
     </div>
     <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
     </VueMarkdown>
@@ -67,10 +67,19 @@
   <div class="blank-page" />
   <!-- Sections -->
   <div v-for="edge in orderBy($page.sections.edges,'node.Ordre')">
+    <div v-if="edge.node.espace" class="blank-page no-folio breakBeforeLeft" />
     <h2 :id="`chapitres${edge.node.id}`" class="section-title canbreak">{{edge.node.Titre}}</h2>
-    <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
+    <VueMarkdown class="chapter-content">{{edge.node.Contenu}}
     </VueMarkdown>
   </div>
+  <!-- Credits -->
+  <div class="credits canbreak">
+    <div class="credit" v-for="(edge,index) in $page.credits.edges.slice().reverse()" :key="`credits-${edge.node.id}`">
+      <h4 v-html="edge.node.Role"/>
+      <VueMarkdown lang="fr" class="section-content">{{ edge.node.Nom }}</VueMarkdown>
+    </div>
+  </div>
+  <div class="blank-page no-folio fill-green" />
 </Layout>
 </template>
 <script>
@@ -78,8 +87,6 @@ const axios = require('axios'),
   path = require('path'),
   param = require(`../../param.JSON`);
 
-
-
 import {
   Previewer
 } from 'pagedjs'
@@ -154,6 +161,7 @@ export default {
           Titre
           Contenu
           Ordre
+          espace
         }
       }
     }
@@ -179,6 +187,16 @@ export default {
       }
     }
 
+    credits: allCredits {
+      edges {
+        node {
+          id
+          Role
+          Nom
+        }
+      }
+    }
+
   }
 </page-query>
 <static-query>