new print.css stylesheet with fonts in cli

command-line/Makefile

@@ -1,5 +1,7 @@
 STYLESHEET=volumetric-regimes.css
 
+.PHONY: css
+
 all: run
 
 install:

command-line/css/print.css

@@ -1,105 +1,135 @@
-/* Paged.js variables that can be used:
-
-    var(--pagedjs-pagebox-width) for the width of your page
-    var(--pagedjs-pagebox-height) for the height of your page
-
-*/
-
-
-@page{
-	size: 152.4mm 228.6mm;
-	margin: 15mm 20mm 10mm 20mm;
-
-	@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);
-	}
+:root{
+    --font-size: 10pt;
+    --line-height: 15.5pt;
+    --small-font-size: 7.5pt;
+    --small-line-height: 1.55;
+    --first-indent: 7mm;
+    --second-indent: 20mm;
 }
 
-body{
-	font-size: 12pt;
-	line-height: 16pt;
+@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;
 }
 
-/* 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 */
+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;*/
 }
 
-div.section{
-	break-before: left; /* makes sure the new section always starts on the right page */
-}
-/* section title */
-div.section > h2{
-}
+@page{
+    size: 152.4mm 228.6mm;
 
-div.introduction, 
-div.contribution{
-	break-before: left; /* makes sure the new section always starts on the right 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: "";
+    }
 }
 
+
 /* 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;
-}
-h3, h4, h5, h6{
-	margin: 0 0 16pt 0;
-}
-p{
-	margin: 0 0 16pt 0;
+    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{
+    font-size: 100%;
+    margin: 1em 0 0 var(--second-indent);
+    page-break-after: avoid;
+    hyphens: none;
+}
+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;
+}

command-line/templates/template.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
 	<meta charset="utf-8">
 	<script src="./js/paged.js" type="text/javascript"></script>

command-line/templates/template.inspect.html

@@ -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">