Commit a5b49709 authored by Julie Blanc's avatar Julie Blanc

add link to hosted script + interface

parent 35c94a5c
......@@ -7,66 +7,63 @@
Background-color
</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 30mm;
/* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
}
@page chapter1 {
background-color: tomato;
}
@page chapter1 { background-color: tomato; }
@page chapter2 {
background-color: #cab4e2;
}
@page chapter2 { background-color: #cab4e2; }
@page chapter3 {
background-color: rgba(255, 99, 71, 0.5);;
}
@page chapter3 { background-color: rgba(255, 99, 71, 0.5); }
#chapter1 { page: chapter1; }
#chapter2 { page: chapter2; }
#chapter3 { page: chapter3; }
/* style and interface */
/* h1{
break-before: page;
page-break-before: always;
} */
:root{ font-size: 18px; }
p {
line-height: 22px;
}
section { break-before: page; }
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
</style>
@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>
</head>
<body>
<section>
<section id="chapter1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
......@@ -116,7 +113,5 @@
</p>
</section>
</section>
</body>
\ No newline at end of file
......@@ -7,17 +7,15 @@
Background-color
</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 30mm;
border: solid 1px black;
background-image: url("background.jpeg");
@bottom-left{
content: counter(page);
......@@ -25,19 +23,33 @@
}
h1{
break-before: page;
}
/* style and interface */
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>
......@@ -48,7 +60,6 @@
<body>
<section>
<section class="chapter" id="chapter1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
......@@ -99,6 +110,5 @@
</section>
</section>
</body>
\ No newline at end of file
......@@ -7,17 +7,13 @@
Background-color
</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 30mm;
border: solid 1px black;
background-image: url("background.jpeg");
background-size: 70%;
background-repeat: no-repeat;
......@@ -28,19 +24,33 @@
}
h1{
break-before: page;
}
/* style and interface */
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>
......@@ -51,7 +61,6 @@
<body>
<section>
<section class="chapter" id="chapter1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
......@@ -101,7 +110,5 @@
</p>
</section>
</section>
</body>
\ No newline at end of file
......@@ -7,50 +7,56 @@
Margins
</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;
}
/* declare margins of the pages */
@page {
size: 6in 8in;
margin-top: 60px;
margin-right: 100px;
margin-bottom: 80px;
margin-left: 20mm;
/* border: solid 1px black; */
@bottom-left{
size: 6in 8in;
margin-top: 60px;
margin-right: 100px;
margin-bottom: 80px;
margin-left: 20mm;
@bottom-left {
content: counter(page);
}
}
/* h1{
break-before: page;
page-break-before: always;
} */
p {
line-height: 22px;
}
/* style and interface */
:root { font-size: 18px; }
section { break-before: page; }
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
</style>
@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>
</head>
<body>
<section>
<section id="chapter1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
......@@ -101,6 +107,5 @@
</section>
</section>
</body>
\ No newline at end of file
......@@ -7,56 +7,62 @@
Margins
</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;
}
/* declare margins of named pages */
@page {
size: 6in 8in;
margin: 20mm 10mm;
/* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
size: 6in 8in;
margin: 20mm 10mm;
@bottom-left { content: counter(page); }
}
@page chapter2 {
background-color: red;
margin: 30mm 30mm;
}
@page chapter2:left {
background-color: yellow;
margin: 30mm 10mm;
}
#chapter2 {
page: chapter2;
}
#chapter2 { page: chapter2; }
p {
line-height: 22px;
}
/* style and interface */
:root { font-size: 18px; }
section { break-before: page; }
p { line-height: 22px; }
h1{
font-size: 24px;
margin-top: 0;
}
</style>
@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>
</head>
<body>
<section>
<section id="chapter1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
......@@ -106,7 +112,5 @@
</p>
</section>
</section>
</body>
\ No newline at end of file
......@@ -7,47 +7,53 @@
Margins
</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 30mm;
/* border: solid 1px black; */
@bottom-left{
content: counter(page);
}
}
/* h1{
break-before: page;
page-break-before: always;
} */
p {
line-height: 22px;
}
h1{
font-size: 24px;
margin-top: 0;
}
</style>
/* declare margins of the pages */
@page {
size: 6in 8in;
margin: 20mm 30mm;
@bottom-left {
content: counter(page);
}
}
/* style and interface */
: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>
</head>
<body>
<section>
<section id="chapter1">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
......@@ -97,7 +103,5 @@
</p>
</section>
</section>
</body>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment