Ajout traits de coupe

README.md

@@ -88,5 +88,4 @@ git push
 ```
 ## Todo
 
-- Traits de coupes
 - Pages citations

src/.temp/now.js

@@ -1 +1 @@
-export default 1563531149355
+export default 1563531701841

src/css/effets.scss

@@ -24,7 +24,6 @@
 	padding: 2cm;
 }
 
-
 .fill-motif-cross-left {
 	@extend .fill-motif;
 	background-image: url("/motifs/croix.png");

src/css/font.scss

@@ -1,21 +1,21 @@
 @font-face {
 	font-family: 'Cormorant';
-	src: url('../fonts/Cormorant-Light.ttf');
+	src: url("../fonts/Cormorant-Light.ttf");
 	font-weight: 200;
 }
 @font-face {
 	font-family: 'TextaAlt';
-	src: url('../fonts/TextaAlt-Bold.otf');
+	src: url("../fonts/TextaAlt-Bold.otf");
 	font-weight: 800;
 }
 @font-face {
 	font-family: 'Texta';
-	src: url('../fonts/Texta-Black.otf');
+	src: url("../fonts/Texta-Black.otf");
 	font-weight: 800;
 }
 @font-face {
 	font-family: 'Duke POPSU';
-	src: url('../fonts/Duke-POPSU.ttf');
+	src: url("../fonts/Duke-POPSU.ttf");
 }
 @font-face {
 	font-family: "SGI-TextAlt";

src/css/gabarits.scss

@@ -30,7 +30,7 @@ body {
   }
   @page imagecover {
     size: $largeur $hauteur;
-    margin: 0cm;
+    margin: 0;
     @bottom-left {
       content: unset;
     }

src/css/layout.scss

@@ -16,21 +16,14 @@
   page-break-after: always;
 }
 
-.image-bleed-left {
+.image-bleed {
   position: absolute;
-  width: calc(100% + #{$fond-perdu});
+  width: calc(100% + #{$fond-perdu} * 2);
   height: calc(100% + #{$fond-perdu} * 2);
   margin-left: -$fond-perdu;
   margin-top: -$fond-perdu;
 }
 
-.image-bleed-right {
-  position: absolute;
-  width: calc(100% + #{$fond-perdu});
-  height: calc(100% + #{$fond-perdu} * 2);
-  margin-top: -$fond-perdu;
-}
-
 .image-cover {
   page: imagecover;
   background-size: cover;

src/css/parametres.scss

@@ -3,4 +3,50 @@ $largeur: 148mm;
 $hauteur: 210mm;
 $marge: 2cm;
 $font-de-base: 10pt;
-$fond-perdu: 0mm;
+$fond-perdu: 8mm;
+$traits-de-coupes: true;
+@if $traits-de-coupes {
+  .pagedjs_bleed-top::after {
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 10;
+    content: "";
+    height: calc(#{$fond-perdu} * 0.8);
+    width: calc(100% - #{$fond-perdu} * 2);
+    border-left: 0.25pt solid black;
+    border-right: 0.25pt solid black;
+  }
+
+  .pagedjs_bleed-bottom::after {
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 10;
+    content: "";
+    height: calc(#{$fond-perdu} * 0.8);
+    width: calc(100% - #{$fond-perdu} * 2);
+    border-left: 0.25pt solid black;
+    border-right: 0.25pt solid black;
+  }
+
+  .pagedjs_bleed-left::after {
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 10;
+    content: "";
+    width: calc(#{$fond-perdu} * 0.8);
+    height: calc(100% - #{$fond-perdu} * 2);
+    border-top: 0.25pt solid black;
+    border-bottom: 0.25pt solid black;
+  }
+
+  .pagedjs_bleed-right::after {
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 10;
+    content: "";
+    width: calc(#{$fond-perdu} * 0.8);
+    height: calc(100% - #{$fond-perdu} * 2);
+    border-top: 0.25pt solid black;
+    border-bottom: 0.25pt solid black;
+  }
+}

src/css/screen.scss

@@ -5,19 +5,23 @@
 		flex-direction: column;
 		align-items: center;
 	}
+
 	.pagedjs_pages {
 		display: grid;
 		grid-row-gap: 1cm;
 		grid-template-columns: 1fr 1fr;
 	}
+
 	.pagedjs_page:first-child {
 		grid-column: 2;
 	}
+
 	.pagedjs_page {
 		background-color: #fdfdfd;
 		flex: none;
 		box-shadow: 0 0 1px rgba(0,0,0,0.2);
 	}
+
 	.pagedjs_bleed {
 		background-color: lightpink;
 	}

src/css/styles_de_caracteres.scss

@@ -4,17 +4,21 @@
 	font-size: 12pt;
 	text-transform: uppercase;
 }
+
 .capital {
 	text-transform: uppercase;
 	font-size: 12pt;
 }
+
 .center {
 	text-align: center;
 }
+
 .align-right {
 	text-align: right;
 }
 // Notes de fin de chapitres
+
 [data-note] {
 	position: relative;
 	counter-increment: footnote;

src/css/styles_de_paragraphes.scss

@@ -4,12 +4,14 @@
 	font-size: 45pt;
 	line-height: 33pt;
 }
+
 .pre-sub-title {
 	font-family: "Texa";
 	font-weight: 800;
 	font-size: 10pt;
 	line-height: 13pt;
 }
+
 .main-title {
 	font-family: "Duke POPSU";
 	font-weight: inherit;
@@ -17,22 +19,26 @@
 	line-height: 48pt;
 	margin: 0;
 }
+
 .main-sub-title {
 	font-family: "Texa";
 	font-weight: 800;
 	font-size: 12pt;
 	line-height: 15pt;
 }
+
 .table-of-content {
 	font-family: "Cormorant";
 	font-weight: 200;
 	font-size: 25pt;
 	line-height: 33pt;
 	margin: 0;
+
 	a {
 		text-decoration: none;
 		color: inherit;
 	}
+
 	a::after {
 		font-size: 9pt;
 		margin-left: 10pt;
@@ -40,17 +46,21 @@
 		font-family: "SGI-TextAlt";
 	}
 }
+
 .credits {
 	font-size: 9pt;
 	margin-bottom: 6pt;
+
 	h4 {
 		text-transform: uppercase;
-		margin:8pt 0 0 0;
+		margin: 8pt 0 0;
 	}
+
 	p {
 		margin: 0;
 	}
 }
+
 .chapter-title {
 	font-family: "Cormorant";
 	font-weight: 200;
@@ -58,6 +68,7 @@
 	line-height: 34pt;
 	text-align: right;
 }
+
 .chapter-title:after {
 	content: "++++";
 	display: block;
@@ -66,11 +77,13 @@
 	font-size: 10pt;
 	letter-spacing: 4pt;
 }
+
 .chapter-title::before {
 	content: attr(data-rubrique);
 	display: block;
 	@extend .section-title;
 }
+
 .chapter-content {
 	hyphens: auto;
 	font-family: "Cormorant";
@@ -78,12 +91,14 @@
 	font-size: 10pt;
 	line-height: 18pt;
 }
+
 .section-title {
 	font-family: "TextaAlt";
 	font-weight: 800;
 	font-size: 12pt;
 	text-transform: uppercase;
 }
+
 .section-content {
 	hyphens: auto;
 	font-family: "SGI-TextAlt";
@@ -92,11 +107,13 @@
 	line-height: 18pt;
 }
 // texte justifié par defaut
+
 .justify p {
 	text-align: justify;
 	text-align-last: left !important;
 	hyphens: auto;
 }
+
 .chapter-content h3 {
 	hyphens: none;
 	font-size: 19pt;
@@ -104,6 +121,7 @@
 	line-height: 23pt;
 	margin-left: 10mm;
 }
+
 h4 {
 	margin: 0;
 }

src/pages/Index.vue

@@ -27,7 +27,7 @@
       </div>
     </div>
     <!-- Page de fond -->
-    <div class="column image-cover image-bleed-left" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'></div>
+    <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'></div>
     <!-- Sommaire -->
     <div class="column">
       <div class="section-title">
@@ -52,9 +52,9 @@
           <li>{{note}}</li>
         </ol>
       <!-- Pleine pages avant les sections -->
-      <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 class="column image-cover cover-left green image-bleed" 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 + ")", }'>
+      <div class="column image-cover cover-right green image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
       </div>
       <!-- Page blanche -->
       <div class="blank-page no-folio"></div>