From a3039f637c533da30fdd87b88a29205b3ede1753 Mon Sep 17 00:00:00 2001 From: Tibo Date: Fri, 19 Jul 2019 12:57:08 +0200 Subject: [PATCH] Ajout traits de coupe --- README.md | 1 - src/.temp/now.js | 2 +- src/css/effets.scss | 37 +++++++++++------------ src/css/font.scss | 8 ++--- src/css/gabarits.scss | 4 +-- src/css/layout.scss | 11 ++----- src/css/parametres.scss | 48 +++++++++++++++++++++++++++++- src/css/screen.scss | 20 ++++++++----- src/css/styles_de_caracteres.scss | 8 +++-- src/css/styles_de_paragraphes.scss | 46 +++++++++++++++++++--------- src/pages/Index.vue | 6 ++-- 11 files changed, 127 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 9c547d4..e716511 100644 --- a/README.md +++ b/README.md @@ -88,5 +88,4 @@ git push ``` ## Todo -- Traits de coupes - Pages citations diff --git a/src/.temp/now.js b/src/.temp/now.js index ea72ccc..a0863fb 100644 --- a/src/.temp/now.js +++ b/src/.temp/now.js @@ -1 +1 @@ -export default 1563531149355 \ No newline at end of file +export default 1563531701841 \ No newline at end of file diff --git a/src/css/effets.scss b/src/css/effets.scss index b39eabc..1f493ff 100644 --- a/src/css/effets.scss +++ b/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; } diff --git a/src/css/font.scss b/src/css/font.scss index 78b7fb2..bf90761 100644 --- a/src/css/font.scss +++ b/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"; diff --git a/src/css/gabarits.scss b/src/css/gabarits.scss index 0744598..ecfa0ab 100644 --- a/src/css/gabarits.scss +++ b/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; } diff --git a/src/css/layout.scss b/src/css/layout.scss index b1afe54..829532a 100644 --- a/src/css/layout.scss +++ b/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; diff --git a/src/css/parametres.scss b/src/css/parametres.scss index d942900..24a2892 100644 --- a/src/css/parametres.scss +++ b/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; + } +} diff --git a/src/css/screen.scss b/src/css/screen.scss index 56cb243..265a2d8 100644 --- a/src/css/screen.scss +++ b/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; } diff --git a/src/css/styles_de_caracteres.scss b/src/css/styles_de_caracteres.scss index 0432d97..4714469 100644 --- a/src/css/styles_de_caracteres.scss +++ b/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; diff --git a/src/css/styles_de_paragraphes.scss b/src/css/styles_de_paragraphes.scss index 8a62f32..5e939f0 100644 --- a/src/css/styles_de_paragraphes.scss +++ b/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; } diff --git a/src/pages/Index.vue b/src/pages/Index.vue index dcbc69f..d6bfd0d 100644 --- a/src/pages/Index.vue +++ b/src/pages/Index.vue @@ -27,7 +27,7 @@ -
+
@@ -52,9 +52,9 @@
  • {{note}}
    • -
    +
    -
    +