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

Ajout des feuilles de styles

Browse Source
This commit is contained in:
thibaud_goiffon
2019-07-09 12:13:06 +02:00
parent 80eb1cf987
commit 6cbeae6bbb
15 changed files with 821 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/.temp/now.js
+1 -1
View File
@@ -1 +1 @@
export default 1562589257983
export default 1562665742297
src/css/font.scss
+23
View File
@@ -0,0 +1,23 @@
@font-face {
font-family: 'Cormorant';
src: url('../fonts/Cormorant-Light.ttf');
font-weight: 200;
}
@font-face {
font-family: 'TextaAlt';
src: url('../fonts/TextaAlt-Bold.otf');
font-weight: 800;
}
@font-face {
font-family: 'Texta';
src: url('../fonts/Texta-Black.otf');
font-weight: 800;
}
@font-face {
font-family: 'Duke POPSU';
src: url('../fonts/Duke-POPSU.ttf');
}
@font-face {
font-family: "SGI-TextAlt";
src: url("../fonts/SGI-TextAlt.otf") format("opentype");
}
src/css/gabarits.scss
+38
View File
@@ -0,0 +1,38 @@
@import 'parametres';
@media print {
@page {
size: $largeur $hauteur;
margin: $marge;
}
@page :left {
@bottom-left {
content: counter(page);
font-size: 12pt;
font-family: 'Duke POPSU';
transform: translateX(-1cm);
}
}
@page :right {
@bottom-right {
content: counter(page);
font-size: 12pt;
font-family: 'Duke POPSU';
transform: translateX(1cm);
}
}
@page imagecover {
size: $largeur $hauteur;
margin: 0cm;
}
@page nofolio :left {
@bottom-left {
content: unset;
}
}
@page nofolio :right {
@bottom-right {
content: unset;
}
}
}
src/css/parametres.scss
+5
View File
@@ -0,0 +1,5 @@
// parametres du document
$largeur: 148mm;
$hauteur: 210mm;
$marge: 2cm;
$font-de-base: 10pt;
src/css/print.css
-209
View File
@@ -1,209 +0,0 @@
@font-face {
font-family: 'Cormorant';
src: url('../fonts/Cormorant-Light.ttf');
font-weight: 200;
}
@font-face {
font-family: 'TextaAlt';
src: url('../fonts/TextaAlt-Bold.otf');
font-weight: 800;
}
@font-face {
font-family: 'Texta';
src: url('../fonts/Texta-Black.otf');
font-weight: 800;
}
@font-face {
font-family: 'Duke POPSU';
src: url('../fonts/Duke-POPSU.ttf');
}
@font-face {
font-family: "SGI-TextAlt";
src: url("../fonts/SGI-TextAlt.otf") format("opentype");
}
.pagedjs_page_content>div {
height: 100%;
}
.layout {
display: flex;
flex-direction: column;
height: 100%;
}
.grow{
flex:1;
}
.no-folio{
page: nofolio;
}
.blank-page{
page-break-after: always;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
}
.justify-end {
justify-content: flex-end;
}
.capital {
text-transform: uppercase;
font-size: 12pt;
}
body {
font-size: 10pt;
}
@media print {
@page {
size: 148mm 210mm;
margin: 2cm;
}
@page :left {
@bottom-left {
content: counter(page);
font-weight: 12pt;
font-family: 'Duke POPSU';
transform: translateX(-1cm);
}
}
@page :right {
@bottom-right {
content: counter(page);
font-weight: 12pt;
font-family: 'Duke POPSU';
transform: translateX(1cm);
}
}
@page imagecover {
size: 148mm 210mm;
margin: 0cm;
}
@page nofolio :left {
@bottom-left {
content: unset;
}
}
@page nofolio :right {
@bottom-right {
content: unset;
}
}
.table-of-content a {
text-decoration: none;
color: inherit;
}
.table-of-content a::after {
font-size: 9pt;
margin-left: 10pt;
content: target-counter(attr(href), page);
font-family: "SGI-TextAlt";
}
}
.table-of-content {
font-family: "Cormorant";
font-weight: 200;
font-size: 25pt;
line-height: 33pt;
margin: 0;
}
.chapter-title {
font-family: "Cormorant";
font-weight: 200;
font-size: 34pt;
line-height: 34pt;
text-align: right;
}
.canbreak{
page-break-before: always;
}
.chapter-title:after {
content: "++++";
display: block;
font-family: inherit;
font-weight: 200;
font-size: 10pt;
letter-spacing: 4pt;
}
.section-title {
font-family: "TextaAlt";
font-weight: 800;
font-size: 12pt;
}
.chapter-content {
hyphens: auto;
font-family: "Cormorant";
font-weight: 200;
font-size: 10pt;
line-height: 18pt;
}
.section-content {
hyphens: auto;
font-family: "SGI-TextAlt";
font-size:9.5pt;
font-weight: 200;
line-height: 18pt;
}
.justify p{
text-align: justify;
text-align-last: left !important;
hyphens: auto;
}
.image-cover {
page: imagecover;
background-size: cover;
background-position: center;
background-color: lightgray;
background-repeat: no-repeat;
}
.cover-left{
background-position:0% 50%;
}
.cover-right{
background-position:-148mm 50%;
}
.pre-title{
font-family: "Duke POPSU";
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-size: 60pt;
line-height: 48pt;
margin: 0;
}
.main-sub-title{
font-family: "Texa";
font-weight: 800;
font-size: 12pt;
line-height: 15pt;
}
.bold {
font-family: "TextaAlt";
font-weight: 800;
font-size: 12pt;
text-transform: uppercase;
}
.center{
text-align: center;
}
.green{
background-blend-mode:screen;
background-color: green;
}
.v-center{
display: flex;
flex-direction: column;
justify-content: center;
}
src/css/print.scss
+70
View File
@@ -0,0 +1,70 @@
@import 'parametres';
@import 'font';
@import 'screen';
@import 'gabarits';
@import 'styles_de_paragraphes';
@import 'styles_de_caracteres';
body {
font-size: $font-de-base;
counter-reset: footnote;
}
.pagedjs_page_content>div {
height: 100%;
}
.layout {
display: flex;
flex-direction: column;
height: 100%;
}
.grow{
flex:1;
}
.no-folio{
page: nofolio;
}
.blank-page{
page-break-after: always;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
}
.justify-end {
justify-content: flex-end;
}
.canbreak{
page-break-before: always;
}
.image-cover {
page: imagecover;
background-size: cover;
background-position: center;
background-color: lightgray;
background-repeat: no-repeat;
}
.cover-left{
background-position:0% 50%;
}
.cover-right{
background-position:-148mm 50%;
}
.green{
background-blend-mode:screen;
background-color: green;
}
.v-center{
display: flex;
flex-direction: column;
justify-content: center;
}
[data-note] {
position: relative;
counter-increment: footnote;
}
[data-note]::after {
position: absolute;
content: counter(footnote);
transform: translateY(-10px);
}
src/css/screen.scss
+21
View File
@@ -0,0 +1,21 @@
@media screen {
body {
background-color: whitesmoke;
display:flex;
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);
}
}
src/css/styles_de_caracteres.scss
+13
View File
@@ -0,0 +1,13 @@
.bold {
font-family: "TextaAlt";
font-weight: 800;
font-size: 12pt;
text-transform: uppercase;
}
.capital {
text-transform: uppercase;
font-size: 12pt;
}
.center{
text-align: center;
}
src/css/styles_de_paragraphes.scss
+80
View File
@@ -0,0 +1,80 @@
.pre-title{
font-family: "Duke POPSU";
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-size: 60pt;
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;
content: target-counter(attr(href), page);
font-family: "SGI-TextAlt";
}
}
.chapter-title {
font-family: "Cormorant";
font-weight: 200;
font-size: 34pt;
line-height: 34pt;
text-align: right;
}
.chapter-title:after {
content: "++++";
display: block;
font-family: inherit;
font-weight: 200;
font-size: 10pt;
letter-spacing: 4pt;
}
.section-title {
font-family: "TextaAlt";
font-weight: 800;
font-size: 12pt;
}
.chapter-content {
hyphens: auto;
font-family: "Cormorant";
font-weight: 200;
font-size: 10pt;
line-height: 18pt;
}
.section-content {
hyphens: auto;
font-family: "SGI-TextAlt";
font-size:9.5pt;
font-weight: 200;
line-height: 18pt;
}
// texte justifié par defaut
.justify p{
text-align: justify;
text-align-last: left !important;
hyphens: auto;
}
src/main.js
+1 -1
View File
@@ -1,7 +1,7 @@
// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api
import DefaultLayout from '~/layouts/Default.vue'
import '~/css/print.css'
import '~/css/print.scss'
export default function (Vue, { router, head, isClient }) {
// Set default layout as a global component
src/pages/Index.vue
+13 -41
View File
@@ -1,16 +1,11 @@
<template>
<Layout>
<div class="blank-page no-folio">
<!-- Page blanche -->
</div>
<div class="blank-page no-folio"></div>
<div class="v-center grow no-folio">
<h1 class="pre-title center" v-html="$static.metaData.titreDuProjet" />
<h2 class="pre-sub-title center" v-html="$static.metaData.sousTitre" />
</div>
<div class="blank-page no-folio">
</div>
<div class="blank-page no-folio"></div>
<div class="column no-folio">
<div class="bold center" v-for="auteur in $static.metaData.auteurs">
{{auteur}}
@@ -23,7 +18,6 @@
Logo popsu
</div>
</div>
<div class="column image-cover" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'>
<!-- Page fond 1 -->
</div>
@@ -38,16 +32,13 @@
<div class="blank-page no-folio">
<!-- Page blanche -->
</div>
<div class="hyphen" v-for="(edge,index) in $page.chapters.edges.slice().reverse()" :key="'chapter'+edge.node.id">
<h2 v-bind:id="'chapter'+edge.node.id" class="chapter-title" v-bind:class="{ canbreak: isNotFirst(index) }" >{{ edge.node.titre }}</h2>
<VueMarkdown lang="fr" class="chapter-content justify">{{edge.node.contenu}}</VueMarkdown>
</div>
<div class="blank-page no-folio">
<!-- Page blanche -->
</div>
<ol v-for="note in footnote">
<li>{{note}}</li>
</ol>
<!-- Pleine pages avant les sections -->
<div class="column image-cover cover-left green" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
@@ -65,7 +56,6 @@
<h3 class="section-title" v-bind:class="{ canbreak: isNotFirst(index) }">{{ edge.node.titre }}</h3>
<VueMarkdown lang="fr" class="section-content justify">{{ edge.node.contenu }}</VueMarkdown>
</div>
</Layout>
</template>
<page-query>
@@ -96,8 +86,12 @@ query {
import {
Previewer
} from 'pagedjs';
import css from '~/css/print.css'
export default {
data:function(){
return{
footnote:[],
}
},
components: {
VueMarkdown
},
@@ -111,6 +105,9 @@ query {
}
},
mounted() {
Array.from(document.querySelectorAll("span[data-note]")).forEach(note=>{
this.footnote.push(note.getAttribute("data-note"));
});
this.$nextTick(function () {
let hyphenopoly = document.createElement('script'),
hyph = document.createElement('script');
@@ -124,33 +121,8 @@ query {
setTimeout(()=>{
let previewer = new Previewer();
previewer.preview()
},1000)
})
}
}
</script>
<style>
@media screen {
body {
background-color: whitesmoke;
display:flex;
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);
}
}
</style>