ouidade/popsu_html2print_Rouen_EN
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
+18 -19
View File
@@ -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
+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
+2 -2
View File
@@ -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
+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
+12 -8
View File
@@ -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
+6 -2
View File
@@ -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
+32 -14
View File
@@ -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
+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>