Browse Source

new print.css stylesheet with fonts in cli

master
manetta 3 years ago
parent
commit
aa6e3f305d
  1. 2
      command-line/Makefile
  2. 304
      command-line/css/print.css
  3. BIN
      command-line/fonts/Bitter-Medium.ttf
  4. BIN
      command-line/fonts/Bitter-SemiBold.ttf
  5. 2
      command-line/templates/template.html
  6. 2
      command-line/templates/template.inspect.html

2
command-line/Makefile

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

304
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;
}

BIN
command-line/fonts/Bitter-Medium.ttf

Binary file not shown.

BIN
command-line/fonts/Bitter-SemiBold.ttf

Binary file not shown.

2
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>

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

Loading…
Cancel
Save