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
- Traits de coupes
- Pages citations
src/.temp/now.js
+1 -1
View File
@@ -1 +1 @@
export default 1563531149355
export default 1563531701841
src/css/effets.scss
-1
View File
@@ -24,7 +24,6 @@
padding: 2cm;
}
.fill-motif-cross-left {
@extend .fill-motif;
background-image: url("/motifs/croix.png");
src/css/font.scss
+4 -4
View File
@@ -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
+1 -1
View File
@@ -30,7 +30,7 @@ body {
}
@page imagecover {
size: $largeur $hauteur;
margin: 0cm;
margin: 0;
@bottom-left {
content: unset;
}
src/css/layout.scss
+2 -9
View File
@@ -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
+47 -1
View File
@@ -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
+4
View File
@@ -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
View File
@@ -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
+19 -1
View File
@@ -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
+3 -3
View File
@@ -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>