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/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;
}