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

@@ -5,49 +5,48 @@
 	background-color: rgb(0,161,154);
 }
 
-.fill-green{
+.fill-green {
 	background-color: rgb(0,161,154);
-	width: calc( 148mm + #{$fond-perdu} * 2);
-	height: calc( 210mm + #{$fond-perdu} * 2);
+	width: calc(148mm + #{$fond-perdu} * 2);
+	height: calc(210mm + #{$fond-perdu} * 2);
 	position: absolute;
-	margin-left: calc( -2cm - #{$fond-perdu});
-	margin-top: calc( -2cm - #{$fond-perdu});
+	margin-left: calc(-2cm - #{$fond-perdu});
+	margin-top: calc(-2cm - #{$fond-perdu});
 }
 
-.fill-motif{
+.fill-motif {
 	background-size: 0.6cm;
-	width: calc( 148mm + #{$fond-perdu} * 2);
-	height: calc( 210mm + #{$fond-perdu} * 2);
+	width: calc(148mm + #{$fond-perdu} * 2);
+	height: calc(210mm + #{$fond-perdu} * 2);
 	position: absolute;
-	margin-left: calc( -2cm - #{$fond-perdu});
-	margin-top: calc( -2cm - #{$fond-perdu});
+	margin-left: calc(-2cm - #{$fond-perdu});
+	margin-top: calc(-2cm - #{$fond-perdu});
 	padding: 2cm;
 }
 
-
-.fill-motif-cross-left{
+.fill-motif-cross-left {
 	@extend .fill-motif;
 	background-image: url("/motifs/croix.png");
 	background-position: right;
 	clip-path: polygon(100% 7%, 83% 12%, 92% 15%, 88% 21%, 86% 38%, 80% 37%, 75% 30%, 77% 27%, 75% 21%, 61% 21%, 69% 18%, 66% 10%, 58% 9%, 55% 3%, 42% 3%, 24% 6%, 22% 11%, 25% 15%, 17% 18%, 15% 23%, 24% 26%, 27% 32%, 22% 40%, 25% 48%, 37% 53%, 49% 49%, 55% 42%, 57% 46%, 56% 55%, 61% 67%, 58% 70%, 41% 65%, 34% 72%, 47% 76%, 51% 81%, 62% 76%, 67% 83%, 67% 89%, 71% 89%, 78% 96%, 97% 94%, 100% 88%, 96% 83%, 100% 82%);
 }
 
-.fill-motif-cross-right{
+.fill-motif-cross-right {
 	@extend .fill-motif;
 	background-image: url("/motifs/croix.png");
 	background-position: left;
-	clip-path: polygon(0 7%, 15% 10%, 30% 15%, 37% 26%, 53% 32%, 48% 47%, 65% 57%, 64% 62%, 61% 67%, 40% 64%, 40% 71%, 24% 71%, 20% 79%, 0 82%, );
+	clip-path: polygon(0 7%, 15% 10%, 30% 15%, 37% 26%, 53% 32%, 48% 47%, 65% 57%, 64% 62%, 61% 67%, 40% 64%, 40% 71%, 24% 71%, 20% 79%, 0 82%,);
 }
 
-.layer-1{
-	z-index:1;
+.layer-1 {
+	z-index: 1;
 }
 
-.layer-2{
-	z-index:2;
+.layer-2 {
+	z-index: 2;
 }
 
-.highlight-white{
+.highlight-white {
 	background: white;
 	padding: 1rem 0.8rem;
 }

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

@@ -8,7 +8,7 @@ body {
   @page {
     size: $largeur $hauteur;
     margin: $marge;
-    bleed:$fond-perdu;
+    bleed: $fond-perdu;
   }
 
   @page :left {
@@ -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

@@ -1,23 +1,27 @@
 @media screen {
 	body {
 		background-color: whitesmoke;
-		display:flex;
-		flex-direction:column;
-		align-items:center;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 	}
-	.pagedjs_pages{
-		display:grid;
-		grid-row-gap:1cm;
+
+	.pagedjs_pages {
+		display: grid;
+		grid-row-gap: 1cm;
 		grid-template-columns: 1fr 1fr;
 	}
-	.pagedjs_page:first-child{
-		grid-column:2;
+
+	.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{
+
+.center {
 	text-align: center;
 }
-.align-right{
+
+.align-right {
 	text-align: right;
 }
 // Notes de fin de chapitres
+
 [data-note] {
 	position: relative;
 	counter-increment: footnote;

src/css/styles_de_paragraphes.scss

@@ -1,38 +1,44 @@
-.pre-title{
+.pre-title {
 	font-family: "Duke POPSU";
 	font-weight: inherit;
 	font-size: 45pt;
 	line-height: 33pt;
 }
-.pre-sub-title{
+
+.pre-sub-title {
 	font-family: "Texa";
 	font-weight: 800;
 	font-size: 10pt;
 	line-height: 13pt;
 }
-.main-title{
+
+.main-title {
 	font-family: "Duke POPSU";
 	font-weight: inherit;
 	font-size: 60pt;
 	line-height: 48pt;
 	margin: 0;
 }
-.main-sub-title{
+
+.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{
+
+.credits {
 	font-size: 9pt;
 	margin-bottom: 6pt;
-	h4{
+
+	h4 {
 		text-transform: uppercase;
-		margin:8pt 0 0 0;
+		margin: 8pt 0 0;
 	}
-	p{
-		margin: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{
+
+.chapter-title::before {
 	content: attr(data-rubrique);
 	display: block;
 	@extend .section-title;
 }
+
 .chapter-content {
 	hyphens: auto;
 	font-family: "Cormorant";
@@ -78,32 +91,37 @@
 	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";
-	font-size:9.5pt;
+	font-size: 9.5pt;
 	font-weight: 200;
 	line-height: 18pt;
 }
 // texte justifié par defaut
-.justify p{
+
+.justify p {
 	text-align: justify;
 	text-align-last: left !important;
 	hyphens: auto;
 }
-.chapter-content h3{
+
+.chapter-content h3 {
 	hyphens: none;
 	font-size: 19pt;
 	font-weight: 200;
 	line-height: 23pt;
 	margin-left: 10mm;
 }
-h4{
+
+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>