...
 
Commits (14)
This diff is collapsed.
This diff is collapsed.
......@@ -5,11 +5,11 @@
@import 'modules/reset.css';
@import "modules/vars.css";
@import "modules/header.css";
/* Parts of the content */
@import "modules/body.css";
@import "modules/header.css";
@import "modules/list.css";
@import "modules/pictures.css";
@import "modules/table.css";
......
......@@ -7,7 +7,7 @@
@media screen {
.pagedjs_page {
background: linear-gradient( var(--color-paper) 0%, var(--color-paper) 90%, var(--color-baseline) 90%, 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
......@@ -8,42 +8,32 @@ html {
font-kerning: normal;
}
p {
p, cite, li {
font-size: var(--font-size);
line-height: var(--font-lineHeight);
text-align: justify;
margin: 0;
padding: 0;
hyphens: auto;
/* hyphens: auto; */
widows: 2;
orphans: 2;
}
p,
li {
strong,
.bold,
.Bold {
}
}
em,
.italic {
font-family: inherit;
font-style: var(--font-body)ItalicStyle;
font-weight: 400;
font-style: italic;
}
a {
color: var(--color-primary);
font-family: var(--font-body)Link;
font-weight: 400;
font-family: var(--font-bodyLink);
color: currentColor;
text-decoration: none;
font-style: inherit;
word-break: break-all;
&:hover {
color: var(--color-secondary);
border-bottom: 2px solid var(--color-secondary);
border-bottom: 1px solid var(--color-secondary);
}
}
......@@ -54,22 +44,22 @@ strong em {
blockquote {
display: block;
margin-top: 13pt;
margin-bottom: 12.8pt;
margin-left: 1pc;
p {
font-style: normal;
font-size: 12px;
line-height: 12.80pt;
text-indent: 0;
text-align: justify;
margin-top: 0;
margin-top: var(--font-lineHeight);
margin-bottom: var(--font-lineHeight);
margin-left: var(--indent-block);
margin-right: var(--indent-block);
cite, .caption{
font-style: italic;
margin-right: 12px;
&:before {
content: "– ";
}
}
p+p {
margin-top: 0
}
p:last-of-type {
}
}
sup {
......@@ -80,30 +70,17 @@ sup {
vertical-align: baseline;
}
.references p {
line-height: 16px;
font-size: 13px;
}
hr {
&:after {
content: "* * *";
height: 17px;
display: block;
text-align: center;
font-size: 9px;
letter-spacing: 1em;
}
break-before: avoid;
margin-top: 5px;
margin-bottom: 29px;
margin-top: calc(var(--font-lineHeight)*1.5);
margin-bottom: calc(var(--font-lineHeight)*1.5);
border: none;
&.ls {
height: 0px;
&:after {
content: "\2002";
}
}
}
.small-caps {
......@@ -114,6 +91,3 @@ hr {
font-feature-settings: "onum";
}
a {
word-break: break-all;
}
\ No newline at end of file
code {
font-size: 0.8em;
background: HoneyDew
/* font-size: 0.8em; */
background-color: var(--color-code);
font-family: var(--font-code);
font-size: calc(var(--font-size)*0.8);
line-height: 1;
font-weight: normal;
}
pre {
padding: 1em 0;
font-family: var(--font-title);
line-height: var(--font-lineHeight);
font-weight: normal;
display: block;
padding: 0;
width: 100%;
white-space: pre-wrap;
word-break: break-all;
background: HoneyDew;
font-size: 0.8em;
line-height: var(--font-lineHeight);
margin: 17px 0 23px;
padding: 6px 5px 11px 5px;
background-color: var(--color-code);
padding: calc(var(--font-lineHeight)*0.5) var(--indent-block);
margin: var(--font-lineHeight) 0;
}
\ No newline at end of file
......@@ -2,55 +2,56 @@
h1 {
font-family: var(--font-head);
/* font-size: 23px;
font-variant: all-small-caps;
text-transform: uppercase; */
line-height: calc(var(font-lineHeight) * 3);
font-size: 5em;
line-height: calc(var(--font-lineHeight)*4);
margin: 0;
}
break-inside: avoid;
padding-bottom: calc(var(--font-lineHeight)*3);
/* snap to the baseline (depend of the font-family and the font-size) */
position: relative;
top: 6px;
}
h2 {
h2 {
margin: 0;
font-family: var(--font-head);
font-size: 12px;
font-size: 2.4em;
line-height: calc(var(--font-lineHeight)*2);
break-inside: avoid;
break-after: avoid;
font-weight: 400;
}
margin-top: calc(var(--font-lineHeight)*1);
padding-top: calc(var(--font-lineHeight)*0.75);
padding-bottom: calc(var(--font-lineHeight)*1.25);
/* snap to the baseline (depend of the font-family and the font-size) */
position: relative;
top: 5px;
}
h3 {
margin: 0;
font-family: var(--font-head);
font-size: 12px;
line-height: 17px;
font-style: italic;
margin: 0 auto;
max-width: 361px;
text-align: center;
font-weight: 400;
em {
font-style: normal;
}
&+p {
text-indent: 0;
}
font-size: 1.1em;
line-height: calc(var(--font-lineHeight)*1);
break-inside: avoid;
break-after: avoid;
margin-top: calc(var(--font-lineHeight)*1);
padding-top: calc(var(--font-lineHeight)*0.5);
padding-bottom: calc(var(--font-lineHeight)* 0.5);
}
h4 {
font-family: var(--font-head);
font-size: 13px;
line-height: 13pt;
margin-top: 26pt;
margin: 0;
font-family: var(--font-body);
font-style: italic;
text-align: left;
display: inline-bloc;
font-weight: normal;
line-height: calc(var(--font-lineHeight)*1);
break-inside: avoid;
break-after: avoid;
margin-top: calc(var(--font-lineHeight)*1);
}
h3 + h4 {
margin-top: 0;
}
\ No newline at end of file
/* 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; }
}
......
/* list */
ul,
ol {
ul, ol {
margin: 0;
padding: 0;
text-indent: 0;
ul,
ol {
margin-left: 2.1em;
}
p {
text-indent: 0;
text-align: left;
hyphens: none
}
}
ol,
ul {
margin-left: var(--indent-block);
margin-bottom: calc(var(--font-lineHeight)*0.5);
margin-top: calc(var(--font-lineHeight)*0.5);
hyphens: none;
list-style-position: outside;
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
lh.lpti {
margin-left: 1.5em;
letter-spacing: 1px;
margin-top: 16px;
margin-bottom: 2px;
display: block;
&+li {
margin-top: 0;
}
}
li {
margin-left: 1.5em;
/* // margin-left: 1em; */
}
&>li:first-of-type {
margin-top: 17px;
/* // background: red; */
}
li:nth-of-type(n + 9) {
margin-left: 1.5em;
text-align: left;
}
}
/* // unordered list */
ul {
margin-left: 1.5em;
li {
list-style-type: bullet;
list-style-position: outside;
}
}
\ No newline at end of file
......@@ -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,13 @@ figure {
}
img {
margin-top: 6px;
margin-bottom: 1px;
width: 100%;
/* // margin-top: 13pt; */
}
}
#img-1{
/* height: calc(var(--font-lineHeight)*14 + 6px); */
}
\ No newline at end of file
h2.tabletitle {
font-size: 13px;
line-height: 14pt;
font-style: italic;
font-weight: 400;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 8pt !important;
padding-bottom: 0;
border-collapse: none;
}
.table-caption {
text-indent: 0;
text-align: justify;
margin: 0 auto;
font-size: 8pt !important;
line-height: 17px !important;
}
/* table */
table {
font-family: var(--font-head);
margin-bottom: var(--font-size) * 2;
// border-collapse: none;
font-size: 0.8em;
line-height: var(--font-lineHeight);
page-break-inside: avoid;
border-collapse: collapse;
border-top: 1pt solid var(--color-tableBody);
border-bottom: 1pt solid var(--color-tableBody);
border-left: 0;
border-right: 0;
page-break-inside: avoid;
border-collapse: collapse;
width: 100%;
padding: 0;
margin-top: calc(var(--font-lineHeight)*1.5 - 2px);
margin-bottom: calc(var(--font-lineHeight)*2.5);
}
th {
text-align: center;
padding: 0;
font-weight: normal;
}
p {
font-size: 7px;
line-height: 17px;
text-align: left;
text-indent: 0;
td {
text-align: right;
padding: 0;
}
caption, .table-caption {
text-align: center;
margin-bottom: calc(var(--font-lineHeight)*1);
}
tbody tr:first-of-type {
th, td{
padding-top: calc(var(--font-lineHeight)*0.5);
}
}
thead {
tr:nth-of-type(n+2) {
p {
text-align: right;
}
tbody tr:last-of-type {
th, td{
padding-bottom: calc(var(--font-lineHeight)*0.5);
}
}
th {
width: 10%;
border-left: 0;
border-right: 0;
// padding: 2mm;
text-align: center;
font-weight: normal;
thead {
border-bottom: 1pt solid var(--color-tableBody);
// border-top: 1pt solid var(--color-tableBody);
th{
padding-top: 6px;
padding-bottom: 9px;
}
}
tr {
td {
&:nth-of-type(n+2) {
p {
text-align: right;
}
}
tfoot{
border-top: 1pt solid var(--color-tableBody);
th{
padding-top: 6px;
padding-bottom: 9px;
}
}
}
\ No newline at end of file
......@@ -2,7 +2,7 @@
/* size for the page */
--page-width: 110mm;
--page-height: 210mm;
--page-height: 210mm;
--page-orientation: landscape;
/* margin for the page */
......@@ -19,13 +19,12 @@
--color-paper: white;
/* color used for the baseline */
--color-baseline: transparent;
--color-baseline: red;
/* fonts for the book */
--font-body: "happy";
--font-body: "Spectral";
--font-head: "lack";
--font-title: "lack";
--font-code: "Courier New";
......@@ -40,10 +39,16 @@
--color-primary: red;
--color-secondary: darkred;
--color-tableBody: grey;
--color-code: HoneyDew;
/* list variables */
--font-size: 12px;
--font-lineHeight: 16px;
--indent-block: calc(var(--font-lineHeight)*2);
/* height of the x for the font labeur (for image calculation) */
--height-x: 6px;
}
This diff is collapsed.
This diff is collapsed.
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);
images[i].style.height = "calc(var(--font-lineHeight)*" + ratio + " + var(--height-x))";
images[i].style.objectFit = "cover";
images[i].style.objectPosition = "center center";
}
}
}
Paged.registerHandlers(SnapImages);