thibaud_goiffon/popsu_html2print
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout traits de coupe

Browse Source
This commit is contained in:
thibaud_goiffon
2019-07-19 12:57:08 +02:00
parent d4c2d0a690
commit a3039f637c
11 changed files with 127 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
-1
View File
@@ -88,5 +88,4 @@ git push
``` ```
## Todo ## Todo
- Traits de coupes
- Pages citations - Pages citations
src/.temp/now.js
+1 -1
View File
@@ -1 +1 @@
export default 1563531149355 export default 1563531701841
src/css/effets.scss
+18 -19
View File
@@ -5,49 +5,48 @@
background-color: rgb(0,161,154); background-color: rgb(0,161,154);
} }
.fill-green{ .fill-green {
background-color: rgb(0,161,154); background-color: rgb(0,161,154);
width: calc( 148mm + #{$fond-perdu} * 2); width: calc(148mm + #{$fond-perdu} * 2);
height: calc( 210mm + #{$fond-perdu} * 2); height: calc(210mm + #{$fond-perdu} * 2);
position: absolute; position: absolute;
margin-left: calc( -2cm - #{$fond-perdu}); margin-left: calc(-2cm - #{$fond-perdu});
margin-top: calc( -2cm - #{$fond-perdu}); margin-top: calc(-2cm - #{$fond-perdu});
} }
.fill-motif{ .fill-motif {
background-size: 0.6cm; background-size: 0.6cm;
width: calc( 148mm + #{$fond-perdu} * 2); width: calc(148mm + #{$fond-perdu} * 2);
height: calc( 210mm + #{$fond-perdu} * 2); height: calc(210mm + #{$fond-perdu} * 2);
position: absolute; position: absolute;
margin-left: calc( -2cm - #{$fond-perdu}); margin-left: calc(-2cm - #{$fond-perdu});
margin-top: calc( -2cm - #{$fond-perdu}); margin-top: calc(-2cm - #{$fond-perdu});
padding: 2cm; padding: 2cm;
} }
.fill-motif-cross-left {
.fill-motif-cross-left{
@extend .fill-motif; @extend .fill-motif;
background-image: url("/motifs/croix.png"); background-image: url("/motifs/croix.png");
background-position: right; 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%); 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; @extend .fill-motif;
background-image: url("/motifs/croix.png"); background-image: url("/motifs/croix.png");
background-position: left; 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{ .layer-1 {
z-index:1; z-index: 1;
} }
.layer-2{ .layer-2 {
z-index:2; z-index: 2;
} }
.highlight-white{ .highlight-white {
background: white; background: white;
padding: 1rem 0.8rem; padding: 1rem 0.8rem;
} }
src/css/font.scss
+4 -4
View File
@@ -1,21 +1,21 @@
@font-face { @font-face {
font-family: 'Cormorant'; font-family: 'Cormorant';
src: url('../fonts/Cormorant-Light.ttf'); src: url("../fonts/Cormorant-Light.ttf");
font-weight: 200; font-weight: 200;
} }
@font-face { @font-face {
font-family: 'TextaAlt'; font-family: 'TextaAlt';
src: url('../fonts/TextaAlt-Bold.otf'); src: url("../fonts/TextaAlt-Bold.otf");
font-weight: 800; font-weight: 800;
} }
@font-face { @font-face {
font-family: 'Texta'; font-family: 'Texta';
src: url('../fonts/Texta-Black.otf'); src: url("../fonts/Texta-Black.otf");
font-weight: 800; font-weight: 800;
} }
@font-face { @font-face {
font-family: 'Duke POPSU'; font-family: 'Duke POPSU';
src: url('../fonts/Duke-POPSU.ttf'); src: url("../fonts/Duke-POPSU.ttf");
} }
@font-face { @font-face {
font-family: "SGI-TextAlt"; font-family: "SGI-TextAlt";
src/css/gabarits.scss
+2 -2
View File
@@ -8,7 +8,7 @@ body {
@page { @page {
size: $largeur $hauteur; size: $largeur $hauteur;
margin: $marge; margin: $marge;
bleed:$fond-perdu; bleed: $fond-perdu;
} }
@page :left { @page :left {
@@ -30,7 +30,7 @@ body {
} }
@page imagecover { @page imagecover {
size: $largeur $hauteur; size: $largeur $hauteur;
margin: 0cm; margin: 0;
@bottom-left { @bottom-left {
content: unset; content: unset;
} }
src/css/layout.scss
+2 -9
View File
@@ -16,21 +16,14 @@
page-break-after: always; page-break-after: always;
} }
.image-bleed-left { .image-bleed {
position: absolute; position: absolute;
width: calc(100% + #{$fond-perdu}); width: calc(100% + #{$fond-perdu} * 2);
height: calc(100% + #{$fond-perdu} * 2); height: calc(100% + #{$fond-perdu} * 2);
margin-left: -$fond-perdu; margin-left: -$fond-perdu;
margin-top: -$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 { .image-cover {
page: imagecover; page: imagecover;
background-size: cover; background-size: cover;
src/css/parametres.scss
+47 -1
View File
@@ -3,4 +3,50 @@ $largeur: 148mm;
$hauteur: 210mm; $hauteur: 210mm;
$marge: 2cm; $marge: 2cm;
$font-de-base: 10pt; $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
+12 -8
View File
@@ -1,23 +1,27 @@
@media screen { @media screen {
body { body {
background-color: whitesmoke; background-color: whitesmoke;
display:flex; display: flex;
flex-direction:column; flex-direction: column;
align-items:center; align-items: center;
} }
.pagedjs_pages{
display:grid; .pagedjs_pages {
grid-row-gap:1cm; display: grid;
grid-row-gap: 1cm;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.pagedjs_page:first-child{
grid-column:2; .pagedjs_page:first-child {
grid-column: 2;
} }
.pagedjs_page { .pagedjs_page {
background-color: #fdfdfd; background-color: #fdfdfd;
flex: none; flex: none;
box-shadow: 0 0 1px rgba(0,0,0,0.2); box-shadow: 0 0 1px rgba(0,0,0,0.2);
} }
.pagedjs_bleed { .pagedjs_bleed {
background-color: lightpink; background-color: lightpink;
} }
src/css/styles_de_caracteres.scss
+6 -2
View File
@@ -4,17 +4,21 @@
font-size: 12pt; font-size: 12pt;
text-transform: uppercase; text-transform: uppercase;
} }
.capital { .capital {
text-transform: uppercase; text-transform: uppercase;
font-size: 12pt; font-size: 12pt;
} }
.center{
.center {
text-align: center; text-align: center;
} }
.align-right{
.align-right {
text-align: right; text-align: right;
} }
// Notes de fin de chapitres // Notes de fin de chapitres
[data-note] { [data-note] {
position: relative; position: relative;
counter-increment: footnote; counter-increment: footnote;
src/css/styles_de_paragraphes.scss
+32 -14
View File
@@ -1,38 +1,44 @@
.pre-title{ .pre-title {
font-family: "Duke POPSU"; font-family: "Duke POPSU";
font-weight: inherit; font-weight: inherit;
font-size: 45pt; font-size: 45pt;
line-height: 33pt; line-height: 33pt;
} }
.pre-sub-title{
.pre-sub-title {
font-family: "Texa"; font-family: "Texa";
font-weight: 800; font-weight: 800;
font-size: 10pt; font-size: 10pt;
line-height: 13pt; line-height: 13pt;
} }
.main-title{
.main-title {
font-family: "Duke POPSU"; font-family: "Duke POPSU";
font-weight: inherit; font-weight: inherit;
font-size: 60pt; font-size: 60pt;
line-height: 48pt; line-height: 48pt;
margin: 0; margin: 0;
} }
.main-sub-title{
.main-sub-title {
font-family: "Texa"; font-family: "Texa";
font-weight: 800; font-weight: 800;
font-size: 12pt; font-size: 12pt;
line-height: 15pt; line-height: 15pt;
} }
.table-of-content { .table-of-content {
font-family: "Cormorant"; font-family: "Cormorant";
font-weight: 200; font-weight: 200;
font-size: 25pt; font-size: 25pt;
line-height: 33pt; line-height: 33pt;
margin: 0; margin: 0;
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
a::after { a::after {
font-size: 9pt; font-size: 9pt;
margin-left: 10pt; margin-left: 10pt;
@@ -40,17 +46,21 @@
font-family: "SGI-TextAlt"; font-family: "SGI-TextAlt";
} }
} }
.credits{
.credits {
font-size: 9pt; font-size: 9pt;
margin-bottom: 6pt; margin-bottom: 6pt;
h4{
h4 {
text-transform: uppercase; text-transform: uppercase;
margin:8pt 0 0 0; margin: 8pt 0 0;
} }
p{
margin:0; p {
margin: 0;
} }
} }
.chapter-title { .chapter-title {
font-family: "Cormorant"; font-family: "Cormorant";
font-weight: 200; font-weight: 200;
@@ -58,6 +68,7 @@
line-height: 34pt; line-height: 34pt;
text-align: right; text-align: right;
} }
.chapter-title:after { .chapter-title:after {
content: "++++"; content: "++++";
display: block; display: block;
@@ -66,11 +77,13 @@
font-size: 10pt; font-size: 10pt;
letter-spacing: 4pt; letter-spacing: 4pt;
} }
.chapter-title::before{
.chapter-title::before {
content: attr(data-rubrique); content: attr(data-rubrique);
display: block; display: block;
@extend .section-title; @extend .section-title;
} }
.chapter-content { .chapter-content {
hyphens: auto; hyphens: auto;
font-family: "Cormorant"; font-family: "Cormorant";
@@ -78,32 +91,37 @@
font-size: 10pt; font-size: 10pt;
line-height: 18pt; line-height: 18pt;
} }
.section-title { .section-title {
font-family: "TextaAlt"; font-family: "TextaAlt";
font-weight: 800; font-weight: 800;
font-size: 12pt; font-size: 12pt;
text-transform: uppercase; text-transform: uppercase;
} }
.section-content { .section-content {
hyphens: auto; hyphens: auto;
font-family: "SGI-TextAlt"; font-family: "SGI-TextAlt";
font-size:9.5pt; font-size: 9.5pt;
font-weight: 200; font-weight: 200;
line-height: 18pt; line-height: 18pt;
} }
// texte justifié par defaut // texte justifié par defaut
.justify p{
.justify p {
text-align: justify; text-align: justify;
text-align-last: left !important; text-align-last: left !important;
hyphens: auto; hyphens: auto;
} }
.chapter-content h3{
.chapter-content h3 {
hyphens: none; hyphens: none;
font-size: 19pt; font-size: 19pt;
font-weight: 200; font-weight: 200;
line-height: 23pt; line-height: 23pt;
margin-left: 10mm; margin-left: 10mm;
} }
h4{
h4 {
margin: 0; margin: 0;
} }
src/pages/Index.vue
+3 -3
View File
@@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<!-- Page de fond --> <!-- 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 --> <!-- Sommaire -->
<div class="column"> <div class="column">
<div class="section-title"> <div class="section-title">
@@ -52,9 +52,9 @@
<li>{{note}}</li> <li>{{note}}</li>
</ol> </ol>
<!-- Pleine pages avant les sections --> <!-- 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>
<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> </div>
<!-- Page blanche --> <!-- Page blanche -->
<div class="blank-page no-folio"></div> <div class="blank-page no-folio"></div>