Commit cd43299c authored by Julie Blanc's avatar Julie Blanc

update hosted link to polyfill + interface

parent bd84972b
......@@ -7,13 +7,11 @@
@page:nth(n)
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
......@@ -22,6 +20,10 @@
@bottom-center { content: "running title"}
}
/* @page blank --------------------------------------- */
@page:blank {
background-color: yellow;
@bottom-left { content: none; }
......@@ -29,19 +31,55 @@
}
section {
break-before: right;
}
/* -------------------------------------------------- */
p {
line-height: 22px;
}
:root { font-size: 18px; }
section { break-before: right; }
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
@media screen {
body { background-color: whitesmoke; }
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-bottom: 10mm;
flex: none;
}
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0 auto;
}
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
......
......@@ -7,13 +7,11 @@
@page:first
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
......@@ -23,6 +21,10 @@
}
}
/* @page:first --------------------------------------- */
@page :first{
background-color: yellow;
@bottom-center{
......@@ -30,22 +32,36 @@
}
}
/* -------------------------------------------------- */
section {
break-before: page;
page-break-before: always;
}
p {
line-height: 22px;
}
:root { font-size: 18px; }
section { break-before: page; }
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
@media screen {
body { background-color: whitesmoke; }
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
......
......@@ -7,17 +7,14 @@
Fichier test
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
/* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
......@@ -26,6 +23,9 @@
}
}
/* page blank of page group --------------------------------------- */
.chapter {
page: chapter;
}
......@@ -41,20 +41,55 @@
}
}
section {
break-before: right;
page-break-before: right;
}
/* page blank of page group --------------------------------------- */
p {
line-height: 22px;
}
:root { font-size: 18px; }
section { break-before: right; }
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
@media screen {
body { background-color: whitesmoke; }
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-bottom: 10mm;
flex: none;
}
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0 auto;
}
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
......
......@@ -7,13 +7,10 @@
First page of page group
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
......@@ -32,6 +29,8 @@
}
}
/* first page of page group --------------------------------------- */
@page chapter :first {
margin: 20mm 20mm;
background-color: yellow;
......@@ -46,23 +45,61 @@
.chapter {
page: chapter;
prince-page-group: start; /* for Prince*/
break-before: page;
break-after: page;
page-break-before: always;
page-break-after: always;
}
/* first page of page group --------------------------------------- */
p {
line-height: 22px;
}
:root { font-size: 18px; }
section { break-before: right; }
h1 {
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
@media screen {
body { background-color: whitesmoke; }
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-bottom: 10mm;
flex: none;
}
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0 auto;
}
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
......
......@@ -7,15 +7,11 @@
nth(n) page of page group
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
......@@ -25,6 +21,10 @@
}
}
/* nth page of page group --------------------------------------- */
@page chapter {
margin: 20mm 20mm;
@bottom-center {
......@@ -32,7 +32,7 @@
}
}
@page chapter:nth(2) {
@page chapter :nth(2) {
margin: 20mm 20mm;
background-color: yellow;
@bottom-center {
......@@ -42,21 +42,43 @@
.chapter {
page: chapter;
prince-page-group: start; /* for Prince*/
break-before: page;
break-after: page;
page-break-before: always;
page-break-after: always;
}
/* nth page of page group --------------------------------------- */
p {
line-height: 22px;
}
:root { font-size: 18px; }
section { break-before: page; }
p { line-height: 22px; }
h1 {
font-size: 24px;
margin-top: 0;
text-transform: uppercase;
}
h2,
h3 {
font-size: 20px;
margin-top: 0;
}
@media screen {
body { background-color: whitesmoke; }
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
......
......@@ -7,13 +7,11 @@
Fichier test
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
......@@ -23,6 +21,9 @@
}
}
/* spread of page group --------------------------------------- */
.chapter {
page: chapter;
}
......@@ -46,14 +47,14 @@
}
}
section {
break-before: page;
page-break-before: always;
}
/* spread of page group --------------------------------------- */
p {
line-height: 22px;
}
:root { font-size: 18px; }
section { break-before: right; }
p { line-height: 22px; }
h1{
font-size: 24px;
......@@ -62,48 +63,38 @@
@media screen {
body {
background-color: whitesmoke;
}
body { background-color: whitesmoke; }
.page {
background-color: #fdfdfd;
margin-bottom: calc(var(--margin) / 2);
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-bottom: 10mm;
flex: none;
border: solid 1px black;
margin-bottom: 20px;
}
.pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0px auto;
}
.pages > .section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
}
#controls {
margin: 20px 0;
text-align: center;
}
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0 auto;
}
.first_page {
margin-left: 50%;
}
.pagedjs_pages>.section {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.pagedjs_first_page {
margin-left: 50%;
}
}
</style>
......
......@@ -7,45 +7,55 @@
@page:nth(n)
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
/* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
}
/* @page:nth(n) --------------------------------------- */
@page:nth(3) {
margin: 20mm 20mm;
background-color: yellow;
@bottom-center{
content: "3rd page of the document"
}
}
}
section {
break-before: page;
page-break-before: always;
}
/* ------------------------------------------------------ */
:root { font-size: 18px; }
section { break-before: page; }
p {
line-height: 22px;
}
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
@media screen {
body { background-color: whitesmoke; }
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 1px #bfbfbf;
margin-top: 10mm;
margin-left: 10mm;
}
}
</style>
......
......@@ -7,29 +7,28 @@
@page:left and @page:right
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 20mm 20mm;
/* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
}
/* @page spread --------------------------------------- */
@page:left {
margin: 20mm 20mm;
background-color: yellow;
@bottom-center{
content: "left"
}
}
@page:right {
......@@ -37,65 +36,60 @@
background-color: red;
@bottom-center{
content: "right"
}
}
}
section {
break-before: page;
page-break-before: always;
}
p {
line-height: 22px;
}
/* ----------------------------------------------------- */
h1{
font-size: 24px;
margin-top: 0;
}
/* interface */
:root { font-size: 18px; }
section { break-before: right; }
@media screen {
p { line-height: 22px; }
body {
background-color: whitesmoke;
}
h1{
font-size: 24px;
margin-top: 0;
}
@media screen {
.pagedjs_page {
margin-bottom: calc(var(--margin) / 2);
flex: none;
border: 1px solid black;
}
body { background-color: whitesmoke; }
.pagedjs_pages {
width: calc(var(--width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
transform-origin: 0 0;
margin: 0 auto;