new print.css stylesheet with fonts in cli
This commit is contained in:
parent
ee2629f518
commit
aa6e3f305d
@ -1,5 +1,7 @@
|
||||
STYLESHEET=volumetric-regimes.css
|
||||
|
||||
.PHONY: css
|
||||
|
||||
all: run
|
||||
|
||||
install:
|
||||
|
||||
@ -1,105 +1,135 @@
|
||||
/* Paged.js variables that can be used:
|
||||
:root{
|
||||
--font-size: 10pt;
|
||||
--line-height: 15.5pt;
|
||||
--small-font-size: 7.5pt;
|
||||
--small-line-height: 1.55;
|
||||
--first-indent: 7mm;
|
||||
--second-indent: 20mm;
|
||||
}
|
||||
|
||||
var(--pagedjs-pagebox-width) for the width of your page
|
||||
var(--pagedjs-pagebox-height) for the height of your page
|
||||
|
||||
*/
|
||||
@font-face{
|
||||
font-family: "bitter";
|
||||
src: url(../fonts/Bitter-SemiBold.ttf);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "bitter";
|
||||
src: url(../fonts/Bitter-Medium.ttf);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html, body{
|
||||
hyphens: auto;
|
||||
font-family: "bitter";
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
letter-spacing: 0.01em;
|
||||
/*orphans: 2;*/
|
||||
/*widows: 2;*/
|
||||
}
|
||||
|
||||
@page{
|
||||
size: 152.4mm 228.6mm;
|
||||
margin: 15mm 20mm 10mm 20mm;
|
||||
size: 152.4mm 228.6mm;
|
||||
|
||||
@top-left{
|
||||
content: string(sectionTitle);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 2mm;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
font-size: 8pt;
|
||||
color: green;
|
||||
}
|
||||
@top-center{
|
||||
/* copying a h1 to a running element */
|
||||
content: string(contributionTitle);
|
||||
position: absolute;
|
||||
top: 7mm;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
font-size: 8pt;
|
||||
color: magenta;
|
||||
}
|
||||
@bottom-center{
|
||||
bottom-top:5mm;
|
||||
font-family: monospace;
|
||||
font-size: 8pt;
|
||||
content: counter(page);
|
||||
}
|
||||
@top-center{
|
||||
content: string(sectiontitle);
|
||||
font-size: 8pt;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5mm;
|
||||
}
|
||||
@bottom-center{
|
||||
content: counter(page);
|
||||
font-size: 9pt;
|
||||
margin-top: -6mm;
|
||||
}
|
||||
}
|
||||
@page:right{
|
||||
margin: 15mm 20mm 17mm 30mm;
|
||||
}
|
||||
@page:left{
|
||||
margin: 15mm 30mm 17mm 20mm;
|
||||
}
|
||||
@page:first{
|
||||
background-color: #b89ee6;
|
||||
|
||||
@top-left{
|
||||
content: "";
|
||||
}
|
||||
@top-center{
|
||||
content: "";
|
||||
}
|
||||
@bottom-center{
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
@page nomarks{
|
||||
@top-left{
|
||||
content: "";
|
||||
}
|
||||
@top-center{
|
||||
content: "";
|
||||
}
|
||||
@bottom-center{
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
@page:blank{
|
||||
@top-left{
|
||||
content: "";
|
||||
}
|
||||
@top-center{
|
||||
content: "---";
|
||||
}
|
||||
@bottom-center{
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
font-size: 12pt;
|
||||
line-height: 16pt;
|
||||
}
|
||||
|
||||
/* running headers */
|
||||
h1{
|
||||
string-set: sectionTitle content(text);
|
||||
page-break-before: always;
|
||||
}
|
||||
h2{
|
||||
string-set: contributionTitle content(text);
|
||||
/*position: running content(text); */ /* This "moves" the H2 out of the flow */
|
||||
}
|
||||
|
||||
div.section{
|
||||
break-before: left; /* makes sure the new section always starts on the right page */
|
||||
}
|
||||
/* section title */
|
||||
div.section > h2{
|
||||
}
|
||||
|
||||
div.introduction,
|
||||
div.contribution{
|
||||
break-before: left; /* makes sure the new section always starts on the right page */
|
||||
}
|
||||
|
||||
/* general elements*/
|
||||
h1{
|
||||
font-size: 37pt;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
color: green;
|
||||
word-break: normal;
|
||||
string-set: sectiontitle content(text);
|
||||
font-size: 37pt;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
color: green;
|
||||
word-break: normal;
|
||||
hyphens: none;
|
||||
}
|
||||
h2{
|
||||
margin: 0 0 32pt 0;
|
||||
page-break-before: always;
|
||||
color: magenta;
|
||||
text-align: center;
|
||||
string-set: contributiontitle content(text);
|
||||
font-size: 16pt;
|
||||
line-height: 22pt;
|
||||
letter-spacing: 0.025em;
|
||||
margin: 0 0 1em var(--second-indent);
|
||||
hyphens: none;
|
||||
}
|
||||
h3, h4, h5, h6{
|
||||
margin: 0 0 16pt 0;
|
||||
h3{
|
||||
font-size: 100%;
|
||||
margin: 1em 0 0 var(--second-indent);
|
||||
page-break-after: avoid;
|
||||
hyphens: none;
|
||||
}
|
||||
p{
|
||||
margin: 0 0 16pt 0;
|
||||
h4, h5, h6{
|
||||
margin: 0 0 1em 0;
|
||||
page-break-after: avoid;
|
||||
hyphens: none;
|
||||
}
|
||||
.thumb{
|
||||
/* image caption */
|
||||
font-size: 10pt;
|
||||
line-height: 1.25;
|
||||
margin: 24pt 16pt 16pt 16pt;
|
||||
page-break-inside: avoid;
|
||||
/* image caption */
|
||||
font-size: var(--small-font-size);
|
||||
line-height: var(--small-line-height);
|
||||
margin: 24pt 16pt 16pt 16pt;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
img{
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 100mm;
|
||||
height: auto;
|
||||
margin: 0 0 8pt 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
max-width: 100mm;
|
||||
height: auto;
|
||||
margin: 0 0 8pt 0;
|
||||
}
|
||||
pre{
|
||||
font-size: 8pt;
|
||||
@ -108,21 +138,109 @@ pre{
|
||||
margin: 16pt 16pt;
|
||||
}
|
||||
table{
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
sup{
|
||||
line-height: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
a,
|
||||
a:visited,
|
||||
a:active,
|
||||
a:hover{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* specific details */
|
||||
/* sections */
|
||||
|
||||
div.section{
|
||||
page-break-before: right;
|
||||
}
|
||||
|
||||
/* sub-sections */
|
||||
div.introduction,
|
||||
div.contribution{
|
||||
page-break-before: right;
|
||||
}
|
||||
div.introduction h1{
|
||||
display: none;
|
||||
}
|
||||
div.cover.second,
|
||||
div.multi,
|
||||
div.series{
|
||||
page: nomarks;
|
||||
}
|
||||
div.cover.second,
|
||||
div.multi,
|
||||
div.series{
|
||||
page-break-after: always;
|
||||
}
|
||||
div.appendix{
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
div.cover{
|
||||
hyphens: none;
|
||||
margin: -10mm 0 0 10mm;
|
||||
}
|
||||
div.cover,
|
||||
div.cover ul li{
|
||||
font-size: 17pt;
|
||||
line-height: 1.4;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
div.cover ul{
|
||||
padding: 0;
|
||||
margin: 2em 0;
|
||||
}
|
||||
div.cover ul li{
|
||||
list-style: none;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
div.cover.second,
|
||||
div.cover.second ul li{
|
||||
color: black;
|
||||
}
|
||||
div.series{
|
||||
font-size: var(--small-font-size);
|
||||
line-height: var(--small-line-height);
|
||||
}
|
||||
div.series.about{
|
||||
width: 55%;
|
||||
}
|
||||
div.series.colophon{
|
||||
columns: 2 auto;
|
||||
column-gap: 5mm;
|
||||
column-fill: auto;
|
||||
}
|
||||
div.index{
|
||||
}
|
||||
div.index h3{
|
||||
margin: 1em 0;
|
||||
}
|
||||
div.introduction,
|
||||
div.contribution{
|
||||
}
|
||||
div.introduction p,
|
||||
div.contribution p{
|
||||
text-indent: var(--first-indent);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div.introduction ol.references,
|
||||
div.contribution ol.references{
|
||||
/* notes and references */
|
||||
font-size: var(--small-font-size);
|
||||
line-height: var(--small-line-height);
|
||||
columns: 2 auto;
|
||||
column-gap: 7mm;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* specific details, uitzonderingen */
|
||||
a.external{
|
||||
word-break: break-all;
|
||||
}
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
BIN
command-line/fonts/Bitter-Medium.ttf
Normal file
BIN
command-line/fonts/Bitter-Medium.ttf
Normal file
Binary file not shown.
BIN
command-line/fonts/Bitter-SemiBold.ttf
Normal file
BIN
command-line/fonts/Bitter-SemiBold.ttf
Normal file
Binary file not shown.
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./js/paged.js" type="text/javascript"></script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="./css/print.css" rel="stylesheet" type="text/css" media="print">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user