...
 
Commits (3)
This diff is collapsed.
This diff is collapsed.
......@@ -7,7 +7,7 @@
@media screen {
.pagedjs_page {
background: linear-gradient( var(--color-paper) 0%, var(--color-paper) 98%, var(--color-baseline) 98%, var(--color-baseline) 100%), var(--color-paper);
background: linear-gradient( var(--color-paper) 0%, var(--color-paper) 94%, var(--color-baseline) 94%, var(--color-baseline) 100%), var(--color-paper);
background-size: 100% var(--baseline);
background-repeat: repeat-y;
background-position-y: var(--margin-head);
......
......@@ -49,4 +49,6 @@
margin-top: 10mm;
} */
}
\ No newline at end of file
......@@ -5,7 +5,6 @@ h1 {
font-size: 5em;
line-height: calc(var(--font-lineHeight)*4);
margin: 0;
break-before: page;
break-inside: avoid;
padding-bottom: calc(var(--font-lineHeight)*3);
......
/* set the running header from the html */
.running-left {
display: none;
string-set: leftTitleRun content(text);
}
.running-right {
display: none;
string-set: rightTitleRun content(text);
}
......@@ -14,19 +12,30 @@
------------------------------------------------- */
@page {
margin-top: 68px;
margin-bottom: 80px;
size: A5;
}
/* blank page
------------------------------------------ */
@page :blank {
@bottom-right {
content: none;
}
@bottom-left {
content: none;
}
background: white;
@top-left-corner{ content: none; }
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@top-right-corner{ content: none; }
@right-top{ content: none; }
@right-middle{ content: none; }
@right-bottom{ content: none; }
@bottom-right-corner{ content: none; }
@bottom-right{ content: none; }
@bottom-center{ content: none; }
@bottom-left{ content: none; }
@bottom-left-corner{ content: none; }
@left-bottom{ content: none; }
@left-middle{ content: none; }
@left-top{ content: none; }
}
......@@ -35,8 +44,9 @@
------------------------------------------------- */
@page:right {
margin: 2cm 3cm;
margin-left: 2cm;
margin-right: 4cm;
@bottom-right {
content: string(rightTitleRun, first) " — " counter(page);
font-family: var(--font-head);
......@@ -51,7 +61,8 @@
------------------------------------------------- */
@page:left {
margin: 2cm 3cm;
margin-left: 3cm;
margin-right: 2cm;
@bottom-left {
content: counter(page) " — " string(leftTitleRun, first) ;
......@@ -73,10 +84,9 @@
font-style: normal;
font-weight: normal;
font-size: 12em;
margin-left: 1.3em;
writing-mode: vertical-rl;
color: gold;
margin-left: 80mm;
}
......@@ -89,7 +99,7 @@
color: gold;
font-size: 3.5em;
margin-top: 2em;
margin-left: 80mm;
}
}
......@@ -98,24 +108,28 @@
@page cover {
margin-top: 40mm;
@bottom-left {
content: none;
}
@bottom-right {
content: none;
}
margin-top: 20mm;
background: url(../images/steve-roe-776240-unsplash.jpg);
background-size: cover;
@top-center {
content: none;
}
@bottom-center {
content: none;
}
color: white;
@top-left-corner{ content: none; }
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@top-right-corner{ content: none; }
@right-top{ content: none; }
@right-middle{ content: none; }
@right-bottom{ content: none; }
@bottom-right-corner{ content: none; }
@bottom-right{ content: none; }
@bottom-center{ content: none; }
@bottom-left{ content: none; }
@bottom-left-corner{ content: none; }
@left-bottom{ content: none; }
@left-middle{ content: none; }
@left-top{ content: none; }
}
......
......@@ -6,17 +6,14 @@ figure {
width: 100%;
text-align: center;
margin-bottom: 0pt;
float-reference: column;
float: top;
float-defer: last;
/* max-height: calc(var(--page-height)/3); */
figcaption {
font-size: 12px;
font-style: normal;
text-indent: 0;
text-align: left;
/* // counter-increment: map; */
font-size: 8pt;
line-height: 11pt;
......@@ -26,9 +23,16 @@ figure {
}
img {
margin-top: 6px;
margin-bottom: 1px;
width: 100%;
/* // margin-top: 13pt; */
object-fit: cover;
object-position: center center;
/* opacity: 0.3; */
}
}
#img-1{
/* height: calc(var(--font-lineHeight)*14 + 6px); */
}
\ No newline at end of file
......@@ -19,7 +19,7 @@
--color-paper: white;
/* color used for the baseline */
--color-baseline: red;
--color-baseline: transparent;
......
This diff is collapsed.
class SnapImages extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterPageLayout(pageElement, page, breakToken){
let images = pageElement.getElementsByClassName("img-snap");
for(let i=0;i<images.length;i++){
let imgwidth = images[i].clientWidth;
let imgheight = images[i].clientHeight;
let varBaseline = getComputedStyle(images[i]).getPropertyValue('--font-lineHeight');
let baseline = parseInt(varBaseline.replace("px", ""));
let varHeightx = getComputedStyle(images[i]).getPropertyValue('--height-x');
let heightx = parseInt(varHeightx.replace("px", ""));
let ratio = Math.round((imgheight - heightx)/baseline);
if(ratio < 18){
images[i].style.height = "calc(var(--font-lineHeight)*" + ratio + " + var(--height-x))";
}else{
images[i].style.height = "calc(var(--font-lineHeight)*18 + var(--height-x))";
images[i].style.objectFit = "contain";
}
}
}
}
Paged.registerHandlers(SnapImages);
class MyHandler extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
beforePageLayout(page) {
// let pageContent = document.getElementsByClassName("pagejs_page");
// console.log(pageContent);
// for(let p=0;p<pageContent.length;p++){
// console.log(pageContent[p]);
// }
console.log(page.area);
let images = page.area.getElementsByClassName("img-snap");
console.log(images.length);
// let pageContent = page.area;
}
}
Paged.registerHandlers(MyHandler);